2

Eu preciso intensificar cores. Sendo a cor vermelha para números negativos e verde para números positivos.

A cor começa clara e vai se intensificando. Quanto mais negativo, mais escuro fica o vermelho e quanto mais positivo, mais escuro fica o verde.

Eu ainda não defini meus limites min e max para se basear, mas com certeza quero um limite maior que 255.

Essa foi minha tentativa para os números negativos: Obs: essa tentativa foi total no chute, nunca trabalhei com essa manipulação de cores. Não faço ideia de se é nesse caminho ou não.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <div id="number">
        -100
    </div>
</body>
<script>
    var div = document.querySelector('#number');
    var number = Number(document.querySelector('#number').innerText);
    var redRgb = 255;
    console.dir(redRgb + number);
    div.style.color = `rgb(${redRgb + number},0,0)`;
</script>
</html>

1 Resposta 1

-1

Reproduzi e alterei seu código aqui, mas acho que não cheguei onde você queria. A cor rgb(255, 0, 0) é o tom mais vermelho do vermelho, quando passar de 255 você terá que mudar de tom de vermelho, fiz um esboço assim:

  const tonsDeVermelho = {
    'primario': '#ec2300',
    'secundario': '##cc0000'
  }

  let number =(Number(input.value) * -1);

  if (number < 255) {
    div.style.color = `rgb(${number},0,0)`;
  }

  if(number >= 255 && number < 510){
    div.style.color = tonsDeVermelho.primario
  }

  if(number >= 510){
    div.style.color = tonsDeVermelho.secundario
  }

}

Não pensei em outra solução, esses outros tons de vermelho achei nesse site: https://encycolorpedia.pt/ff0000

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .