Tabela De Cores E Nomes

O que é uma tabela de cores e nomes

Muita gente acha que saber cores é só decorER que #FF5733 é um laranja e pronto. A realidade é que trabalhar com tabela de cores e nomes exige entender como cada sistema interpreta o mesmo valor de forma diferente. O que parece simples na superfície esconde armadilhas que destroem projetos inteiros quando alguém não presta atenção. Eu já perdi três dias refazendo um sistema inteiro porque o cliente pediu para usar "um azul confiável" em vez do código hex que eu tinha mapeado. Quando você abre uma planilha com os 148 nomes de cores do CSS, a primeira coisa que percebe é que "lightblue" e "aliceblue" são vizinhos no código mas visualmente nada parecidos. Isso não é falha sua, é como a especificação foi construída.

Como montar sua tabela de cores e nomes na prática

A abordagem mais direta é começar pelo padrão W3C. O CSS Define There are 148 color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, plus todas as variantes como darkgoldenrod e lightseagreen. Cada uma corresponde a um valor RGB fixo que não muda entre browsers — pelo menos não deveria mudar. Eu costumo organizar em spreadsheets com três colunas: nome da cor, valor hex, e valor rgb(). A terceira coluna é a que mais gente ignora e que resolve metade dos problemas. Quando você precisa gerar SVG dinâmico ou passar cores via JavaScript, rgb(255, 87, 51) funciona em todo lugar. #FF5733 não funciona em atributos SVG antes do CSS3. Um detalhe técnico que quase ninguém menciona: a cor "crimson" tem valor #DC143C, não #FF0000. O vermelho puro é "red". Se você está montando uma paleta baseada em nomes e substitui tudo por aproximações visuais, vai acabar com tons inconsistentes em diferentes telas. Eu vi isso acontecer em um dashboard onde o gráfico usava "coral" e "salmon" como cores distintas de status, mas o desenvolvedor trocou por vermelho e laranja genéricos e o cliente não percebeu a diferença até o produto ir pro ar.

Sistemas alternativos e quando fugir do padrão

Existem tabelas muito mais detalhadas que o básico do CSS. O X11/RGB color set tem 657 nomes, o Material Design traz 208 cores organizadas por tom e saturação, e o Pantone é o padrão da indústria gráfica mas custa caro para licenciar. Para trabalho web, eu recomendo ficar com o CSS até você ter um motivo concreto para sair dele. O problema do Material Design é que ele otimiza para contraste e acessibilidade mas perde a familiaridade que usuários já têm. Se você trocar "darkred" por uma cor do palette do Material que não existe no vocabulário comum do browser, o usuário vai perceber que algo está errado mesmo sem conseguir explicar o porquê. Isso é másimo em sistemas internos onde a consistência visual é mais importante que a estética. Uma limitação séria da tabela de cores e nomes do CSS é que ela não cobre tons modernos como neon, pastéis sofisticados ou cores de marcas famosas. Se seu projeto precisa de #00D4AA (aquele verde-azulado que todo mundo usa mas não tem nome) ou #BFFF00 (laranja-neon que ninguém nomeou), você vai ter que usar hexadecimal mesmo. Não tente forçar um nome que não existe — o código vai funcionar mas o próximo desenvolvedor que tocar no projeto vai passar mal.

Pegadinhas que eu aprendi na marra

A cor "gray" é escrita com GRA em inglês americano. "Grey" também é válida no CSS mas não está na lista oficial de 148 nomes. Ambos resultam no mesmo valor #808080, então o browser não reclama, mas se você usar "grey" num código que faz validação de string contra a lista oficial, vai dar erro. Eu já passei vergonha no code review por isso. Outra armadilha: cores com espaço no nome como "mint cream" e "old lace" funcionam normalmente mas quebram se você tentar fazer split por espaço pra extrair o nome. Eu escrevi um script que parseava nomes de cor pra gerar documentação automática e levou dois dias pra descobrir que "powder blue" tinha dois espaços e o regex não ia aguentar. A solução foi manter a lista original como array ao invés de confiar em parsing. O problema mais chato que eu encontrei envolve transparência. Nenhuma cor nomeada do CSS suporta alpha. Se você precisa de "um vermelho com 50% de opacidade", não existe "red50" ou "transparent-red". Você tem que usar rgba(255, 0, 0, 0.5) ou hsla(0, 100%, 50%, 0.5). Isso é especialmente frustrante quando você está migrando um sistema que usava nomes e precisa adicionar efeito hover com fade — a tabela de cores e nomes simplesmente não te ajuda nessa parte.

Links úteis

A especificação oficial do W3C com todos os 148 nomes e seus valores RGB está em https://www.w3.org/csswg/css-color-4/#named-colors. Para quem quer uma versão mais completa com os 657 nomes do X11, o site schillmania.com mantém uma tabela bonita e atualizada. Se o objetivo é trabalho profissional de design, o Material Design Color System oferece tons prontos com variações de 50 a 900 que já incluem regras de contraste.