Validador de Cor CSS Nomeada

Cores nomeadas em CSS: 147 palavras-chave do HTML 4 ao X11

Cores nomeadas em CSS são as palavras-chave legíveis — red, cornflowerblue, rebeccapurple — que o navegador resolve para um triplet sRGB específico. A lista atual, definida pelo CSS Color Module Level 3, contem 147 nomes distintos (148 se você contar aqua e cyan como entradas separadas; mapeiam para o mesmo hex). Validar um nome significa procura-lo case-insensitive nesse dicionário fixo — não ha algoritmo, so pertinencia.

Além das 147 cores nomeadas, o CSS também aceita um punhado de palavras-chave especiais: transparent (preto totalmente transparente), currentColor (herda a propriedade color computada) e as system colors depreciadas como ButtonFace. O CSS Color Module Level 4 moderno introduz system-color() como substituto.

Breve história: 16 do HTML 4 mais a paleta X11

A web original herdou apenas 16 cores do HTML 4.01: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. O CSS 2.1 adicionou orange. O CSS Color Module Level 3 então tomou emprestados mais de 130 nomes da paleta do sistema de janelas X11 — e daí que vem coisas como papayawhip, cornsilk, ghostwhite, lemonchiffon, peachpuff e mistyrose. A única adicao pós-2014 e rebeccapurple (#663399), proposta por Eric Meyer em homenagem a sua filha Rebecca e adotada por unanimidade pelo CSS WG.

Equivalência a hex, rgb() e funções modernas

Toda cor nomeada tem um equivalente exato em hex. O navegador converte no momento do parse:

color: red;            /* igual a */
color: #ff0000;        /* igual a */
color: rgb(255, 0, 0); /* igual a */
color: hsl(0, 100%, 50%);

Maiúsculas/minúsculas não importam: Red, RED e red todos batem. Espaços dentro da palavra-chave não são permitidos — papaya whip e inválido, você precisa escrever papayawhip. O mapeamento completo esta na especificação CSS Color Module Level 3, disponível via pacote npm color-name ou pelo dicionário colors no MDN.

Usar cores nomeadas em produção?

Para prototipos e demos elas leem lindo. Em produção, design systems geralmente preferem design tokens (CSS custom properties como --color-primary) apoiados em uma paleta de valores hex ou oklch(), para que tema escuro e variantes se mantenham coerentes. O CSS Color 4 também introduz oklch() e color-mix(), que superam cores nomeadas em acessibilidade e tematizacao. Duas pegadinhas: gray e grey são ambos válidos e batem na mesma cor, mas darkgray e paradoxalmente mais claro que gray (legado X11). Evite darkgray/darkgrey se a surpresa for indesejada.

Estratégia de validação

Não tem regex — a única validação correta e lookup em dicionário. Coloque a entrada em minúsculas, tire espaços e cheque contra o set de 147 entradas. Fontes úteis: color-name e css-color-names no npm; a spec CSS Color do W3C; o dicionário --lwc-colors dentro do Gecko da Mozilla. Evite listas digitadas a mão: deixar uma entrada de fora cria falso-negativos.

FAQ

Quantas cores nomeadas CSS existem?

147 cores distintas no CSS Color Module Level 3, mais as palavras-chave especiais transparent e currentColor. Contando aqua/cyan e fuchsia/magenta como nomes separados, são 149.

Nomes de cores em CSS são case-sensitive?

Não. Red, RED e red são todos válidos e resolvem para #ff0000. Espaços e hifens não são permitidos dentro da palavra-chave.

Por que existe a cor rebeccapurple?

Foi adicionada em 2014 em memória de Rebecca Meyer, filha do especialista em CSS Eric Meyer. O CSS Working Group adotou #663399 (o roxo favorito dela) por unanimidade como homenagem — a única cor nomeada cuja origem e um memorial.

darkgray e mais escuro que gray?

Não, e essa e a pegadinha de legado X11 mais famosa. darkgray e #a9a9a9, enquanto gray e #808080 — então darkgray e na verdade mais claro. Evite o par em código de produção.