Nomes de Cores HTML

Nomes de Cores HTML — As 148 Cores CSS com Busca e Filtro

Todos os nomes de cores HTML em uma referência pesquisável: a lista completa de cores CSS nomeadas com valores HEX, RGB e HSL, amostras ao vivo e cópia com um clique. Diferente das tabelas estáticas, aqui você filtra por família de cor — todos os azuis, todos os verdes — e ordena por matiz, luminosidade ou saturação, do jeito que um designer realmente escolhe cor.

A especificação CSS Colors Level 4 define exatamente 148 keywords de cor: 141 nomes únicos mais 7 grafias britânicas "grey". Muita referência ainda fala em 140 — a spec diz outra coisa. A página também inclui um localizador de cor nomeada mais próxima: cole qualquer código hex e receba a keyword CSS oficial mais parecida, ranqueada por distância perceptual ΔE (CIELAB).

Como Usar a Referência de Cores HTML

Encontrar e copiar uma cor leva segundos:

1. Digite um nome ou código hex na busca — o grid filtra em tempo real enquanto você digita, aceitando nomes como tomato e fragmentos de hex como ff63.
2. Filtre por família ou mude a ordenação — escolha "Azuis" e ordene por luminosidade para ver todos os azuis do CSS, do mais claro ao mais escuro.
3. Clique em qualquer amostra para copiar o HEX na hora — ou clique no nome para abrir os detalhes com RGB, HSL, snippets CSS prontos e banners compartilháveis para Instagram, WhatsApp e X.
4. Ache a cor nomeada mais próxima de qualquer hex — cole um código como #517CBD no localizador e receba a keyword oficial mais próxima com a distância exata.

Exemplos de Nomes de Cores HTML

Algumas consultas reais para mostrar o que a referência devolve:

O localizador aceita o formato curto de 3 dígitos: #fa0 vira #FFAA00 antes da comparação.

O Que São as Cores CSS Nomeadas

Cores nomeadas são keywords de texto que funcionam como valor em qualquer propriedade de cor do CSS: color: rebeccapurple renderiza idêntico a color: #663399. O navegador resolve o nome para RGB no parse — não existe diferença de performance entre keyword e hex.

Os 16 nomes básicos (black, white, red, lime, navy, teal…) vêm do HTML 4.01 (1997). Os demais nasceram no sistema de cores X11, usado em interfaces Unix desde os anos 1980, foram adotados pelo SVG e incorporados ao CSS3 — por isso a lista tem curiosidades como PapayaWhip, Bisque e NavajoWhite. O CSS Colors Level 4 adicionou a última entrada em 2014: rebeccapurple.

A História da RebeccaPurple

rebeccapurple (#663399) é a única cor CSS nomeada em homenagem a uma pessoa. Rebecca Meyer, filha do pioneiro do CSS Eric Meyer, morreu de câncer cerebral em 7 de junho de 2014 — dia do seu sexto aniversário. No mesmo dia, a comunidade web propôs adicionar à especificação o tom de roxo que ela amava, e o CSS Working Group aprovou em poucas horas. O nome completo "Rebecca" foi usado a pedido do pai: ela tinha acabado de deixar o apelido "Becca". Até hoje, desenvolvedores usam a keyword como tributo.

Casos de Uso Comuns

• Protótipos e demos: background: cornflowerblue é mais rápido de escrever e mais legível em exemplo de código do que um hex — por isso cores nomeadas dominam tutoriais.
• Achar um nome semântico para a cor da marca: cole seu hex no localizador e descubra se existe uma keyword oficial próxima o bastante para mocks rápidos.
• Escolher um tom dentro de uma família: filtre "Verdes" e ordene por luminosidade para varrer os 23 verdes do CSS em ordem, em vez de caçar numa tabela alfabética.
• Ensino e documentação: nomes como tomato e papayawhip são memoráveis — ideais para explicar CSS a iniciantes.
• E-mail e Markdown: cores nomeadas sobrevivem ao copia-e-cola em ambientes sem color picker.

Erros Comuns com Cores CSS

• Usar green querendo verde puro: green é #008000, um tom com metade do brilho. O verde puro (rgb(0, 255, 0)) é lime — herança do HTML 4.01 que ainda surpreende.
• Escrever grey como keyword isolada: só gray vale na forma simples. A grafia britânica funciona apenas em nomes compostos — darkgrey, slategrey e mais cinco são aliases válidos.
• Achar que cores nomeadas batem com classes do Tailwind: text-purple-700 e rebeccapurple vêm de paletas separadas. Precisando de match exato, compare os hex — quase nunca coincidem.
• Contar com 140 cores: a spec define 148 keywords. Validações baseadas em listas antigas de 140 entradas rejeitam keywords válidas.

Perguntas Frequentes

Quantas cores HTML nomeadas existem?

A especificação CSS Colors Level 4 define exatamente 148 keywords de cor, além dos valores especiais transparent e currentColor. São 141 nomes únicos mais 7 aliases com a grafia britânica "grey". Os 16 nomes básicos vêm do HTML 4.01; o restante deriva do conjunto X11/SVG, e rebeccapurple foi adicionada em 2014.

Por que existe uma cor CSS chamada rebeccapurple?

Ela foi adicionada em 2014 em memória de Rebecca Meyer, filha de seis anos do pioneiro do CSS Eric Meyer, que morreu de câncer cerebral no dia do aniversário. A comunidade web propôs a cor no mesmo dia e o CSS Working Group aprovou em horas. É a única cor CSS com nome de pessoa real.

Qual a diferença entre lime e green no CSS?

lime é o verde puro de brilho máximo: #00FF00. green é o tom mais escuro #008000, com metade do brilho. A nomenclatura vem do conjunto original de 16 cores do HTML 4.01, onde green foi definido como o tom médio. Para o verde mais vivo possível, use lime.

Gray ou grey: qual é o certo no CSS?

Como keyword isolada, apenas gray (#808080) é válida. Porém as duas grafias funcionam em nomes compostos: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey e as variantes slate são todas legais — exatamente por isso o total de keywords é 148, e não 141.

Dá para achar o nome CSS mais próximo de um hex?

Sim — cole o hex no localizador de cor nomeada desta página. Ele converte sua cor e as 148 keywords para o espaço CIELAB e ranqueia por distância ΔE, que modela a percepção humana muito melhor que distância RGB crua. Você recebe o melhor match e as alternativas mais próximas.

Recursos

• MDN — <named-color> — A lista canônica de cores nomeadas na documentação dos navegadores, com amostras renderizadas.
• W3C — CSS Color Module Level 4 — A tabela oficial da especificação com as 148 keywords e seus valores RGB exatos.
• Eric Meyer — In Memoriam, 2 — O texto por trás da história da rebeccapurple, escrito pelo pai de Rebecca.