Texto e código / MULTIVERTO

HSL para cor RGB

Transforme matiz, saturação e luminosidade em canais RGB inteiros.

Conversor interativoSua entrada permanece neste navegador. Nenhum texto é enviado para conversão.

O arquivo permanece no seu navegador.
Encadear ferramentas

Aplique cada ferramenta de texto ao resultado anterior. Fluxos de trabalho com texto ↗

Somente o nome da sequência e a ordem das ferramentas são salvos neste navegador. Sua entrada e seus resultados nunca são salvos.

01 / Exemplo

Exemplo

Sua entradahsl(210, 70%, 50%)
Resultadorgb(38, 128, 217)

02 / Guia

HSL para cor RGB — Como funciona

Construção de canais a partir de HSL

Converta matiz, saturação e luminosidade em canais RGB inteiros. Use essa direção quando um design de cor começa com um matiz e duas porcentagens, mas outra ferramenta requer canais RGB numéricos. Insira hsl(210, 70%, 50%) ou os mesmos valores separados por vírgulas. O matiz varia de zero a 360 graus; saturação e clareza variam de zero a cem por cento.

O matiz escolhe um setor de cor; croma e luminosidade determinam os três canais RGB, arredondados para inteiros. O algoritmo encontra uma croma a partir da saturação e da luminosidade, coloca-a no setor de matiz e, em seguida, adiciona um deslocamento comum para formar vermelho, verde e azul. Ele arredonda canais para inteiros de zero a 255. Uma tonalidade de 360 graus envolve a zero. Uma cor HSL com saturação zero fica cinza, independentemente de sua tonalidade.

Entendendo os modelos de cores

Antes de usar o resultado em software que pede canais inteiros, verifique se as porcentagens de entrada significam saturação e claridade nessa ordem. O resultado não tem canal alfa; essa ferramenta usa RGB inteiro e HSL convencional, não perfis de gerenciamento de cores. Escolha o formulário esperado pelo local onde você vai colar o resultado. CSS aceita notações hexadecimais, rgb() e hsl(), mas um sistema de design ou programa de gráficos pode armazenar canais separadamente. Essa ferramenta usa a aritmética sRGB comum; ela não converte entre perfis de exibição nem prevê como cada monitor reproduzirá uma cor. Nem o HEX de três canais nem essas saídas RGB e HSL incluem transparência. Um código alfa de quatro ou oito dígitos precisa de uma operação separada. Os canais RGB inteiros e os decimais HSL exibidos também podem ser arredondados, portanto, uma viagem de ida e volta pode diferir em um valor de canal.

Escolhendo a representação certa

Na saturação zero, a alteração da tonalidade não pode alterar a saída de cinza; na luminosidade zero, toda tonalidade válida se torna preta. Na luminosidade total, toda tonalidade se torna branca. Essas verificações de ponto final são mais confiáveis do que julgar apenas uma visualização minúscula. Os canais calculados são arredondados para inteiros, portanto, uma passagem posterior de RGB para HSL pode não reproduzir cada decimal das porcentagens originais. Preserve a fonte HSL se você planeja continuar editando a tonalidade ou a saturação em um sistema de design.

Para uma verificação concreta, a entrada de exemplo hsl(210, 70%, 50%) produz rgb(38, 128, 217). 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 circular exatamente; porcentagens HSL podem arredondar um canal RGB por um. Mantenha o token de origem se essa distinção for importante.

Como esta conversão transforma a entrada
Cor HSL
Canais de cor
Cor RGB

Explorar guias

Guias de conversão

Explorar guias