Conversor HSL para RGB

HSL descreve uma cor pelo matiz na roda, a saturação como o quão vívida a cor é e a luminosidade como o quão perto ela fica do preto ou do branco. Designers e engenheiros front-end costumam escolher cores em HSL porque girar o matiz mantém saturação e luminosidade estáveis; ainda assim, navegadores, canvas, buffers de imagem e a maioria das APIs gráficas precisam, no fim, de canais vermelho, verde e azul em uma escala de zero a duzentos e cinquenta e cinco. Este conversor recebe três números —matiz em graus de zero a trezentos e sessenta, saturação e luminosidade como porcentagens de zero a cem— e devolve canais RGB inteiros, uma string CSS rgb() e um código hex em minúsculas, usando o mesmo caminho de forma fechada que os navegadores aplicam a hsl() em CSS. Matiz fora do intervalo fechado de zero a trezentos e sessenta é rejeitado com um erro de validação claro para que tokens inválidos nunca envolvam em silêncio.

Como o HSL se mapeia para vermelho, verde e azul

O matiz é um ângulo na roda de cores: zero graus é vermelho puro, cento e vinte é verde puro, duzentos e quarenta é azul puro e trezentos e sessenta fecha o círculo de volta ao vermelho. A saturação estica um cinza da luminosidade escolhida em direção à cor plenamente cromática naquele matiz; zero por cento de saturação é sempre cinza, preto ou branco acromático dependendo apenas da luminosidade.

A luminosidade vai do preto a zero por cento, passa pelo tom médio puro perto de cinquenta por cento e chega ao branco a cem por cento. O algoritmo de conversão usado aqui segue o CSS Color Module e a formulação W3C: escala saturação e luminosidade para o intervalo unitário, calcula os limites intermediários de croma p e q a partir de luminosidade e saturação e amostra três posições deslocadas no círculo unitário com o clássico auxiliar hue2rgb para os canais vermelho, verde e azul.

Quando a saturação é zero, os três canais colapsam no mesmo cinza derivado da luminosidade, o que é ao mesmo tempo um atalho de desempenho e um ganho de estabilidade numérica. Cada canal do intervalo unitário é multiplicado por duzentos e cinquenta e cinco e arredondado para o inteiro mais próximo para que o resultado corresponda às expectativas de framebuffers de oito bits e de CSS rgb().

Saturação e luminosidade devem cada uma estar entre zero e cem por cento inclusive, coincidindo com as porcentagens que os designers digitam nas folhas de estilo.

O que você envia e o que recebe de volta

Envie três números finitos nos campos h, s e l. O campo h é o matiz em graus e é obrigatório; deve ficar entre zero e trezentos e sessenta inclusive. Os campos s e l são saturação e luminosidade como porcentagens de zero a cem.

Quando o matiz está fora da faixa legal, a resposta explica que h deve estar entre zero e trezentos e sessenta graus para que o cliente possa limitar ou corrigir o token antes de tentar de novo.

Em caso de sucesso, a resposta ecoa os valores h, s e l limpos, canais inteiros r, g e b cada um de zero a duzentos e cinquenta e cinco, uma string rgb imprimível na forma rgb(R, G, B), uma string hex em minúsculas na forma #rrggbb e uma nota curta de fórmula nomeando o caminho CSS e W3C.

Verificações clássicas incluem vermelho puro com matiz zero, saturação cem e luminosidade cinquenta, gerando duzentos e cinquenta e cinco, zero, zero; cinza médio com qualquer matiz, saturação zero e luminosidade cinquenta, gerando cento e vinte e oito em cada canal; e verdes profundos perto do matiz cento e vinte com alta saturação e luminosidade moderada.

Onde a conversão HSL para RGB aparece no trabalho real

Sistemas de design guardam rampas de marca e tokens semânticos em HSL para que as equipes de produto possam girar o matiz nos temas mantendo degraus de luminosidade amigáveis ao contraste; publicar em propriedades customizadas CSS, cores nativas móveis e estilos de preenchimento de canvas ainda exige RGB e hex confiáveis. Bibliotecas de visualização de dados geram paletas categóricas avançando o matiz com saturação e luminosidade fixas e depois convertem cada passo para RGB em motores SVG, WebGL e de gráficos.

Modelos de e-mail e geradores de PDF costumam aceitar apenas hex ou rgb(), então pipelines de automação de marketing convertem as especificações HSL da marca uma vez e colocam o triplo de canais em cache. Ferramentas de jogos e editores de níveis expõem rodas de matiz aos artistas e precisam despejar RGB inteiro em definições de material e tintas de textura sem APIs exclusivas do navegador.

Fluxos de acessibilidade calculam razões de contraste em RGB ou luminância relativa; partir de HSL para ajustes perceptuais de luminosidade ainda termina nos valores de canal que este conversor fornece. Currículos e aulas de bootcamp ensinam modelos de cor lado a lado e precisam de um único oráculo confiável que combine com a renderização CSS para as chaves das tarefas.

Se mais tarde você precisar de conversão multi-formato entre HEX, LAB e CMYK, a inversa de RGB para HSL ou checagens de contraste WCAG, trate-as como intenções de busca e páginas de destino separadas em vez de sobrecarregar esta página dedicada ao conversor HSL para RGB.