Hex, RGB e HSL
Digite a cor na notação que você tem, e as outras são preenchidas. Os três campos ficam sincronizados.
Como fica
Texto no branco · 3,89
Texto no preto · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Canais
- Vermelho224
- Verde82
- Azul31
- Matiz16°
- Saturação76 %
- Luminosidade50 %
Escala de luminosidade
O mesmo matiz e saturação, com luminosidade de 10 a 90 %. Clique em uma amostra para selecioná-la.
Como funciona
Hex é o mesmo que RGB, escrito em hexadecimal. Cada par de caracteres é um canal, de 00 a ff, ou seja, de 0 a 255.
A forma curta de três caracteres duplica cada caractere. #f30 significa #ff3300, e é por isso que só 4096 das 16,7 milhões de cores podem ser escritas assim.
O HSL descreve as mesmas cores por matiz, saturação e luminosidade, em vez de três fontes de luz. O matiz é um ângulo no círculo cromático, em que 0 é vermelho, 120 verde e 240 azul.
O HSL é mais fácil de usar quando você quer variações de uma cor. Mantenha matiz e saturação, mude só a luminosidade, e você tem uma escala coerente.
A conversão entre RGB e HSL é exata nos dois sentidos, mas arredondar o HSL para graus e porcentagens inteiros pode mover um canal em um passo quando se vai e volta.
Como a ferramenta converte
De RGB para HSL, cada canal é dividido por 255. A luminosidade L é a média do maior e do menor canal. A saturação S é a diferença entre eles dividida por 1 − |2L − 1|. O matiz H depende de qual canal é o maior e é dado em graus. No sentido contrário, os canais são arredondados para números inteiros. As linhas de hex, RGB e HSL mostram números inteiros, enquanto a escala de luminosidade embaixo é calculada com os valores sem arredondamento.
Exemplo
#1e90ff é vermelho 30, verde 144 e azul 255, isto é, 0,118, 0,565 e 1. O maior é 1 e o menor 0,118, então L = (1 + 0,118) / 2 = 0,559, ou 55,9 %. A diferença 0,882 dividida por 1 − |2 × 0,559 − 1| = 0,882 dá S = 1, ou 100 %. O azul é o maior, então H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 graus.
A ferramenta escreve a cor como hsl(210, 100%, 56%). Digite esse texto e você recebe #1f8fff, não #1e90ff, porque o arredondamento para graus e porcentagens inteiros moveu o vermelho e o verde um passo cada.
A luminosidade do HSL não é a luminosidade percebida
O CSS Color 4 observa que o amarelo e o azul têm ambos luminosidade HSL de 50 %, mas o amarelo parece muito mais claro. Os números de contraste da própria ferramenta mostram o mesmo: hsl(60, 100%, 50%) dá razão 1,07 contra o branco, e hsl(240, 100%, 50%) dá 8,59. As variações abaixo da cor mantêm matiz e saturação e mudam só a luminosidade, em passos de 10 pontos percentuais. Elas combinam no matiz, mas os passos não parecem iguais.
O que a ferramenta lê
Os campos seguem o CSS Color 4: hex com três, quatro, seis ou oito caracteres, rgb() com números ou porcentagens, em que 100 % é 255, e hsl() com o matiz em graus ou nas unidades deg, rad, grad e turn, separados por vírgulas ou espaços. Assim, rgb(50%, 50%, 50%) vira rgb(128, 128, 128), e hsl(0.5turn, 100%, 50%) recebe o matiz de 180 graus, que é #00ffff.
A transparência, em hex de quatro ou oito caracteres, como quarto valor ou depois de uma barra, é descartada: a ferramenta trabalha com cores opacas e informa quanto havia. Valores fora dos seus intervalos, como rgb(300, 0, 0), são recusados para que um erro de digitação apareça, embora o CSS os leve ao limite do intervalo.