Guia de conversão de formatos de cor: HEX, RGB, HSL, OKLCH completamente cobertos

Visão geral dos formatos de cor

Formatos de cor comuns no desenvolvimento web:

Formato	Exemplo	Características
HEX	`#FF6B35`	Mais comum, compacto
RGB	`rgb(255, 107, 53)`	Intuitivo, valores de canal 0-255
HSL	`hsl(16, 100%, 60%)`	Matiz/Saturação/Luminosidade, intuitivo para ajustes
OKLCH	`oklch(0.68 0.17 37)`	Perceptualmente uniforme, recomendado no CSS moderno

Diferentes formatos representam a mesma cor — apenas diferentes sistemas de coordenadas.

Formato HEX explicado

HEX usa hexadecimal para representar os três canais RGB:

#FF6B35
 ↑ ↑ ↑
 R G B  → Cada canal 00-FF (0-255)

Abreviatura de 3 dígitos: #F63 equivale a #FF6633
Abreviatura de 4 dígitos com alfa: #F63A equivale a #FF6633AA
Completo de 8 dígitos com alfa: #FF6B3580 (80 = 50% opacidade)

RGB e canal alfa

RGB mapeia diretamente as cores primárias de exibição:

rgb(255, 107, 53)          /* opaco */
rgba(255, 107, 53, 0.5)    /* 50% transparente */
rgb(255 107 53 / 50%)      /* sintaxe moderna */

Canal alfa: 1 = totalmente opaco, 0 = totalmente transparente. O CSS moderno prefere rgb() com valores separados por espaços e / para transparência.

HSL: Ajuste de cor intuitivo

HSL decompõe a cor em matiz, saturação e luminosidade:

Parâmetro	Intervalo	Significado
H (Matiz)	0-360°	Ângulo da roda de cores: 0=vermelho, 120=verde, 240=azul
S (Saturação)	0-100%	0%=cinza, 100%=cor pura
L (Luminosidade)	0-100%	0%=preto, 50%=cor pura, 100%=branco

Dicas de ajuste:

Mesmo matiz, tons diferentes? Fixe H e S, ajuste L
Tom mais suave? Reduza S
Cor complementar? H ± 180°

OKLCH: O padrão perceptualmente uniforme

OKLCH é um espaço de cor introduzido no CSS Color Level 4, modelado na percepção humana:

Vantagem	Descrição
Perceptualmente uniforme	Mudança de brilho de 0,5→0,6 parece a mesma que 0,7→0,8
Gama mais ampla	Suporta P3 e outras telas de gama ampla
Ajustes previsíveis	L fixo com C/H variável mantém a luminosidade visual constante

oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → Luminosidade/Croma/Matiz

O L=50% do HSL varia muito em brilho visual entre os matizes. O OKLCH corrige isso.

Usando a ferramenta de conversão de cor

Passo 1: Abrir a ferramenta

Visite a ferramenta de conversão de cor e insira uma cor em qualquer formato.

Passo 2: Selecionar formato de entrada

Insira uma cor no campo de entrada. Formatos suportados:

HEX: #FF6B35
RGB: 255, 107, 53
HSL: 16, 100%, 60%
OKLCH: 0.68, 0.17, 37

Passo 3: Ver resultados da conversão

A ferramenta exibe automaticamente todas as conversões de formato. Copie qualquer resultado diretamente.

Passo 4: Ajustar canal alfa

Marque "Incluir transparência" e insira um valor alfa (0-1). Os resultados incluirão o canal alfa.

CSS color-mix() na prática

OKLCH combinado com color-mix() permite misturas de cor precisas:

/* Misturar no espaço OKLCH — perceptualmente uniforme */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* Misturar 30% da cor de destaque */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

Use o verificador de contraste para verificar se a cor misturada atende aos requisitos de contraste com o texto.

Formatos de cor em gradientes

Ao usar o gerador de gradientes, o formato OKLCH é recomendado:

/* Transições de gradiente OKLCH são mais uniformes */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

Gradientes tradicionais RGB/HSL podem produzir pontos médios sem brilho ao redor da roda de cores. O OKLCH evita isso.

Problemas comuns

Problema	Causa	Solução
Resultado HEX para RGB incorreto	Abreviatura não expandida	Expandir para HEX de 6 dígitos primeiro
Mudança de cor HSL para HEX	Perda de precisão de ponto flutuante	Usar a ferramenta para conversão precisa
OKLCH não suportado	Navegador antigo	Usar fallback CSS ou plugin PostCSS
Exibição do valor alfa incorreta	Porcentagem e decimal misturados	Usar decimal 0-1 ou 0%-100% consistentemente

Resumo

Dominar os formatos HEX, RGB, HSL e OKLCH e suas conversões é uma habilidade fundamental para o desenvolvimento frontend e design. A uniformidade perceptual do OKLCH o torna a melhor escolha para o CSS moderno. A ferramenta de conversão de cor gerencia todas as conversões de formato em um clique, enquanto o verificador de contraste e o gerador de gradientes completam seu fluxo de trabalho de cor.