Como converter cores entre HEX, RGB e HSL

HEX, RGB e HSL são três formas de descrever a mesma cor. HEX é o padrão do CSS, RGB permite canais alfa e HSL é mais intuitivo para designers. O Conversor de Cores da NeatForge mostra os três formatos ao mesmo tempo e atualiza cada um instantaneamente.

Três formatos de cor explicados

• HEX — notação compacta com 6 dígitos hexadecimais (ex.: #2563EB). Cada par representa vermelho, verde e azul.
• RGB — três valores de 0 a 255 (ex.: rgb(37, 99, 235)). Suporta canal alfa com rgba().
• HSL — matiz (0–360°), saturação (%) e luminosidade (%) (ex.: hsl(217, 83%, 53%)).

Todos os três descrevem cores no espaço sRGB, então são intercambiáveis.

Quando usar cada um?

• HEX — CSS padrão, design systems, configurações de tema.
• RGB / RGBA — quando você precisa de opacidade (rgba(37, 99, 235, 0.5)).
• HSL / HSLA — construção de paletas, ajuste de luminosidade, design generativo.

O Tailwind CSS e a maioria dos frameworks modernos usam HEX como padrão.

Qual é a diferença entre RGB e HSL?

RGB descreve uma cor pelos seus componentes de luz vermelha, verde e azul. HSL descreve a mesma cor por matiz (ângulo na roda de cores), saturação (intensidade) e luminosidade (claridade).

A vantagem do HSL é intuitiva: para clarear uma cor, basta aumentar a luminosidade sem recalcular os outros canais. Em RGB, clarear exige ajustar três valores simultaneamente.

Como converter cores

1. Abra o Conversor de Cores.
2. Digite um valor HEX, ajuste os controles RGB/HSL ou clique em uma predefinição.
3. Veja a pré-visualização ao vivo da cor.
4. Use Copiar ao lado de HEX, RGB ou HSL para obter uma string pronta para CSS.

A saída sempre usa o formato canônico (#RRGGBB, rgb(r, g, b), hsl(h, s%, l%)), pronto para colar no CSS.

Dicas de CSS: color-mix

CSS moderno suporta color-mix(), que mistura duas cores em qualquer espaço de cor:

.button {
  background: color-mix(in srgb, #2563EB 70%, white);
}

Use HSL com color-mix para criar variações de uma cor de marca sem calcular cada tom manualmente.

Perguntas frequentes

A ferramenta suporta HEX de 3 dígitos? Sim. Digitar #fff é expandido para #FFFFFF. A saída sempre usa o formato de 6 dígitos para máxima compatibilidade.

E se eu digitar um HEX inválido? Os valores RGB e HSL só são atualizados quando o HEX é válido, para você poder experimentar sem perder a cor anterior.

Como copio um valor pronto para CSS? O botão Copiar ao lado de cada formato fornece a string exata (#2563EB, rgb(37, 99, 235) ou hsl(217, 83%, 53%)), pronta para colar no CSS.

→ Converter cores entre HEX, RGB e HSL agora