🎨
← Voltar aos guias

HEX vs RGB vs HSL: Qual Formato de Cor Você Deve Usar?

· Tags: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL: Qual Formato de Cor Você Deve Usar?

O CSS oferece várias maneiras de definir cores, mas os três formatos mais comuns são HEX, RGB e HSL. Cada formato tem pontos fortes distintos, e saber quando usar cada um pode melhorar drasticamente a capacidade de manutenção da sua folha de estilos e sua capacidade de criar sistemas de cores dinâmicos. Este guia detalha cada formato para que você possa escolher o certo para qualquer situação.

Formato de Cor HEX: O Padrão da Indústria

As cores HEX (hexadecimais) são o formato mais usado no design web. Uma cor hex é escrita como um # seguido por seis dígitos hexadecimais que representam os valores vermelho, verde e azul nessa ordem.

#FF5733
  • #FF — Vermelho (255 em decimal)
  • #57 — Verde (87 em decimal)
  • #33 — Azul (51 em decimal)

Variações de HEX

O HEX suporta várias notações para diferentes necessidades:

/* Hex padrão de seis dígitos */
color: #FF5733;

/* Abreviado — pares idênticos são reduzidos a três dígitos */
color: #F53; /* Expande para #FF5533 */

/* Hex de oito dígitos com canal alfa */
color: #FF573380; /* 50% de opacidade */

HEX abreviado funciona quando cada par usa caracteres correspondentes: #AABBCC vira #ABC. Isso é puramente uma convenção de economia de espaço suportada por todos os navegadores.

