Lição 20 de 50

Nomes de Cores no HTML: Tabela W3C e Guia | Web Academy

No desenvolvimento web moderno, além de definir tonalidades por códigos hexadecimais ou modelos RGB e HSL, o HTML e o CSS oferecem suporte nativo a 140 nomes de cores padronizados pelo W3C. Conhecidas formalmente como color keywords, essas palavras-chave permitem aplicar estilos visuais imediatos, acelerar a prototipagem de interfaces e manter a legibilidade do código sem a necessidade de recorrer a tabelas externas de conversão.

📑 Índice do Conteúdo

1. A Evolução dos Nomes de Cores: Do Padrão VGA às 140 Cores Modernas

A história das cores na web remonta aos primeiros monitores coloridos capazes de exibir o padrão VGA de 16 cores. Com a evolução dos navegadores na década de 1990, o sistema de janelas gráficas X11 utilizado em estações Unix introduziu uma lista extensa de nomes poéticos e funcionais para cores (como dodgerblue, papayawhip e goldenrod).

Posteriormente, o consórcio W3C incorporou essa lista de forma oficial nas especificações do SVG e do CSS3, garantindo que qualquer navegador moderno renderize exatamente o mesmo valor cromático em qualquer dispositivo, computador ou smartphone.

💡

Case-Insensitive por Natureza: Todos os nomes de cores no HTML e CSS são insensíveis a maiúsculas e minúsculas. Escrever red, Red ou RED produzirá exatamente o mesmo tom de vermelho (#FF0000). No entanto, a convenção universal de Clean Code recomenda utilizar sempre caracteres minúsculos.

2. As 16 Cores Básicas Originais do Padrão HTML 4

As 16 cores fundamentais do padrão clássico continuam sendo a base de qualquer folha de estilo e são suportadas universalmente até nos clientes de e-mail mais antigos:

Nome da Cor	Código HEX	Valores RGB	Finalidade & Uso Típico
`black`	`#000000`	`rgb(0, 0, 0)`	Textos de alto contraste e fundos neutros.
`white`	`#FFFFFF`	`rgb(255, 255, 255)`	Fundos padrão, cartões limpos e textos em Dark Mode.
`gray`	`#808080`	`rgb(128, 128, 128)`	Bordas secundárias, placeholders e estados inativos.
`silver`	`#C0C0C0`	`rgb(192, 192, 192)`	Linhas divisórias e divisores de conteúdo.
`red`	`#FF0000`	`rgb(255, 0, 0)`	Mensagens de erro crítico e botões de exclusão.
`lime`	`#00FF00`	`rgb(0, 255, 0)`	Verde puro fluorescente para testes e terminais.
`green`	`#008000`	`rgb(0, 128, 0)`	Confirmações de sucesso e alertas positivos.
`blue`	`#0000FF`	`rgb(0, 0, 255)`	Cor nativa histórica dos links e hipertextos.
`navy`	`#000080`	`rgb(0, 0, 128)`	Cabeçalhos corporativos e barras de navegação formais.
`yellow`	`#FFFF00`	`rgb(255, 255, 0)`	Destaques textuais e alertas de atenção.
`maroon`	`#800000`	`rgb(128, 0, 0)`	Vinho escuro para selos e bordas de destaque.
`purple`	`#800080`	`rgb(128, 0, 128)`	Cor nativa histórica de links já visitados.
`fuchsia`	`#FF00FF`	`rgb(255, 0, 255)`	Rosa vibrante (sinônimo exato de `magenta`).
`aqua`	`#00FFFF`	`rgb(0, 255, 255)`	Ciano puro (sinônimo exato de `cyan`).
`teal`	`#008080`	`rgb(0, 128, 128)`	Azul petróleo moderno para designs sofisticados.
`olive`	`#808000`	`rgb(128, 128, 0)`	Verde oliva sóbrio para paletas terrosas.

3. Tabela das Cores W3C Mais Populares no Design Moderno

Dentre as 140 palavras-chave padronizadas, alguns nomes se destacam no desenvolvimento front-end por oferecerem tons equilibrados e harmoniosos, sendo amplamente adotados em componentes e bibliotecas de estilo:

Color Keyword	HEX	Contexto de Uso Recomendado
`rebeccapurple`	`#663399`	Adicionada ao CSS em homenagem à filha de Eric Meyer. Excelente tom de roxo nobre para temas elegantes.
`dodgerblue`	`#1E90FF`	Azul elétrico vivo, muito utilizado em botões principais de Call to Action (CTA) e barras ativas.
`tomato`	`#FF6347`	Vermelho alaranjado quente, menos agressivo aos olhos do que o `red` puro para avisos e badges.
`coral`	`#FF7F50`	Excelente para interfaces descontraídas, etiquetas de produtos e banners promocionais.
`seagreen`	`#2E8B57`	Verde elegante e natural, ideal para finanças sustentáveis, saúde e badges de status aprovado.
`slateblue`	`#6A5ACD`	Azul acinzentado perfeito para cartões de produtos digitais e sombras sutis.
`darkslategray`	`#2F4F4F`	Cinza ardósia escuro com toque esverdeado; substitui o preto puro com maestria no Dark Mode.
`gold`	`#FFD700`	Dourado clássico para estrelas de avaliação, planos premium e medalhas de destaque.
`gainsboro`	`#DCDCDC`	Cinza muito claro e suave, ideal para contornos de inputs, cards neutros e fundos alternados.
`crimson`	`#DC143C`	Rubi intenso para notificações de perigo, corações de favoritos e etiquetas urgentes.

4. Palavras-Chave Especiais: transparent e currentColor

Além dos 140 nomes cromáticos, o W3C padronizou duas palavras-chave dinâmicas indispensáveis para o design responsivo moderno:

A Palavra-Chave `transparent`

Representa uma cor totalmente invisível (alfa igual a 0). É equivalente a rgba(0, 0, 0, 0). É amplamente usada para remover fundos nativos de botões ou criar bordas transparentes que mudam de cor no hover sem causar deslocamento de layout (layout shift):

CSS3 — Uso de transparent para evitar Layout Shifts
botao-hover.css

CSS 12 linhas

.btn-outline {
    background-color: transparent;
    border: 2px solid transparent;
    color: dodgerblue;
    padding: 10px 20px;
    transition: all 0.2s ease;
}
 
.btn-outline:hover {
    border-color: dodgerblue;
    background-color: aliceblue;
}

.btn-outline {
background-color: transparent;
border: 2px solid transparent;
color: dodgerblue;
padding: 10px 20px;
transition: all 0.2s ease;
}
.btn-outline:hover {
border-color: dodgerblue;
background-color: aliceblue;
}

A Palavra-Chave `currentColor`

O valor currentColor herda dinamicamente o valor da propriedade color aplicada ao elemento atual ou ao seu elemento pai mais próximo. É especialmente poderoso para ícones SVG embutidos e bordas automáticas:

CSS3 — Sincronização Dinâmica com currentColor
icone-dinamico.css

CSS 9 linhas

.alerta-caixa {
    color: darkred;
    border: 2px solid currentColor; /* A borda assume exatamente o tom darkred */
    padding: 16px;
}
 
.alerta-caixa svg {
    fill: currentColor; /* O ícone SVG preenche com a mesma cor do texto */
}

.alerta-caixa {
color: darkred;
border: 2px solid currentColor; /* A borda assume exatamente o tom darkred */
padding: 16px;
}
.alerta-caixa svg {
fill: currentColor; /* O ícone SVG preenche com a mesma cor do texto */
}

5. Exemplo Prático: Criando Cartões de Interface com Color Keywords

O exemplo a seguir demonstra a montagem de um painel de status de serviços online utilizando apenas nomes de cores nativas do W3C no HTML e CSS:

HTML5 + CSS3 — Painel de Notificações com Cores W3C
painel-status.html

HTML 84 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Painel de Notificações W3C</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: whitesmoke;
            padding: 30px;
            color: darkslategray;
        }
 
        .grid-notificacoes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }
 
        .card-status {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border-top: 5px solid gray;
        }
 
        .card-sucesso { border-top-color: seagreen; }
        .card-atencao { border-top-color: darkorange; }
        .card-perigo  { border-top-color: crimson; }
        .card-info    { border-top-color: dodgerblue; }
 
        .card-status h3 {
            margin: 0 0 8px;
            font-size: 16px;
        }
 
        .badge-status {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }
 
        .card-sucesso .badge-status { background-color: honeydew; color: seagreen; }
        .card-atencao .badge-status { background-color: cornsilk; color: darkorange; }
        .card-perigo .badge-status  { background-color: mistyrose; color: crimson; }
        .card-info .badge-status    { background-color: aliceblue; color: dodgerblue; }
    </style>
