Formatos de Cor Explicados: Guia de Conversão HEX, RGB, HSL
Cada pixel no seu ecrã é definido por números. Mas a mesma cor pode ser expressa em múltiplos formatos — HEX, RGB, HSL, HSB e mais. Compreender estes formatos e quando utilizar cada um torna-o um programador e designer mais eficaz.
Os Modelos de Cor
RGB (Red, Green, Blue)
O RGB é um modelo de cor aditivo baseado na forma como os ecrãs funcionam. Cada pixel é uma combinação de luz vermelha, verde e azul em intensidades variáveis.
color: rgb(59, 130, 246); /* Solid blue */
color: rgba(59, 130, 246, 0.5); /* 50% transparent blue */
Cada canal varia de 0 (nenhum) a 255 (intensidade máxima):
rgb(0, 0, 0)= Preto (sem luz)rgb(255, 255, 255)= Branco (toda a luz)rgb(255, 0, 0)= Vermelho puro
Quando utilizar RGB: Manipulação programática de cores, operações com canvas, processamento de imagens. O RGB mapeia diretamente para o hardware, tornando os cálculos simples.
HEX (Hexadecimal)
O HEX é simplesmente RGB escrito em notação hexadecimal. Cada par de caracteres representa um canal (00-FF):
color: #3B82F6; /* Same blue as rgb(59, 130, 246) */
color: #3B82F680; /* With 50% alpha (8-digit hex) */
A conversão é direta: 3B = 59, 82 = 130, F6 = 246.
Abreviação: Quando cada par tem dígitos idênticos, pode abreviar: #AABBCC → #ABC
Quando utilizar HEX: Folhas de estilo CSS (formato mais comum), entregas de design, diretrizes de marca. O HEX é compacto e universalmente compreendido.
HSL (Hue, Saturation, Lightness)
O HSL representa as cores como os humanos as percecionam. Em vez de misturar canais de luz, descreve-se a cor pelas suas propriedades:
- Matiz (Hue): O ângulo da cor na roda de cores (0-360°). 0° = vermelho, 120° = verde, 240° = azul
- Saturação: Quão vívida é a cor (0% = cinzento, 100% = cor plena)
- Luminosidade (Lightness): Quão brilhante é a cor (0% = preto, 50% = cor pura, 100% = branco)
color: hsl(217, 91%, 60%); /* Same blue */
color: hsla(217, 91%, 60%, 0.5); /* With alpha */
Quando utilizar HSL: Criar paletas de cores, ajustar cores programaticamente (por exemplo, criar estados de hover ajustando a luminosidade), design de cores acessível. O HSL é o formato mais intuitivo para o raciocínio humano sobre cores.
HSB/HSV (Hue, Saturation, Brightness/Value)
O HSB é semelhante ao HSL mas define o brilho de forma diferente. Com brilho máximo, obtém-se a cor pura; com brilho mínimo, obtém-se preto. Este modelo é utilizado por ferramentas de design como Figma, Sketch e Photoshop.
Diferença principal do HSL: No HSL, luminosidade de 50% dá a cor pura. No HSB, brilho de 100% dá a cor pura. Isto 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 simples. 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 depois calcula a matiz com base no canal dominante, a saturação a partir do intervalo, e a luminosidade a partir da média.
Em vez de implementar estas conversões manualmente, utilize o nosso Conversor de Cores para traduzir instantaneamente entre qualquer formato.
Aplicações Práticas
Criar Paletas de Cores com HSL
O HSL destaca-se na geração de paletas consistentes. Mantenha a matiz constante e varie a saturação e a luminosidade:
:root {
--blue-100: hsl(217, 91%, 95%); /* Lightest */
--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%); /* Darkest */
}
Esta abordagem garante passos percetuais consistentes. Criar uma paleta completa manualmente? O nosso Gerador de Paletas 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% darker */
}
.button:active {
background: hsl(217, 91%, 50%); /* 10% darker */
}
Acessibilidade e Contraste
O WCAG 2.1 exige um rácio de contraste mínimo de 4,5:1 para texto normal e 3:1 para texto grande. O componente de luminosidade no HSL dá-lhe 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 de Cor CSS Modernas
O CSS agora suporta funções poderosas de manipulação de cores:
/* Relative color syntax (CSS Color Level 4) */
.element {
--base: hsl(217 91% 60%);
background: hsl(from var(--base) h s calc(l - 10%));
}
/* oklch - Perceptually uniform color space */
color: oklch(0.7 0.15 250);
O formato oklch está a ganhar adoção porque é percetualmente uniforme — alterações numéricas iguais produzem alterações percecionais iguais, ao contrário do HSL onde uma alteração de 10% na luminosidade parece diferente em diferentes valores de matiz.
FAQ
Qual formato de cor devo utilizar em CSS?
Para a maioria dos projetos, utilize HEX para cores simples e HSL quando precisar de criar variações ou manipular cores programaticamente. O HEX é o formato mais compacto e amplamente reconhecido. O HSL é mais legível ao construir sistemas de cores. O CSS moderno suporta todos os formatos de forma intercambiável.
Qual é a diferença entre HSL e HSB?
O HSL e o HSB utilizam ambos 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 branco apenas através do brilho). O CSS suporta HSL nativamente; o HSB é utilizado principalmente em ferramentas de design como Figma e Photoshop.
Recursos Relacionados
- Conversor de Cores — Converta entre HEX, RGB, HSL e HSB instantaneamente
- Gerador de Paletas de Cores — Gere paletas de cores harmoniosas
- Guia de Gradientes CSS — Crie gradientes bonitos com CSS