RGB para cor HSL

Leitura de uma cor como matiz e luminosidade

Converta canais RGB inteiros em matiz, saturação e luminosidade. Use RGB para HSL quando você souber exatamente os canais vermelho, verde e azul, mas quiser uma maneira mais intuitiva de comparar cores ou ajustar uma paleta. A ferramenta aceita canais inteiros de zero a 255, na sintaxe rgb() ou separados por vírgulas. Ela deriva a tonalidade do canal dominante e das diferenças entre os canais.

Os canais são normalizados para 0–1; seu máximo, mínimo e diferença determinam HSL. A saturação cai para zero quando os três canais são iguais; o cinza então não tem matiz significativa, então a saída usa zero graus por convenção. A luminosidade é baseada no ponto médio entre o canal normalizado mais alto e mais baixo. A amostra produz uma cor HSL próxima de 211 graus, útil para encontrar tons de azul relacionados. As percentagens apresentadas são arredondadas para duas casas decimais.

Entendendo os modelos de cores

O resultado HSL é útil quando uma tarefa de paleta pergunta como as cores se relacionam por matiz, mas uma única alteração no HSL não garante uma alteração visualmente uniforme. O resultado não tem canal alfa; essa ferramenta usa RGB inteiro e HSL convencional, não perfis de gerenciamento de cores. HEX e RGB descrevem os mesmos três canais aditivos de luz. Cada canal tem um valor inteiro de zero a 255, e hexadecimal escreve esse valor com dois dígitos de base 16. Um código de seis dígitos, portanto, tem pares vermelho, verde e azul nessa ordem. HSL é outra maneira de descrever uma cor RGB: matiz identifica uma posição na roda de cores, saturação controla a distância de um cinza da mesma luminosidade, e luminosidade coloca a cor entre preto e branco. Esses formatos são úteis para comparar tokens de design, ler CSS e ajustar uma paleta sem adivinhar o significado de um código.

Escolhendo a representação certa

Dois triplos RGB com valores iguais de vermelho, verde e azul são cinza: sua saturação é zero e a tonalidade é convencionalmente relatada como zero, não uma direção medida na roda de cores. Entradas quase cinzentas podem, portanto, mostrar tonalidade instável de uma edição de um canal. Se você converter posteriormente porcentagens arredondadas de HSL de volta para RGB inteiro, compare os canais em vez de exigir uma correspondência byte a byte. Mantenha os valores RGB originais quando tokens de design precisos precisarem ser recuperados.

Para uma verificação concreta, a entrada de exemplo rgb(42, 127, 220) produz hsl(211.35, 71.77%, 51.37%). Mantenha o original ao lado do resultado ao compará-lo com outro aplicativo. Para uma segunda verificação, insira o resultado exibido na ferramenta de cor reversa e compare-o com a entrada original. HEX e inteiro RGB podem passar por uma conversão de ida e volta sem alteração; porcentagens HSL podem arredondar um canal RGB por um. Mantenha o token de origem se essa distinção for importante.