Códigos de cor HTML: hex, RGB, HSL e tabela completa

Em HTML e CSS existem cinco formas de definir uma cor: nome (140 cores prontas), hexadecimal (#RRGGBB), RGB/RGBA, HSL/HSLA e oklch. Hexadecimal é o mais usado em código, RGB aparece quando se precisa de transparência e HSL é o preferido por designers porque deixa o ajuste de tons intuitivo.

A tabela abaixo mostra o vermelho puro nos cinco formatos. São todos equivalentes e o navegador renderiza exatamente a mesma cor:

A escolha do formato depende do contexto, não da cor. Para código limpo, hexadecimal vence. Para overlays e modais, RGBA. Para um sistema de design com variações de tom (claro/escuro), HSL é insubstituível.

Formato hexadecimal: #RRGGBB

Hexadecimal é a notação mais comum em CSS. Começa com # seguida de seis caracteres divididos em três pares: vermelho, verde e azul. Cada par varia de 00 (mínimo) a FF (máximo).

.botao {
  background-color: #FF5733;
  color: #FFFFFF;
}

A forma curta de três dígitos (#F00) é válida e equivale a #FF0000. Funciona quando os três pares têm dígitos repetidos, o navegador duplica cada um automaticamente.

Hexadecimal aceita transparência desde 2018 via oito dígitos (#RRGGBBAA), onde os dois últimos controlam a opacidade de 00 (invisível) a FF (sólido). Suporte amplo em navegadores modernos.

Formato RGB e RGBA

RGB usa três valores de 0 a 255, separados por vírgulas, dentro de rgb(). Cada valor representa a intensidade de vermelho, verde e azul.

.cartao {
  background-color: rgb(255, 87, 51);
  border: 1px solid rgb(0, 0, 0);
}

A versão RGBA adiciona um quarto valor, o canal alfa, que controla a transparência. Vai de 0 (totalmente transparente) a 1 (sólido), aceitando decimais como 0.5 para 50%.

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.botao-hover:hover {
  background-color: rgba(255, 87, 51, 0.9);
}

A sintaxe moderna do CSS Color Level 4 aceita RGB sem vírgulas e com / antes do alfa: rgb(255 87 51 / 0.9). Ambas funcionam em qualquer navegador atual.

RGBA é a escolha certa para overlays, modais escurecidos, hover states e qualquer elemento que precisa deixar o fundo aparecer. Hex com 8 dígitos faz o mesmo, mas RGBA é mais legível porque o alfa fica em decimal.

Formato HSL e HSLA

HSL significa matiz (hue), saturação (saturation) e luminosidade (lightness). Em vez de pensar em quanto vermelho, verde e azul misturar, você pensa em cor + intensidade + claridade, exatamente como o cérebro percebe cor.

:root {
  --primaria: hsl(14, 100%, 60%);
  --primaria-clara: hsl(14, 100%, 75%);
  --primaria-escura: hsl(14, 100%, 45%);
}

Os três valores funcionam assim:

• Matiz (0 a 360°): a cor no círculo cromático. 0° é vermelho, 120° é verde, 240° é azul.
• Saturação (0% a 100%): 0% é cinza, 100% é a cor mais viva.
• Luminosidade (0% a 100%): 0% é preto, 50% é a cor pura, 100% é branco.

Designers preferem HSL porque criar variações de tom é trivial: muda só a luminosidade e a cor inteira do sistema acompanha de forma harmônica. Em hex isso exige recalcular três pares de caracteres; em HSL é um número.

HSLA adiciona o canal alfa exatamente como RGBA: hsla(14, 100%, 60%, 0.5).

Cores nomeadas: as 140 cores prontas do HTML

O HTML tem 140 nomes de cores reconhecidos por todos os navegadores. As mais usadas são as 17 básicas. Para projetos rápidos, protótipos ou para escrever código mais legível, usar o nome é válido.

.aviso { background-color: orange; }
.erro { background-color: crimson; }
.sucesso { background-color: forestgreen; }

A tabela abaixo agrupa as principais por matriz cromática:

Vermelhos e rosas

Laranjas e amarelos

Verdes

Azuis e ciano

Roxos e violetas

Marrons e neutros quentes

Cinzas e neutros

A lista oficial completa das 140 cores nomeadas do CSS está no MDN.

Variáveis CSS para reutilizar cores

A partir do CSS moderno (suporte em qualquer navegador desde 2017), o melhor jeito de organizar cores é criar variáveis no :root. Toda a paleta fica num lugar só e qualquer mudança propaga pelo site inteiro.

:root {
  --cor-primaria: #FF5733;
  --cor-secundaria: #2E86AB;
  --cor-texto: #1A1A1A;
  --cor-fundo: #FFFFFF;
  --cor-borda: #E0E0E0;
}

.botao {
  background-color: var(--cor-primaria);
  color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}

.cartao {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

A vantagem fica óbvia em refatorações: trocar a identidade visual do site inteiro vira mudar cinco linhas no :root. Sem variáveis, seria buscar e substituir cor por cor em todos os arquivos.

Acessibilidade: contraste WCAG mínimo

Cores bonitas em mockup nem sempre são legíveis na tela. A diretriz WCAG 2.1 exige contraste mínimo de 4.5:1 entre texto e fundo para texto normal e 3:1 para texto grande (18px em diante ou 14px em negrito). Falhar nessa regra é causa comum de reprovação em auditorias de acessibilidade.

Combinações problemáticas frequentes:

• Cinza claro (#999999) sobre branco: 2.85:1, falha
• Amarelo (#FFFF00) sobre branco: 1.07:1, ilegível
• Vermelho (#FF0000) sobre fundo escuro: depende do tom escuro, geralmente passa

O WebAIM Contrast Checker calcula a razão de contraste entre duas cores em segundos. Cole hex de texto e fundo, ele retorna se passa nos níveis AA e AAA da WCAG.

/* Texto que passa WCAG AA (4.5:1) */
.legivel {
  color: #1A1A1A;
  background-color: #FFFFFF;
}

/* Texto que FALHA (contraste baixo) */
.ilegivel {
  color: #BBBBBB;
  background-color: #FFFFFF;
}

Dark mode com prefers-color-scheme

O CSS detecta automaticamente se o usuário escolheu tema escuro no sistema operacional e aplica cores diferentes sem precisar de JavaScript. A media query prefers-color-scheme é a base do dark mode moderno.

:root {
  --cor-fundo: #FFFFFF;
  --cor-texto: #1A1A1A;
  --cor-primaria: #FF5733;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #1A1A1A;
    --cor-texto: #F0F0F0;
    --cor-primaria: #FF7A5C;
  }
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

A cor primária no modo escuro foi clareada de propósito. Cores saturadas vibrantes que funcionam no claro tendem a “queimar” no escuro, então a regra é clarear levemente e reduzir saturação para preservar legibilidade.

Formatos modernos: oklch e color-mix

O CSS Color Module Level 4 introduziu o oklch(), um espaço de cor que respeita a percepção humana muito melhor que RGB ou HSL. Já tem suporte amplo nos navegadores em 2026 e é o futuro de design systems profissionais.

.botao {
  background-color: oklch(0.7 0.2 30);
  color: oklch(0.98 0 0);
}

Os três valores em oklch são luminosidade (0 a 1), chroma (0 a ~0.4) e matiz (0 a 360). A vantagem prática: duas cores com a mesma luminosidade em oklch parecem ter brilho equivalente para o olho humano, coisa que RGB e HSL não garantem.

Outra função moderna é color-mix(), que mistura duas cores na proporção desejada sem precisar de pré-processador:

.destaque {
  background-color: color-mix(in oklch, #FF5733 70%, white);
}

Esse código produz uma versão 30% mais clara do vermelho-laranja sem recalcular nada manualmente. Útil para criar variações de tom de uma cor base.

Para uma explicação visual passo a passo de como hexadecimal e RGB funcionam na prática, a aula do
Curso em Vídeo.

Ferramentas para escolher e converter cores

Cinco ferramentas que valem ter no fluxo:

1. Coolors: gera paletas harmônicas com a tecla de espaço. A favorita de designers para começar um projeto do zero.
2. Adobe Color: paleta baseada em teoria cromática (complementar, análoga, triádica). Integração nativa com Adobe Creative Cloud.
3. ColorZilla: extensão de Chrome e Firefox que pega o código hex de qualquer pixel da tela. Indispensável para “roubar” cor de site existente.
4. DevTools do Chrome: botão direito em qualquer elemento, Inspecionar, clique no quadradinho de cor no painel Styles. Abre seletor visual com conversão entre formatos.
5. WebAIM Contrast Checker: testa se o par de cores passa nos critérios WCAG. Obrigatório antes de finalizar paleta.

Para entender como cores se aplicam dentro de um site WordPress completo, como criar um site com WordPress do zero traz o contexto de teoria cromática integrada a temas e Elementor.

Erros comuns ao usar cores em HTML

Cinco enganos que aparecem em quase todo projeto iniciante:

Misturar formatos sem necessidade: usar red em um lugar, #FF0000 em outro e rgb(255,0,0) em um terceiro deixa o CSS confuso. Escolha um formato como padrão (geralmente hex) e use o mesmo em todo o projeto.

Esquecer o canal alfa no RGBA: rgba(0, 0, 0) sem o quarto valor é inválido. Se quer cor sólida, use rgb() sem o A.

Hex de 3 dígitos quando os pares não repetem: #F73 é válido e equivale a #FF7733. Mas #F5733 não é hexadecimal válido. Precisa ter 3, 4, 6 ou 8 dígitos exatos depois do #.

Contraste insuficiente: usar cinza claro #999 em fundo branco parece elegante, mas é ilegível para milhões de usuários com baixa visão. Testar contraste é parte do processo.

Cores hardcoded sem variáveis: espalhar #FF5733 em 30 arquivos significa que mudar a identidade visual vai exigir alterar 30 lugares. Usar var(--cor-primaria) desde o início economiza horas.

Perguntas frequentes

Qual o formato de cor mais usado em HTML?

Hexadecimal (#RRGGBB) é o formato mais usado em código CSS por ser compacto e amplamente suportado desde os primeiros navegadores. RGB e HSL aparecem quando se precisa de transparência (RGBA, HSLA) ou ajuste de tons (HSL). Cores nomeadas como red ou blue são úteis em protótipos rápidos.

Como converter hex para RGB?

Cada par hexadecimal vira um número decimal de 0 a 255. Por exemplo, #FF5733: FF é 255 (vermelho), 57 é 87 (verde), 33 é 51 (azul). Resultado: rgb(255, 87, 51). O DevTools do Chrome faz isso automaticamente ao clicar no quadradinho de cor.

Quantas cores HTML existem?

Existem 140 cores nomeadas reconhecidas pelos navegadores (red, blue, crimson, etc.). Em hex ou RGB, qualquer das 16.777.216 combinações possíveis (256 × 256 × 256) é uma cor válida. Para acessibilidade e design coerente, a maioria dos sites usa uma paleta de 5 a 10 cores.

O que é melhor: HSL ou hex?

Hex é melhor para código limpo e compatibilidade ampla. HSL é melhor para sistemas de design onde se cria variações de tom (claro, escuro, mais saturado) a partir de uma cor base. Times de produto geralmente usam HSL nas variáveis CSS e expõem hex no design system.

Como aplicar cor em texto e fundo HTML?

Em CSS, color define a cor do texto e background-color define a cor de fundo. Exemplo: .bloco { color: #FFFFFF; background-color: #1A1A1A; }. Atributos HTML antigos como bgcolor e color em tags estão obsoletos e não devem ser usados.

O que é o canal alfa em RGBA?

O canal alfa controla a transparência da cor, variando de 0 (totalmente transparente) a 1 (sólido). rgba(0, 0, 0, 0.5) é preto com 50% de transparência, comum em overlays. Decimais funcionam: 0.25, 0.75. Hex de 8 dígitos faz o mesmo: #000000 + 80 = #00000080.

oklch vai substituir hex?

Não no curto prazo. Hex segue como padrão em ferramentas de design (Figma, Photoshop) e na maioria dos códigos legados. oklch ganha espaço em design systems novos por ter melhor uniformidade perceptual, mas conviverá com hex pelos próximos anos.