Nomes de Cores HTML
Todas as 148 cores HTML/CSS nomeadas com códigos HEX, RGB e HSL. Busque, filtre por família, ordene por matiz e ache a cor nomeada mais próxima de um hex.
Atualizado em junho de 2026
Revisado por Rafael Duarte
Lime vs Green
Valor puroNo CSS, lime é o verde puro #00FF00 — green é na verdade o tom 50% mais escuro #008000.
Aqua vs Cyan
IdênticosTanto aqua quanto cyan correspondem exatamente a #00FFFF. São sinônimos em todos os navegadores.
Gray vs Grey
SinônimosO CSS aceita as duas grafias: 7 pares gray/grey contribuem para o total de 148 keywords.
141 cores encontradas
Localizador de Cor Nomeada Mais Próxima
Cole qualquer código hex e encontre a cor CSS nomeada mais próxima, ranqueada pela distância de cor ΔE (CIELAB).
A história da RebeccaPurple #663399
Em 2014, a comunidade web se uniu para homenagear Rebecca Meyer, filha de seis anos do pioneiro do CSS Eric Meyer, que morreu de câncer cerebral no dia do seu aniversário. Por sugestão da comunidade, o tom de roxo que ela amava foi adicionado para sempre à especificação CSS como rebeccapurple — a única cor CSS nomeada em homenagem a uma pessoa.
Como usar
Busque, filtre e ache a cor mais próxima
1. Digite um nome ou hex
O grid filtra em tempo real — aceita nomes como `tomato` ou fragmentos de hex como `ff63`.
2. Filtre por família ou ordene
Escolha "Azuis" e ordene por luminosidade para ver todos os azuis do mais claro ao mais escuro.
3. Copie ou ache a mais próxima
Clique para copiar o HEX, ou cole um código no localizador para achar a keyword CSS mais parecida.
O que esta ferramenta faz
As 148 keywords, pesquisáveis de verdade
Localizador de cor mais próxima
Cole qualquer hex e receba a keyword CSS oficial mais parecida por distância ΔE (CIELAB).
Filtro por família de cor
Todos os azuis, todos os verdes — do jeito que um designer realmente escolhe cor.
Ordenação por matiz, luminosidade ou saturação
Não só ordem alfabética — varra uma família inteira em progressão visual.
Snippets CSS prontos
Detalhes de cada cor incluem HEX, RGB, HSL e código pronto para colar.
Banners compartilháveis para redes sociais
Cada cor gera um cartão PNG pronto para Instagram (quadrado) ou X/WhatsApp (wide), já com nome, HEX, RGB e HSL formatados.
Cartões de distinção rápida
Compara lado a lado os pares que mais confundem — lime x green, aqua x cyan, gray x grey — com amostra visual e explicação.
Exemplos
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Protótipos e demos
background: cornflowerblue é mais rápido de escrever e mais legível do que um hex.
Achar nome semântico para cor de marca
Cole seu hex no localizador e veja se existe uma keyword próxima o bastante para mocks rápidos.
Escolher um tom dentro de uma família
Filtre "Verdes" e ordene por luminosidade em vez de caçar numa tabela alfabética.
Ensino e documentação
Nomes como tomato e papayawhip são memoráveis para explicar CSS a iniciantes.
E-mail e Markdown
Cores nomeadas sobrevivem ao copiar e colar em clientes de e-mail e editores Markdown que não têm seletor de cor.
Erros comuns com cores CSS
Usar `green` querendo verde puro
green é #008000, metade do brilho. O verde puro é lime.
Escrever `grey` isolado
Só gray vale como keyword isolada — grey só funciona em nomes compostos como darkgrey.
Contar com 140 cores
A spec define 148 keywords — validações baseadas em listas antigas rejeitam nomes válidos.
Achar que bate com as cores do Tailwind
text-purple-700 do Tailwind e rebeccapurple do CSS vêm de paletas totalmente diferentes. Para match exato, compare sempre os valores hex.
Contar `transparent` e `currentColor` como nomeadas
Essas duas palavras-chave são valores especiais da spec, não fazem parte das 148 cores nomeadas — o localizador não aceita esse tipo de entrada.
Por que usar esta ferramenta
Diferente de tabelas estáticas, você filtra por família de cor e ordena por matiz, luminosidade ou saturação — do jeito que um designer realmente escolhe cor, não em ordem alfabética.
O localizador de cor mais próxima usa distância perceptual ΔE (CIELAB), que modela a percepção humana muito melhor que distância RGB crua.
A maioria dessas 148 keywords vem do sistema X11, usado em interfaces Unix desde os anos 1980 e depois adotado pelo SVG e pelo CSS — por isso a lista tem nomes curiosos como PapayaWhip e NavajoWhite.
lime vs. green
A confusão mais comum com cores CSS
Perguntas frequentes
Exatamente 148 keywords — 141 nomes únicos mais 7 aliases com grafia britânica "grey". Os 16 básicos vêm do HTML 4.01; o restante do X11/SVG, e rebeccapurple foi adicionada em 2014.
Referências
Ferramentas Relacionadas
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
