Nomes de cores HTML: todos os 148 com HEX, RGB, HSL e OKLCH | We.Inc
Os 148 nomes de cores CSS e HTML com códigos HEX, RGB, HSL e OKLCH, contraste no branco e no preto, a classe Tailwind mais próxima e ordenação por matiz, luminosidade ou família.
Nomes de cores HTML
O CSS define 148 nomes de cores, de aliceblue a yellowgreen, e todo navegador os entende em HTML e CSS. Nove são grafias alternativas de outro nome, como grey para gray e cyan para aqua, então são 139 cores distintas. A tabela abaixo traz os valores HEX, RGB, HSL e OKLCH de cada uma, o contraste do texto e a classe Tailwind mais próxima.
Fatos sobre cores nomeadas
Pergunta
Resposta
Quantos nomes?
148 (139 cores distintas)
Diferencia maiúsculas?
Não: Red, RED e red são iguais
Onde são definidos?
CSS Color Module Level 4
Nome mais recente
rebeccapurple (#663399), adicionado em 2014
Busque por nome ou HEX, filtre por família de cor, ordene por matiz, luminosidade ou nome, e copie qualquer valor com um clique. Cada linha também mostra se texto preto ou branco fica legível sobre aquela cor e qual cor do Tailwind é a mais próxima.
Digite parte de um nome ou um código HEX na caixa de busca para filtrar a tabela.
Escolha uma família, como Azul ou Marrom, para ver só essas cores. As famílias são agrupadas pela matiz percebida.
Ordene por nome, por matiz (para ver as cores como um espectro) ou por luminosidade (do escuro ao claro).
Clique em qualquer valor para copiá-lo. As colunas de contraste mostram a razão para texto branco e para texto preto sobre aquela cor.
Cores nomeadas são práticas para protótipos e exemplos, mas um design real normalmente precisa dos valores exatos da marca. Troque os nomes por HEX ou custom properties antes de lançar.
Alguns nomes enganam: darkgray (#A9A9A9) é mais claro que gray (#808080), e lightgoldenrodyellow é um creme pálido, não um amarelo.
Use transparent e currentColor junto com os nomes. Eles também são palavras-chave do CSS, mas não fazem parte dos 148 porque não são cores fixas.
Verifique o contraste antes de usar uma cor nomeada em texto. Muitas das mais vivas, como yellow, gold e lime, não passam sobre fundo branco.
Perguntas frequentes
Quantos nomes de cores HTML existem?
Existem 148 cores nomeadas no CSS Color Module Level 4, que o HTML usa. Nove pares são apelidos para a mesma cor: aqua e cyan, fuchsia e magenta, e sete nomes que podem ser escritos com gray ou grey, como darkgray e darkgrey. Então a lista descreve 139 cores distintas.
Os nomes de cores funcionam em todos os navegadores?
Sim. Os 148 nomes são suportados por todos os navegadores atuais. Os 16 nomes originais do HTML 4, como red, navy e teal, funcionam há décadas; os demais vieram da lista de cores do X11 e também são suportados há muito tempo.
Por que darkgray é mais claro que gray?
Os nomes vêm de duas fontes diferentes. gray foi definido no HTML com 50% de luminosidade (#808080), enquanto darkgray veio da lista de cores mais antiga do X11, onde era #A9A9A9. Quando as listas foram unidas, os dois valores foram mantidos como estavam.
O que é rebeccapurple?
É #663399, adicionado ao CSS em 2014 em memória de Rebecca Meyer, filha do autor de CSS Eric Meyer. É o nome de cor mais recente adicionado ao CSS.
Devo usar nomes de cores ou códigos HEX?
Use valores HEX, RGB, HSL ou OKLCH, de preferência guardados como custom properties, em trabalhos de design para produção, porque os nomes cobrem só 148 pontos fixos. Os nomes servem bem para testes rápidos, documentação e ensino, onde a legibilidade importa mais que a precisão.
De onde vêm os nomes
O HTML 4 definiu 16 nomes de cores básicos: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua. Os navegadores também tinham adotado uma lista bem maior vinda do X Window System, e o CSS3 tornou essa lista oficial. O CSS Color Level 4 adiciona rebeccapurple e mantém o resto sem mudanças.
Como os nomes do X11 foram escolhidos por pessoas, não por uma fórmula, eles são irregulares. Há muitos quase brancos e vários verdes quase idênticos, enquanto algumas matizes não têm nome nenhum. Ordenar a tabela por matiz mostra essas lacunas com clareza.
Como ler as colunas extras
O OKLCH descreve uma cor como luminosidade, croma (o quanto ela é colorida) e matiz, em um espaço pensado para que passos iguais pareçam iguais. Ele é útil para montar paletas a partir de uma cor nomeada, porque mudar só a luminosidade mantém a matiz com a mesma aparência.
As colunas de contraste usam a fórmula da WCAG 2. É preciso 4.5:1 ou mais para texto normal e 3:1 para texto grande. A coluna Tailwind indica a classe da paleta padrão do Tailwind que parece mais próxima, com um número de diferença: abaixo de 2 é difícil distinguir.
Nome
HEX
RGB
HSL
OKLCH
No branco
No preto
Tailwind mais próximo
Vermelho
Rosa
Laranja
Amarelo
Marrom
Verde
Ciano
Azul
Roxo
Branco
Preto e cinza
Copiar
Todos os 148 em um relance, por matiz
Todos os 148 nomes de cores
Buscar nome ou HEX
Ordenar por
Nome
Matiz (espectro)
Luminosidade (do escuro ao claro)
{n} exibidas
· {v} copiado
Família de cor
Todas
Cores nomeadas de CSS e HTML
Amostra
diferença {d}
Os valores de contraste em verde atingem 4.5:1, o suficiente para texto corrido. A amostra Aa usa o preto ou o branco, o que for mais legível.