Formatos de Cor Explicados: Guia de Conversão HEX, RGB, HSL

Cada pixel na sua tela é definido por números. Mas a mesma cor pode ser expressa em múltiplos formatos — HEX, RGB, HSL, HSB e outros. Entender esses formatos e quando usar cada um torna você um desenvolvedor e designer mais eficiente.

Os Modelos de Cor

RGB (Vermelho, Verde, Azul)

RGB é um modelo de cor aditivo baseado em como as telas funcionam. Cada pixel é uma combinação de luz vermelha, verde e azul em intensidades variadas.

color: rgb(59, 130, 246);       /* Azul sólido */
color: rgba(59, 130, 246, 0.5); /* Azul 50% transparente */

Cada canal varia de 0 (nenhum) a 255 (intensidade máxima):

rgb(0, 0, 0) = Preto (sem luz)
rgb(255, 255, 255) = Branco (toda luz)
rgb(255, 0, 0) = Vermelho puro

Quando usar RGB: Manipulação programática de cores, operações com canvas, processamento de imagens. RGB mapeia diretamente para o hardware, tornando os cálculos diretos.

HEX (Hexadecimal)

HEX é simplesmente RGB escrito em notação hexadecimal. Cada par de caracteres representa um canal (00-FF):

color: #3B82F6;   /* Mesmo azul que rgb(59, 130, 246) */
color: #3B82F680; /* Com 50% de alfa (hex de 8 dígitos) */

A conversão é direta: 3B = 59, 82 = 130, F6 = 246.

Abreviação: Quando cada par tem dígitos idênticos, você pode abreviar: #AABBCC → #ABC

Quando usar HEX: Folhas de estilo CSS (formato mais comum), handoffs de design, diretrizes de marca. HEX é compacto e universalmente entendido.

HSL (Matiz, Saturação, Luminosidade)

HSL representa cores como humanos as percebem. Em vez de misturar canais de luz, você descreve a cor por suas propriedades:

Matiz: O ângulo da cor na roda cromática (0-360°). 0° = vermelho, 120° = verde, 240° = azul
Saturação: Quão vívida a cor é (0% = cinza, 100% = cor plena)
Luminosidade: Quão brilhante a cor é (0% = preto, 50% = cor pura, 100% = branco)

color: hsl(217, 91%, 60%);       /* Mesmo azul */
color: hsla(217, 91%, 60%, 0.5); /* Com alfa */

Quando usar HSL: Criar paletas de cores, ajustar cores programaticamente (ex.: criar estados de hover ajustando a luminosidade), design de cores acessíveis. HSL é o formato mais intuitivo para raciocínio humano sobre cores.

HSB/HSV (Matiz, Saturação, Brilho/Valor)

HSB é similar ao HSL, mas define o brilho de forma diferente. No brilho máximo, você obtém a cor pura; no mínimo, obtém preto. Este modelo é usado por ferramentas de design como Figma, Sketch e Photoshop.

Diferença principal do HSL: No HSL, luminosidade 50% dá a cor pura. No HSB, brilho 100% dá a cor pura. Isso torna o HSB mais intuitivo para algumas tarefas, mas menos útil em CSS (que não suporta HSB nativamente).

Conversão Entre Formatos

Converter entre formatos envolve matemática direta. Aqui estão as relações principais:

HEX para RGB

Divida a string hex em pares e converta cada um para decimal:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB para HSL

O algoritmo normaliza os valores RGB para 0-1, encontra os canais máximo e mínimo, e então calcula a matiz baseada em qual canal é dominante, a saturação a partir da faixa, e a luminosidade a partir da média.

Em vez de implementar essas conversões manualmente, use nosso Conversor de Cores para traduzir instantaneamente entre qualquer formato.

Aplicações Práticas

Construindo Paletas de Cores com HSL

HSL se destaca na geração de paletas consistentes. Mantenha a matiz constante e varie saturação e luminosidade:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Mais claro */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Mais escuro */
}

Esta abordagem garante passos perceptualmente consistentes. Criando uma paleta completa manualmente? Nosso Gerador de Paleta de Cores automatiza este processo.

Estados de Hover e Foco

Com HSL, criar estados interativos é trivial:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% mais escuro */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% mais escuro */
}

Acessibilidade e Contraste

O WCAG 2.1 exige uma razão de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande. O componente de luminosidade no HSL oferece uma forma intuitiva de garantir contraste suficiente:

Fundos claros (luminosidade > 90%) combinam bem com texto escuro (luminosidade < 30%)
Fundos escuros (luminosidade < 20%) combinam bem com texto claro (luminosidade > 80%)

Funções Modernas de Cor em CSS

CSS agora suporta funções poderosas de manipulação de cores:

/* Sintaxe de cor relativa (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Espaço de cor perceptualmente uniforme */
color: oklch(0.7 0.15 250);

O formato oklch está ganhando adoção porque é perceptualmente uniforme — mudanças numéricas iguais produzem mudanças percebidas iguais, ao contrário do HSL onde uma mudança de 10% na luminosidade parece diferente em diferentes valores de matiz.

FAQ

Qual formato de cor devo usar em CSS?

Para a maioria dos projetos, use HEX para cores simples e HSL quando precisar criar variações ou manipular cores programaticamente. HEX é o formato mais compacto e amplamente reconhecido. HSL é mais legível ao construir sistemas de cores. CSS moderno suporta todos os formatos de forma intercambiável.

Qual a diferença entre HSL e HSB?

HSL e HSB usam matiz e saturação, mas definem o brilho de forma diferente. No HSL, luminosidade 0% é preto, 50% é a cor pura e 100% é branco. No HSB, brilho 0% é preto e 100% é a cor pura (sem caminho para o branco apenas pelo brilho). CSS suporta HSL nativamente; HSB é usado principalmente em ferramentas de design como Figma e Photoshop.

Recursos Relacionados

Conversor de Cores — Converta entre HEX, RGB, HSL e HSB instantaneamente
Gerador de Paleta de Cores — Gere paletas de cores harmoniosas
Guia de Gradientes CSS — Crie gradientes bonitos com CSS