Validador de Cor CSS Nomeada

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

Cores nomeadas em CSS sao as palavras-chave legiveis — red, cornflowerblue, rebeccapurple — que o navegador resolve para um triplet sRGB especifico. A lista atual, definida pelo CSS Color Module Level 3, contem 147 nomes distintos (148 se voce contar aqua e cyan como entradas separadas; mapeiam para o mesmo hex). Validar um nome significa procura-lo case-insensitive nesse dicionario fixo — nao ha algoritmo, so pertinencia.

Alem das 147 cores nomeadas, o CSS tambem 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 historia: 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 entao tomou emprestados mais de 130 nomes da paleta do sistema de janelas X11 — e dai que vem coisas como papayawhip, cornsilk, ghostwhite, lemonchiffon, peachpuff e mistyrose. A unica adicao pos-2014 e rebeccapurple (#663399), proposta por Eric Meyer em homenagem a sua filha Rebecca e adotada por unanimidade pelo CSS WG.

Equivalencia a hex, rgb() e funcoes 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%);

Maiusculas/minusculas nao importam: Red, RED e red todos batem. Espacos dentro da palavra-chave nao sao permitidos — papaya whip e invalido, voce precisa escrever papayawhip. O mapeamento completo esta na especificacao CSS Color Module Level 3, disponivel via pacote npm color-name ou pelo dicionario colors no MDN.

Usar cores nomeadas em producao?

Para prototipos e demos elas leem lindo. Em producao, 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 tambem introduz oklch() e color-mix(), que superam cores nomeadas em acessibilidade e tematizacao. Duas pegadinhas: gray e grey sao ambos validos e batem na mesma cor, mas darkgray e paradoxalmente mais claro que gray (legado X11). Evite darkgray/darkgrey se a surpresa for indesejada.

Estrategia de validacao

Nao tem regex — a unica validacao correta e lookup em dicionario. Coloque a entrada em minusculas, tire espacos e cheque contra o set de 147 entradas. Fontes uteis: color-name e css-color-names no npm; a spec CSS Color do W3C; o dicionario --lwc-colors dentro do Gecko da Mozilla. Evite listas digitadas a mao: 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, sao 149.

Nomes de cores em CSS sao case-sensitive?

Nao. Red, RED e red sao todos validos e resolvem para #ff0000. Espacos e hifens nao sao permitidos dentro da palavra-chave.

Por que existe a cor rebeccapurple?

Foi adicionada em 2014 em memoria 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 unica cor nomeada cuja origem e um memorial.

darkgray e mais escuro que gray?

Nao, e essa e a pegadinha de legado X11 mais famosa. darkgray e #a9a9a9, enquanto gray e #808080 — entao darkgray e na verdade mais claro. Evite o par em codigo de producao.