Guia de conversão HEX, RGB, HSL para equipes de produto

Guia de Conversão HEX, RGB, HSL para Equipes de Produto

Os designers passam códigos HEX no Figma. Os engenheiros escrevem RGB no código. HSL é o que você realmente deseja para manipulação de cores programática. Aqui está como os três formatos se relacionam e quando usar cada um.

Os Três Formatos

HEX -- #FF5733

Dois dígitos hexadecimais por canal: #RRGGBB. Cada par é 00-FF (0-255 em decimal). O padrão da web desde os anos 1990. Compacto, universalmente suportado, mas opaco à leitura humana.

RGB -- rgb(255, 87, 51)

Três valores decimais, 0-255 por canal. O que o CSS rgb() usa. Um pouco mais legível do que HEX, mas ainda difícil de ajustar mentalmente ("faça 20% mais claro" não é óbvio em RGB).

HSL -- hsl(11, 100%, 60%)

Tono (0-360 graus na roda de cores), Saturação (0-100%), Claridade (0-100%). Projetado para humanos: você pode raciocinar sobre relações de cores diretamente.

Quando Usar Cada Um

Por que HSL Vence para Sistemas de Tema

Com HSL, a manipulação de cores é aritmética:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% de claridade */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% de claridade */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* dessaturado */
}

Altere --hue para 210 e toda a paleta muda de laranja para azul. Tente isso com HEX.

Iluminar: aumentar L. 60% → 80% = mais claro.

Escurecer: diminuir L. 60% → 40% = mais escuro.

Dessaturar: diminuir S. 100% → 40% = mais suave.

Cor complementar: adicionar 180 a H. 11 → 191.

Folha de Consulta de Conversão

HEX → RGB: Divida em pares, converta hex para decimal.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (simplificado):

Não memorize fórmulas. Use a Ferramenta de Seleção de Cores para converter entre todos os três formatos instantaneamente.

CSS Moderno: oklch()

O CSS Nível 4 introduziu oklch() -- claridade uniformemente perceptual. Ao contrário do HSL, valores iguais de L realmente parecem igualmente brilhantes em todos os tons. Se você está começando um novo sistema de design em 2025+, considere oklch() ao lado do HSL.

Relacionado