Conversor de HSL para RGB

O que esta página faz

Fornece um valor de cor no modelo HSL — matiz em graus (0–360), saturação e luminosidade em percentagem — e a ferramenta mostra instantaneamente os valores equivalentes nos modelos RGB (0–255), HEX, HSV, CMYK e LAB. O resultado principal é a passagem de um modelo construído para o raciocínio humano sobre cor (onde alterar a luminosidade mantém o matiz intacto) para os números exactos que um ecrã utiliza para emitir luz. O utilizador não precisa de fazer cálculos manuais nem de decorar fórmulas de conversão.

O que torna esta página diferente de outras conversões de cor

A diferença fundamental está no par HSL–RGB e na forma como estes modelos se relacionam com a percepção humana e com o hardware de exibição. O HSL é deliberadamente desenhado para ser usado por pessoas: a matiz corresponde à ideia intuitiva de «tom» (vermelho, azul, amarelo), a saturação controla a intensidade cromática e a luminosidade determina o quão claro ou escuro o tom parece. Alterar apenas a luminosidade no HSL preserva exactamente o mesmo matiz, o que torna este modelo a base da geração de paletas e temas em ferramentas de design.

O RGB, por outro lado, é o espaço de trabalho da matemática da cor nos ecrãs. Cada canal (vermelho, verde, azul) varia de 0 a 255 e representa a intensidade de emissão de luz de cada subpixel. Não há qualquer intuição humana directa: aumentar o valor de vermelho para 200 enquanto se mantém o verde e o azul em 50 produz uma cor alaranjada, mas a relação entre os números e a percepção não é linear.

A conversão de HSL para RGB é sem perdas: todos os valores válidos de HSL mapeiam para um único trio RGB dentro da gama exibível (0–255). Ao contrário de conversões a partir de modelos como LAB ou CMYK para RGB, não ocorre nenhum clipping fora de gama — não há cores que, ao serem convertidas, precisem de ser truncadas ou deslocadas. Isto significa que, se converter de HSL para RGB e depois de RGB para HSL, volta exactamente ao valor original. É uma transformação bijectiva dentro da gama de cores sRGB.

Como funciona a conversão (o método subjacente)

A conversão de HSL para RGB segue a norma sRGB e pode ser resumida em três passos. Primeiro, a matiz (em graus) é convertida para um valor no intervalo [0, 6) que representa a posição num hexágono de cor. Depois, a saturação e a luminosidade (percentagens convertidas para 0..1) são usadas para calcular uma crominância intermédia. Finalmente, essa crominância é decomposta nos três canais RGB com base no sector do hexágono onde a matiz se encontra.

