Formatos de cor explicados: HEX, RGB e HSL
Resposta rápida
HEX (#RRGGBB) e RGB (0—55 por canal) codificam diretamente as intensidades de vermelho, verde e azul. HSL (matiz 0—60°, saturação/claridade 0—00%) codifica as cores de uma forma que corresponda à percepção humana, facilitando a construção de paletas e sombras. Converta entre os três com nosso Conversor de Cores.
Introdução
As cores da Web são especificadas em três formatos dominantes: HEX (base 16 vermelho, verde, azul), RGB (decimal 0—55 por canal) e HSL (matiz, saturação, luminosidade). Todos os três descrevem o mesmo espaço de cores sRGB, mas expõem eixos diferentes: HEX e RGB são orientados a hardware (valores de canal direto), enquanto HSL é orientado a humanos (matiz, saturação e luminosidade intuitivos). O CSS moderno também suporta alfa via HEX8, rgba() e hsla().
Passo a passo
-
Entenda a notação HEX
HEX grava cada canal como um número de base 16 de dois dígitos: #RRGGBB. 00 está desligado, FF (255) é intensidade total. #FF0000 é vermelho puro, #00FF00 verde puro, #0000FF azul puro, #FFFFFF branco, #000000 preto. Uma abreviação de 4 dígitos #RGB se expande para #RRGGBB e #RRGGBBAA adiciona alfa (por exemplo, #FF573380 é 50% alfa).
-
Entenda a notação RGB
RGB usa decimal 0—55 por canal: rgb(255, 87, 51) é igual a #FF5733. A função rgba() adiciona um 0— alfa: rgba(255, 87, 51, 0.5) é 50% opaco. RGB é equivalente a HEX — é apenas decimal em vez de base 16.
-
Entenda a notação HSL
HSL usa matiz (0—60° na roda de cores: 0=vermelho, 120=verde, 240=azul), saturação (0% = cinza, 100% = cor total) e luminosidade (0% = preto, 50% = normal, 100% = branco). hsl(11, 100%, 60%) é um laranja vivo. HSL torna trivial a construção de matizes (aumentar a luminosidade) e sombras (diminuir a luminosidade) do mesmo matiz.
-
Converter entre formatos
HEX→RGB: analisa cada par como base 16. RGB→HEX: converte cada canal para base 16 de 2 dígitos. RGB→HSL: calcula max/min de canais normalizados, luminosidade = (max+min)/2, a saturação depende da luminosidade, matiz é o ângulo do canal dominante. Use nosso Conversor de Cores para fazer tudo isso instantaneamente.
-
Escolha o formato certo para a tarefa
Use HEX para compactação em tokens e ativos de design. Use RGB/rgba() quando precisar interpolar ou animar canais. Use HSL/HSLA ao gerar paletas, sombras ou variações de tema – ajustar a luminosidade em 10% é muito mais fácil do que raciocinar sobre deltas RGB.
Exemplos
Vermelho puro nos três formatos
Entrada: #FF0000
Saída: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Um laranja vivo
Entrada: #FF5733
Saída: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Branco e preto
Entrada: #FFFFFF e #000000
Saída: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Construindo uma sombra em 5 etapas a partir de uma tonalidade HSL
Entrada: hsl(210, 70%, 50%) —varia luminosidade 30/40/50/60/70%
Saída: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — uma paleta azul coerente
Problemas comuns
- Misturando HEX de 3 e 6 dígitos: #F00 e #FF0000 são da mesma cor, mas alguns analisadores aceitam apenas uma forma. Normalize para 6 dígitos no código para evitar surpresas.
- Esquecendo que HSL luminosidade 50% não é 'meio brilho': com 100% de saturação, 50% de luminosidade é a tonalidade pura; acima de 50% tinge-se de branco, abaixo de 50% tinge-se de preto. '50% cinza' é hsl(0, 0%, 50%).
- Confusão do canal alfa: #RRGGBBAA (HEX8) é compatível com navegadores modernos, mas não em navegadores mais antigos; rgba()/hsla() tem suporte mais amplo. Sempre teste o ambiente de destino.
- Incompatibilidade de espaço de cores: HEX, RGB e HSL descrevem sRGB. Se você converter de/para P3 ou Lab/OKLCH (usado por monitores modernos), uma cópia ingênua do canal produzirá cores erradas — use uma biblioteca de cores adequada.
Dicas
- Use HSL ao projetar uma paleta: escolha um matiz e varie a luminosidade (por exemplo, 30/50/70%) e a saturação (por exemplo, 60/80/100%) para gerar tons e matizes coerentes.
- Para acessibilidade, verifique a taxa de contraste em relação ao fundo — WCAG AA requer 4,5:1 para texto normal, AAA 7:1. Use nosso Conversor de Cores para calcular a luminância e o contraste relativos.
- Prefira o moderno CSS color-mix() ou oklch() para uma interpolação perceptualmente uniforme - a interpolação RGB pode passar por tons de cinza turvos ao misturar cores complementares.
- Ao gerar gradientes, converta primeiro os pontos finais para o mesmo formato - misturar HEX e HSL em uma única declaração de gradiente pode produzir pontos médios inesperados.