Guia Completo de Conversão de Cores para CSS: HEX, RGB, HSL e OKLCH

Trabalhar com cores é parte fundamental do desenvolvimento front-end. Mas com tantos formatos disponíveis — HEX, RGB, HSL, OKLCH — pode ser difícil saber qual usar e como converter entre eles. Este guia explica cada formato, suas vantagens e quando preferir um ao outro.

Os formatos de cor do CSS

O CSS suporta diversos formatos de cor. Cada um tem suas vantagens e casos de uso ideais:

| Formato | Sintaxe | Exemplo | |---------|---------|---------| | HEX | #RRGGBB | #2563EB | | RGB | rgb(R, G, B) | rgb(37, 99, 235) | | HSL | hsl(H, S%, L%) | hsl(217, 91%, 53%) | | OKLCH | oklch(L C H) | oklch(0.55 0.22 264) |

HEX — O clássico

O formato hexadecimal é o mais antigo e amplamente utilizado. Cada par de caracteres representa um canal de cor (vermelho, verde, azul) em base 16.

Sintaxe

color: #2563EB;       /* 6 dígitos */
color: #2563EB80;     /* 8 dígitos com alfa (50% opacidade) */
color: #26E;          /* 3 dígitos (shorthand) */

Vantagens

Compacto e fácil de copiar
Universal — funciona em qualquer navegador e ferramenta
Padrão em design tools (Figma, Sketch, Adobe)

Desvantagens

Difícil de "ler" a cor mentalmente
Difícil de ajustar manualmente (clarear/escurecer)
Não intuitivo para criar variações

Quando usar

Quando precisa copiar cores de ferramentas de design
Em tokens de design system como valores canônicos
Quando o espaço é limitado (variáveis CSS, inline styles)

RGB — Vermelho, Verde, Azul

O RGB define cada cor pela quantidade de vermelho (R), verde (G) e azul (B), com valores de 0 a 255.

Sintaxe moderna (CSS nível 4)

/* Sintaxe moderna sem vírgulas */
color: rgb(37 99 235);
color: rgb(37 99 235 / 0.5);  /* com alfa */

/* Sintaxe clássica com vírgulas */
color: rgb(37, 99, 235);
color: rgba(37, 99, 235, 0.5);

Vantagens

Fácil de entender o modelo (mistura de luz)
Amplamente suportado
Útil para manipulação programática

Desvantagens

Não é intuitivo para ajustar luminosidade ou saturação
Difícil de visualizar a cor a partir dos números
Alterar matiz requer mudar múltiplos canais

Quando usar

Ao trabalhar com APIs que retornam valores RGB
Em cálculos programáticos de cor
Quando precisa de transparência com sintaxe clara

HSL — Matiz, Saturação, Luminosidade

O HSL é um modelo mais intuitivo para humanos. Define a cor por sua matiz (hue), saturação (saturation) e luminosidade (lightness).

Sintaxe

color: hsl(217, 91%, 53%);
color: hsl(217 91% 53% / 0.5);  /* com alfa */

Os três eixos

Matiz (H): O "tom" da cor no círculo cromático (0°–360°)
- 0° = vermelho, 120° = verde, 240° = azul
Saturação (S): A intensidade da cor (0% = cinza, 100% = cor pura)
Luminosidade (L): O brilho (0% = preto, 50% = cor pura, 100% = branco)

Vantagens

Intuitivo para ajustes: quer mais escuro? Diminua L. Mais saturado? Aumente S
Fácil de gerar paletas variando apenas um eixo
Ótimo para criar tons e sombras

Desvantagens

Não é perceptualmente uniforme (HSL 50% de luminosidade não parece igualmente brilhante em todas as matizes)
Cores como amarelo parecem muito claras e azul muito escuro com a mesma luminosidade

Quando usar

Em design systems com variações de cor (hover, active, disabled)
Para gerar paletas programaticamente
Quando precisa ajustar rapidamente luminosidade ou saturação

OKLCH — O futuro das cores no CSS

OKLCH é um espaço de cor perceptualmente uniforme introduzido no CSS Color Level 4. "OK" significa que é uma versão corrigida do modelo LCH, e é considerado o futuro da definição de cores no CSS.

