Conversor de Cores

Designers e programadores lidam o tempo todo com cores em formatos diferentes: HEX para CSS, RGB para código, HSL quando é preciso ajustar tonalidade e luminosidade de forma intuitiva. Esse conversor traduz entre os três formatos em tempo real e mostra uma prévia visual da cor, para conferir se o resultado é mesmo o esperado.

1. Digite um código HEX (como #f4b400), ou preencha os campos de RGB, ou os de HSL.
2. Os outros dois formatos são atualizados automaticamente.
3. A prévia da cor aparece ao lado, atualizada a cada mudança.
4. Use o botão de copiar para levar o valor pronto para o CSS.

Do design para o código. O designer entregou #2E86DE. Em RGB isso é rgb(46, 134, 222); em HSL, hsl(210, 73%, 53%). Os três descrevem exatamente a mesma cor.

Criar variação mais escura para hover. Em HSL basta reduzir a luminosidade: de hsl(210, 73%, 53%) para hsl(210, 73%, 43%). Em HEX isso exigiria recalcular os três canais na mão — é a grande vantagem prática do HSL.

Tom pastel da mesma cor. Diminua a saturação e aumente a luminosidade: hsl(210, 40%, 85%) é uma versão suave do mesmo azul.

Paleta com cores harmônicas. Mantendo saturação e luminosidade e girando só a matiz, saem combinações previsíveis: 210° é o azul original, 330° dá o complementar (rosa), e 90° e 330° formam uma tríade.

Preto, branco e cinza. Em HSL, qualquer cor com saturação 0% é um tom de cinza — o que muda é só a luminosidade: 0% é preto, 50% é cinza médio, 100% é branco.

Cores comuns nos três formatos

RGB descreve uma cor pela quantidade de vermelho, verde e azul (0 a 255 cada). HSL descreve a mesma cor por matiz (0 a 360°), saturação e luminosidade (ambas em porcentagem), o que costuma ser mais intuitivo para criar variações de uma cor — escurecer, clarear ou dessaturar sem perder o tom original. HEX é apenas RGB escrito em base 16, dois dígitos por canal.

A conversão entre RGB e HSL segue as fórmulas padrão do modelo de cor HSL definido no CSS Color Module; não há perda de precisão relevante entre os formatos para uso em design de interface.

Escurecer alterando o HEX no olho. Mudar #2E86DE para #1E76CE parece razoável, mas altera matiz e saturação junto. Para escurecer preservando o tom, mexa só na luminosidade do HSL.

Confundir HSL com HSB/HSV. São modelos diferentes. Em HSL, 100% de luminosidade é sempre branco; em HSB, 100% de brilho com saturação alta dá a cor pura, não branco. Ferramentas de design costumam usar HSB, e CSS usa HSL — trocar um pelo outro gera cores erradas.

Ignorar contraste ao escolher cores. Uma combinação bonita pode ser ilegível. As diretrizes de acessibilidade pedem contraste mínimo de 4,5:1 entre texto e fundo em texto normal. Cor clara sobre cor clara reprova mesmo parecendo aceitável na tela do designer.

Achar que a cor será idêntica em todas as telas. Sem perfil de cor gerenciado, o mesmo HEX aparece diferente em monitores distintos. Para material impresso, o problema é maior ainda: impressão usa CMYK, e nem toda cor RGB tem equivalente exato.

Usar HEX de três dígitos achando que é outra cor. #FFF e #FFFFFF são a mesma coisa: a forma curta simplesmente duplica cada dígito.

Qual a diferença entre RGB e HSL?

RGB descreve a cor pela mistura de luz vermelha, verde e azul. HSL descreve pela matiz (o tom em si), saturação e luminosidade, o que facilita criar variações mais claras ou escuras de uma mesma cor.

Como descobrir o RGB de um código HEX?

Cole o código HEX no campo correspondente; o RGB equivalente aparece automaticamente nos três campos ao lado.

A ferramenta aceita HEX de 3 dígitos, como #fff?

Sim, o formato abreviado de 3 dígitos é expandido automaticamente para o equivalente de 6 dígitos.

Como deixar uma cor mais escura sem mudar o tom?

Use HSL e reduza apenas a luminosidade (o L), mantendo matiz e saturação. Isso preserva o tom original, o que é difícil de conseguir ajustando o HEX manualmente.

Qual a diferença entre HSL e HSB?

Em HSL, luminosidade 100% é sempre branco. Em HSB, brilho 100% com saturação alta dá a cor pura. CSS usa HSL; muitas ferramentas de design usam HSB — trocar um pelo outro gera cores erradas.

O que significa o quarto valor em RGBA?

É o canal alfa, que controla a transparência: 0 é totalmente transparente e 1 é totalmente opaco. Esta ferramenta trabalha com a cor sólida, sem o canal alfa.

Existe conversão exata de RGB para CMYK?

Não. RGB é luz e CMYK é tinta, com faixas de cor diferentes. A conversão sempre é aproximada e depende do perfil de cor e do papel usados na impressão.