</head>
<body>
 
    <div class="grid-notificacoes">
        <div class="card-status card-sucesso">
            <span class="badge-status">Operacional</span>
            <h3>Servidor Principal</h3>
            <p>Todos os serviços operando normalmente com 100% de disponibilidade.</p>
        </div>
 
        <div class="card-status card-atencao">
            <span class="badge-status">Alerta de Uso</span>
            <h3>Memória do Servidor</h3>
            <p>Uso de memória atingiu 82% nas últimas 2 horas de pico.</p>
        </div>
 
        <div class="card-status card-perigo">
            <span class="badge-status">Falha Crítica</span>
            <h3>Envio de E-mails</h3>
            <p>Falha de autenticação no servidor SMTP externo de entrega.</p>
        </div>
 
        <div class="card-status card-info">
            <span class="badge-status">Manutenção</span>
            <h3>Backup Noturno</h3>
            <p>Rotina agendada para 03:00 UTC sem interrupção de tráfego.</p>
        </div>
    </div>
 
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Painel de Notificações W3C</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: whitesmoke;
padding: 30px;
color: darkslategray;
}
.grid-notificacoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.card-status {
background-color: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-top: 5px solid gray;
}
.card-sucesso { border-top-color: seagreen; }
.card-atencao { border-top-color: darkorange; }
.card-perigo  { border-top-color: crimson; }
.card-info    { border-top-color: dodgerblue; }
.card-status h3 {
margin: 0 0 8px;
font-size: 16px;
}
.badge-status {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.card-sucesso .badge-status { background-color: honeydew; color: seagreen; }
.card-atencao .badge-status { background-color: cornsilk; color: darkorange; }
.card-perigo .badge-status  { background-color: mistyrose; color: crimson; }
.card-info .badge-status    { background-color: aliceblue; color: dodgerblue; }
</style>
</head>
<body>
<div class="grid-notificacoes">
<div class="card-status card-sucesso">
<span class="badge-status">Operacional</span>
<h3>Servidor Principal</h3>
<p>Todos os serviços operando normalmente com 100% de disponibilidade.</p>
</div>
<div class="card-status card-atencao">
<span class="badge-status">Alerta de Uso</span>
<h3>Memória do Servidor</h3>
<p>Uso de memória atingiu 82% nas últimas 2 horas de pico.</p>
</div>
<div class="card-status card-perigo">
<span class="badge-status">Falha Crítica</span>
<h3>Envio de E-mails</h3>
<p>Falha de autenticação no servidor SMTP externo de entrega.</p>
</div>
<div class="card-status card-info">
<span class="badge-status">Manutenção</span>
<h3>Backup Noturno</h3>
<p>Rotina agendada para 03:00 UTC sem interrupção de tráfego.</p>
</div>
</div>
</body>
</html>

Teste e modifique as cores deste painel em tempo real no nosso editor interativo:
⚡ Testar no Playground IDE

6. Nomes de Cores vs HEX vs HSL: Quando Usar Cada Abordagem?

Embora as palavras-chave sejam muito convenientes, desenvolvedores profissionais combinam os formatos conforme a fase e a complexidade do projeto:

Critério	Nomes W3C (Keywords)	Códigos HEX (#RRGGBB)	Modelos Funcionais (HSL / RGB)
Velocidade de Prototipagem	Excelente (não requer abrir paleta de cores).	Média (requer copiar o código da paleta).	Média (requer parametrização numérica).
Fidelidade de Identidade Visual	Baixa (limitada às 140 opções fixas).	Total (16,7 milhões de tons exatos).	Total (16,7 milhões de tons exatos).
Criação de Temas (Dark Mode)	Difícil (tons são estanques).	Trabalhosa (valores estáticos).	Perfeita (basta ajustar a Luminosidade `L`).
Transparência Alfa Nativa	Inexistente (exceto a cor `transparent`).	Suportada no formato `#RRGGBBAA`.	Suportada nativamente com `hsl(h s l / a)`.
Legibilidade Humana	Imediata (qualquer pessoa entende `navy`).	Baixa (requer decodificar canais hex).	Média/Alta (HSL expressa saturação e brilho).

7. Boas Práticas e Critérios de Acessibilidade (WCAG)

O maior risco ao utilizar nomes de cores é supor que tonalidades de nomes semelhantes possuem contraste adequado para leitura. Siga sempre estas regras:

Valide o Contraste Mínimo de 4.5:1 (WCAG AA): Combinações como texto yellow sobre fundo white ou texto darkblue sobre fundo black falham gravemente nas auditorias de acessibilidade.
Cuidado com Nomes Parecidos: A cor darkgray (#A9A9A9) é curiosamente mais clara do que a cor gray (#808080) no padrão X11/W3C. Para evitar surpresas em produção, utilize o Extrator de Paleta de Cores do Web-ZoneWare para auditar seus contrastes.
Use Nomes para Estrutura e Variáveis para a Marca: Uma boa prática é utilizar transparent e currentColor em componentes reutilizáveis, enquanto as cores principais da empresa devem ser declaradas em variáveis CSS (Design Tokens).

🚀

Próximo Passo Didático: Agora que você domina as 140 palavras-chave oficiais do W3C, na Lição 21: Valores de Cor & Modelos, exploraremos a fundo como os navegadores calculam internamente espaços cromáticos avançados como lab(), lch() e a nova geração de gamas P3 do CSS Color Module Level 4.