Se você alguma vez precisar gerar cores em um contínuo suave do verde ao vermelho, pode ser tentado a tratar os valores RGB como coordenadas e fazer interpolação linear entre eles para gerar cores intermediárias.
Este é um grande erro.
Isso porque em terras RGB, a meio caminho entre o verde e o vermelho é uma cor marrom grosseira. O que é isso? Você esperava passar pelo amarelo e pelo laranja no meio? Desculpe, RGB não funciona assim.
O problema é que você deseja alterar o matiz suavemente (verde-> amarelo -> laranja -> vermelho), mas deseja deixar a luminosidade e a saturação em paz. Felizmente, há um espaço de coordenadas de cor só para você! É chamado de HSL (para matiz, saturação e luminosidade).
O matiz é expresso em graus (de 360) e vai de vermelho em 0 graus, passando por verde em 120 graus e finalmente azul em 240 graus (e de volta ao vermelho novamente em 360). Fácil! O melhor de tudo para nós, indo do verde ao vermelho, você está apenas modificando um número, sem consequências indesejadas.
Saturação é como as coisas são em “escala de cinza”. 100% de saturação significa a versão “mais brilhante” possível de uma cor. 0% é uma projeção da sua cor na linha do preto ao branco. Tirar uma foto e apenas alterar a saturação para 0% resultará em tons de cinza.
Luminosidade é o quão desbotada ou escurecida é a cor. A luminosidade 0 é preta (não importa quais sejam H e S) e a luminosidade 100% é branca. Aumentar a luminosidade de uma cor torna-a mais “pastel”, se isso lhe dá uma intuição melhor.
Portanto, nossas cores RGB prototípicas em HSL são:
vermelho: matiz 0deg, 100% saturação, 50% claridade
verde: 120deg matiz, 100% saturação, 50% claridade
azul: 240deg matiz, 100% saturação, 50% luminosidade
Observe que tudo o que temos que mudar é o matiz e não precisamos nos preocupar com as cores escuras ou claras que podem estar entre elas, como fazemos no espaço de cores rgb (já que mantemos explicitamente a luminosidade e a saturação iguais!)
Então, finalmente, para calcular as cores intermediárias entre o verde e o vermelho (passando pelo amarelo e não pelo azul), basta fazer:
(1 - 0.00) * 120 = 120 ( green )
(1 - 0.25) * 120 = 90 ( light green )
(1 - 0.50) * 120 = 60 ( yellow )
(1 - 0.75) * 120 = 30 ( orange )
(1 - 1.00) * 120 = 0 ( red )Perfeito!
Agora, as boas notícias, CSS3 suporta cores especificadas em hsl. Aqui está um exemplo:
p {
background-color: hsl(120, 100%, 50%);
}