Tomemos o exemplo do painel: matiz 243°, saturação 75%, luminosidade 59%. Internamente, a saturação e luminosidade são divididas por 100 (0,75 e 0,59). A partir daí calcula-se o valor da função auxiliar C = (1 - |2L - 1|) * S, que neste caso dá aproximadamente 0,4425. O X = C * (1 - |(H' mod 2) - 1|) com H' = 243/60 = 4,05 conduz a X ≈ 0,136. Sem arredondamentos intermédios, os valores RGB normalizados são (0,31, 0,274, 0,898). Multiplicando por 255 e arredondando obtém-se o trio (79, 70, 229) — exactamente o que o visor apresenta.

Não há necessidade de recorrer a tabelas de consulta ou aproximações. O algoritmo é determinístico e implementado directamente em JavaScript no navegador do utilizador. Todos os cálculos são feitos localmente; nenhum valor introduzido é enviado para servidores.

Entradas e saídas

A página aceita uma única entrada principal: o valor HSL no formato matiz, saturação%, luminosidade%, por exemplo 243, 75%, 59%. A saturação e a luminosidade podem ser escritas com ou sem o símbolo % — o processador reconhece ambos, desde que o número seja compreendido entre 0 e 100.

Assim que o valor é introduzido, todos os campos seguintes são actualizados instantaneamente:

O campo HSL é editável; alterá-lo desencadeia a actualização de todos os outros. O utilizador pode também editar qualquer um dos outros campos? A página está desenhada para partir sempre do HSL; editar o valor de saída não é suportado directamente, pois isso quebraria a direcção da conversão.

Regras e casos extremos

Se o valor HSL for introduzido num formato incorrecto — letras onde se esperam números, matiz fora de 0–360, saturação ou luminosidade fora de 0–100, ou simplesmente vírgulas mal colocadas — a ferramenta apresenta a mensagem de erro: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.» A mensagem está em inglês por ser a língua padrão da interface, mas o significado é claro: o utilizador deve fornecer a matiz em graus (0–360) seguida de duas percentagens.

Um ponto importante: o valor CMYK mostrado é uma estimativa para ecrã. A conversão de RGB para CMYK depende de perfis de cor de impressora, do tipo de papel e da tinta, e da calibração do monitor. O algoritmo usado aqui assume um perfil genérico (sRGB para CMYK sem separação de negros). Os valores produzidos podem diferir significativamente dos que um profissional de impressão obteria ao usar perfis ICC específicos. Nunca utilize estes números directamente para definir cores num trabalho de impressão sem os validar com o perfil da gráfica.

Outro caso extremo: a saturação a 0% produz uma cor cinzenta independentemente da matiz. A luminosidade a 0% dá preto absoluto (RGB 0,0,0), e a luminosidade a 100% dá branco (RGB 255,255,255). A conversão lida correctamente com estes limites sem produzir valores fora da gama.

Quem precisa desta ferramenta

Designers que constroem paletas de cores ou temas no espaço HSL (por exemplo, no Figma ou no Adobe Color) e precisam de obter os valores RGB para usar em código CSS, SVG, ou em bibliotecas JavaScript. O HSL é o modelo preferido para criar variações harmónicas — manter a matiz fixa e variar saturação e luminosidade gera famílias de cores coerentes. Ao passar para RGB, o designer consegue escrever rgb(79, 70, 229) directamente no ficheiro de estilos.

Programadores front‑end que recebem especificações de cor no formato HSL e precisam de as converter para RGB para usar em canvas, WebGL, ou para manipulações algorítmicas de cor. Muitas APIs do navegador (como ctx.fillStyle) aceitam strings RGB mas não HSL. Ter uma ferramenta que mostra instantaneamente os três números exactos evita erros de arredondamento manual.

Qualquer pessoa que prefira raciocinar sobre cor em termos humanos — «um azul médio, bastante saturado, com luminosidade a meio» — e precise dos números que o ecrã entende. Estudantes de design, de artes gráficas, ou de ciências da computação que estejam a aprender a diferença entre modelos de cor também beneficiam.

FAQ

A ferramenta funciona offline?
Sim. Todo o código JavaScript que realiza a conversão está incluído na página. Depois de carregada, não há necessidade de ligação à Internet para fazer qualquer conversão.

Posso introduzir valores HSL com vírgula ou com ponto decimal?
A matiz deve ser um número inteiro ou decimal (aceita-se 243.5). A saturação e a luminosidade devem ser números inteiros entre 0 e 100. O separador esperado é a vírgula seguida de espaço: 243, 75%, 59%. Pode omitir o símbolo %, mas recomenda-se usá‑lo para legibilidade.

Porque é que o valor CMYK difere do que vejo no Photoshop?
O Photoshop e outras ferramentas profissionais usam perfis ICC específicos para converter RGB em CMYK, que dependem da impressora e do papel. Esta página usa uma conversão simplificada (sem separação de negros nem compensação de ponto de ganho). Os valores obtidos aqui devem ser considerados como uma aproximação de referência, nunca como valores finais para impressão.

O que acontece se eu introduzir matiz 360?
A matiz 360° é equivalente a 0°. A ferramenta normaliza o valor para o intervalo [0, 360) e o resultado será o vermelho puro (RGB 255,0,0) se a saturação e luminosidade estiverem a 100% e 50%, respectivamente. O mesmo se aplica a valores superiores a 360 — são interpretados módulo 360. Por exemplo, 540° é tratado como 180° (ciano).

Posso converter de RGB para HSL com esta página?
Não directamente. A página está desenhada exclusivamente para conversão de HSL para RGB (e modelos derivados). Para o sentido contrário, existe outra ferramenta no mesmo sítio (RGB‑to‑HSL). A conversão não é simétrica na interface, embora o algoritmo seja reversível.

O resultado é o mesmo em todos os navegadores?
Sim, desde que cumpram o standard ECMAScript para JavaScript. O cálculo utiliza apenas aritmética básica e funções trigonométricas (seno/cosseno) que são idênticas em todas as implementações modernas. Não depende de aceleração gráfica nem de perfis de cor do monitor.