Nomes de cores CSS
Todas as 148 cores nomeadas do CSS com visualização e código hex. Pesquise pelo nome, ordene por matiz e clique em qualquer cartão para copiar o hex.
De onde vêm os 148 nomes de cores do CSS
A maioria dos nomes remonta à paleta de cores do sistema de janelas X11 dos anos 1980, que os navegadores adotaram depois e o módulo de cores do CSS oficializou. É por isso que nomes extravagantes como papayawhip e mistyrose convivem com os velhos e simples red e blue. A cor número 148, rebeccapurple (#663399), foi acrescentada em 2014 em memória de Rebecca, filha do desenvolvedor web Eric Meyer, que morreu aos seis anos; é o único nome que veio direto da própria comunidade da web.
Quando usar nomes e quando usar códigos hex
Cores nomeadas são práticas para protótipos, exemplos e ensino: tomato é bem
mais fácil de lembrar do que #ff6347. Em produção, porém, os códigos hex ganham: cobrem
16,7 milhões de tons contra apenas 148. Atenção às duplicatas: gray e
grey (e todas as variantes delas) são exatamente a mesma cor, assim como
aqua/cyan e fuchsia/magenta. E cuidado com
darkgray, que paradoxalmente é mais claro que gray, uma esquisitice histórica
herdada do X11.
Nomes de outra época
A lista vem das cores dos terminais X11 dos anos 1980, escolhidas por programadores com os nomes que lhes passavam pela cabeça: daí curiosidades como “papayawhip”, “lemonchiffon” e “peachpuff”, que descrevem sobremesas mais do que cores.
Há também pares contraditórios mantidos por compatibilidade: “darkgray” é MAIS CLARO que “gray”, porque os dois nomes vêm de tabelas diferentes que foram unidas de mau jeito. É o detalhe clássico que não pode ser corrigido, porque milhares de páginas dependem dele há trinta anos.
Grafias duplas e sinônimos
Algumas cores têm duas grafias, ambas válidas, a americana e a britânica: gray/grey, e todas as famílias delas (darkgray/darkgrey, lightslategray/lightslategrey). É a mesma cor, e a escolha é puro gosto.
Há também pares de nomes diferentes para exatamente o mesmo valor: aqua e cyan são ambos #00FFFF, fuchsia e magenta são ambos #FF00FF. Se um guia de estilo pede consistência, você precisa decidir qual usar, porque uma busca e substituição pelos códigos não vai pegá-los.
Quando o nome é o certo e quando o código é
Os nomes são práticos para protótipos, exemplos e ensino: “tomato” se lê e se fixa melhor que #FF6347, e num trecho de código feito para ser explicado isso vale mais que a precisão. Fora disso, um nome é uma escolha fechada: não dá para clareá-lo nem um pouquinho.
Num projeto real, compensa passar para as variáveis CSS: a cor é declarada uma vez e usada por um nome do próprio projeto (“--accent”), não pelo nome da cor. Trocar um matiz passa a levar uma linha, e temas claro e escuro ficam possíveis.
Veja também
Para ir de um nome ao seu código e voltar, há o Conversor de cores, e para escolher uma cor a partir de uma imagem, o Seletor de cores. A legibilidade de um par de cores se verifica com o Verificador de contraste de cores.