HEX de oito dígitos (#RRGGBBAA) adicionou transparência alfa. O valor alfa varia de 00 (totalmente transparente) a FF (totalmente opaco). O suporte de navegadores para hex de 8 dígitos é excelente em todos os navegadores modernos.

Abreviação de quatro dígitos (#RGBA) também existe: #F538 expande para #FF553388.

Quando Usar HEX

  • Copiar e colar de ferramentas de design — Figma, Sketch e Adobe XD geram hex por padrão
  • Cores de marca codificadas — O hex é inequívoco e compacto para valores que nunca mudam
  • Documentação e protótipos — O hex é o formato mais reconhecível entre designers e desenvolvedores
  • Propriedades personalizadas CSS — Armazenar tokens de marca em hex é uma prática comum

Quando Evitar HEX

  • Manipulação programática de cores — Ajustar canais individuais exige análise de strings
  • Criação de sistemas de cores — Gerar variantes mais claras ou mais escuras envolve matemática não trivial
  • Comunicar a intenção da cor — O hex não dá nenhuma informação semântica sobre a cor

Formato de Cor RGB: Controle de Canais

RGB significa Vermelho, Verde, Azul. Em CSS, é escrito como uma função com valores de 0 a 255 ou porcentagens (0% a 100%).

/* Sintaxe legada separada por vírgulas */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Sintaxe moderna separada por espaços */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Valores percentuais */
color: rgb(100% 34% 20%);

Melhorias na Sintaxe RGB Moderna

A especificação CSS Color Level 4 modernizou a função rgb() de duas maneiras importantes:

  1. Valores separados por espaços — As vírgulas não são mais necessárias, tornando a sintaxe mais limpa
  2. Alfa separado por barra — O alias rgba() não é mais necessário; rgb() agora aceita um canal alfa opcional

Tanto a sintaxe legada quanto a moderna são totalmente suportadas, mas a sintaxe moderna é recomendada para código novo.

Quando Usar RGB

  • Canvas e WebGL — As APIs de dados de imagem retornam valores de pixel em RGB
  • Ajustes numéricos de cor — Quando você tem valores de vermelho, verde e azul armazenados como variáveis separadas
  • Tradução de especificações de design — Alguns sistemas de design especificam cores como tripletos RGB
  • Trabalhar com seletores de cor — Muitas interfaces de seletores de cor usam controles deslizantes de 0-255

Quando Evitar RGB

  • Criação de paletas de cores coesas — Ajustar os três canais independentemente torna os ajustes consistentes difíceis
  • Legibilidade humana — rgb(123, 45, 67) não dá nenhuma noção imediata de que cor representa

Formato de Cor HSL: Cores Amigáveis aos Humanos

HSL significa Matiz, Saturação e Luminosidade. Esse formato é mais intuitivo para humanos porque separa a cor em si (matiz) de sua intensidade (saturação) e brilho (luminosidade).

/* Sintaxe legada */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Sintaxe moderna */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Entendendo os Canais HSL

Matiz (0-360) — O ângulo da cor no círculo cromático. É o componente "que cor é essa":

| Valor de Matiz | Cor | |-----------|----------| | 0 ou 360 | Vermelho | | 30 | Laranja | | 60 | Amarelo | | 120 | Verde | | 180 | Ciano | | 240 | Azul | | 300 | Magenta |

Saturação (0-100%) — Quão intensa ou vívida é a cor. 0% produz um tom de cinza; 100% é a versão mais pura da matiz.

Luminosidade (0-100%) — Quão clara ou escura é a cor. 0% é sempre preto, 50% é a versão "normal" da matiz e 100% é sempre branco.

Por que o HSL é Superior para Sistemas de Cores

O HSL torna tarefas difíceis em HEX ou RGB trivialmente simples:

/* Cor principal da marca */
--brand: hsl(220, 80%, 50%);

/* Estado de hover — ligeiramente mais claro */
--brand-hover: hsl(220, 80%, 60%);

/* Estado ativo — ligeiramente mais escuro */
--brand-active: hsl(220, 80%, 40%);

/* Estado desabilitado — dessaturado */
--brand-disabled: hsl(220, 30%, 70%);

/* Tom de fundo — muito claro */
--brand-bg: hsl(220, 40%, 95%);

Com HSL, cada variante é uma mudança de uma variável. Isso é impossível com HEX e trabalhoso com RGB.

Quando Usar HSL

  • Criação de paletas de cores — O HSL é o padrão de fato para geração de tokens de design
  • Temas e modo escuro — Troque os valores de luminosidade para criar variantes de modo escuro
  • Estados de hover e foco — Ajuste a luminosidade em uma porcentagem fixa
  • Ajustes de acessibilidade — Aumente o contraste de luminosidade sem mudar a cor
  • Seletores de cor interativos — Controles deslizantes HSL são mais intuitivos do que controles RGB

Tabela de Comparação Rápida

| Recurso | HEX | RGB | HSL | |---------|-----|-----|-----| | Legibilidade no nível de pixel | Ruim | Moderada | Boa | | Semântica dos canais | Opaca | Numérica | Perceptual | | Ajuste programático | Difícil | Moderado | Fácil | | Transparência alfa | Hex de 8 dígitos | rgb(R G B / A) | hsl(H S% L% / A) | | Suporte de navegadores | Excelente | Excelente | Excelente | | Sintaxe moderna | Não | Sim | Sim | | Padrão de ferramentas de design | Sim | Comum | Raro | | Adequação a sistemas de cores | Ruim | Razoável | Excelente |

Suporte de Navegadores: Todos os Três São Seguros

HEX, RGB e HSL têm suporte idêntico de navegadores. Os três funcionam em todos os navegadores lançados desde o Internet Explorer 9. A sintaxe moderna separada por espaços (rgb(255 0 0 / 0.5)) é suportada em todos os navegadores lançados desde 2020. Não há razão de compatibilidade para escolher um em vez do outro.

Estrutura Prática de Decisão

Escolha seu formato com base no que você está fazendo:

  1. Copiando de um protótipo de design? Use HEX — é o que as ferramentas de design geram.
  2. Construindo um sistema de tokens de design? Use HSL — torna a geração de paletas trivial.
  3. Trabalhando com canvas ou dados de imagem? Use RGB — as APIs de pixel usam RGB nativamente.
  4. Escrevendo uma regra de estilo única? Use HEX — é o mais compacto.
  5. Criando transições de cores dinâmicas? Use HSL — interpolar a matiz cria efeitos de arco-íris; interpolar RGB cria intermediários lamacentos.

Converta Entre Qualquer Formato

Use nosso conversor de cores online gratuito para converter instantaneamente entre HEX, RGB, HSL e outros formatos de cores CSS. Chega de matemática manual ou exploração nos DevTools do navegador.