Sintaxe

color: oklch(0.55 0.22 264);
color: oklch(0.55 0.22 264 / 0.5);  /* com alfa */

Os três eixos

Luminosidade (L): 0 a 1 (0 = preto, 1 = branco) — perceptualmente uniforme
Croma (C): 0+ (0 = cinza, quanto maior, mais colorido)
Matiz (H): 0° a 360° (semelhante ao HSL, mas no espaço perceptual)

Vantagens

Perceptualmente uniforme: oklch(0.5 ...) sempre parece "meio brilhante", independente da matiz
Transições de cor mais naturais
Paletas mais previsíveis e harmoniosas
Suporte nativo ao gamut P3 (cores mais vivas em displays modernos)

Desvantagens

Suporte mais recente (funciona em Chrome 111+, Firefox 113+, Safari 15.4+)
Valores menos intuitivos à primeira vista
Menos ferramentas de design suportam nativamente

Quando usar

Em projetos modernos com CSS custom properties
Para design systems que precisam de variações de cor consistentes
Quando a qualidade perceptual das transições importa
Para acessar o gamut P3 de displays modernos

Comparação entre formatos

| Critério | HEX | RGB | HSL | OKLCH | |----------|-----|-----|-----|-------| | Legibilidade humana | ⭐ | ⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | | Ajuste de luminosidade | ❌ | ❌ | ✅ | ✅✅ | | Uniformidade perceptual | ❌ | ❌ | ❌ | ✅ | | Suporte em navegadores | ✅✅✅ | ✅✅✅ | ✅✅✅ | ✅✅ | | Uso em design tools | ✅✅✅ | ✅✅ | ✅✅ | ⭐ | | Gamut P3 | ❌ | ❌ | ❌ | ✅ |

Como converter entre formatos

Fórmulas básicas

HEX → RGB:

#2563EB → R: 0x25=37, G: 0x63=99, B: 0xEB=235
Resultado: rgb(37, 99, 235)

RGB → HSL:

Normalize R, G, B para 0–1
Encontre max e min
L = (max + min) / 2
S = diferença / (1 - |2L - 1|)
H = baseado em qual canal é o máximo

HSL → RGB:

Calcule croma: C = (1 - |2L - 1|) × S
Use a matiz para determinar o setor
Distribua C entre os canais R, G, B

Na prática

Em vez de calcular manualmente, use o Color Picker do Toolbox Brasil que converte instantaneamente entre todos os formatos.

Com JavaScript

// HEX para RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

// RGB para HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  // ... (cálculo completo)
}

Melhores práticas para design systems

1. Escolha um formato canônico

Defina o formato padrão do seu projeto e seja consistente:

:root {
  /* Se usar HSL como canônico */
  --color-primary: hsl(217 91% 53%);
  --color-primary-hover: hsl(217 91% 43%);
  --color-primary-light: hsl(217 91% 93%);
}

2. Use custom properties com canais separados

Isso permite ajustes dinâmicos:

:root {
  --primary-h: 217;
  --primary-s: 91%;
  --primary-l: 53%;
  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
}

3. Considere acessibilidade

Verifique contraste com WCAG (mínimo 4.5:1 para texto normal)
Use OKLCH para garantir que variações mantêm contraste consistente
Teste com simuladores de daltonismo

4. Documente suas cores

Mantenha uma referência com todos os formatos:

Primary Blue:
  HEX: #2563EB
  RGB: rgb(37, 99, 235)
  HSL: hsl(217, 91%, 53%)
  OKLCH: oklch(0.55 0.22 264)

Color Picker — Selecione e converta cores entre HEX, RGB, HSL
Hash Generator — Gere hashes de texto
Gerador de QR Code — Crie QR codes personalizados
Diff de Texto — Compare textos e código

Experimente nossa ferramenta

Use gratuitamente o Color Picker do Toolbox Brasil.

Seletor visual de cores intuitivo
Conversão instantânea entre HEX, RGB, HSL e OKLCH
Copie o valor em qualquer formato com um clique
100% no navegador — rápido e privado

Abrir Color Picker →