Busca de cores CSS nomeadas | Dicionário bidirecional das 148 palavras-chave de cor do CSS

Dicionário para desenvolvedores que cobre as 148 cores nomeadas definidas no CSS Color Module Level 4. Busque por nome e obtenha as notações hex / RGB / HSL / OKLCH, ou cole qualquer hex para descobrir a palavra-chave CSS perceptualmente mais próxima, ordenada por distância ΔE em OKLab. Ajuda a decidir, sem sair da página, se uma cor do design system pode ser expressa como palavra-chave CSS padrão ou deve ficar como hex personalizado.

💡 Sobre esta ferramenta

As 148 cores nomeadas do CSS (steelblue, cornflowerblue, lightgoldenrodyellow e companhia) formam um vocabulário congelado, herdado do arquivo rgb.txt do X Window System, integrado ao SVG 1.0 e padronizado no CSS Color Module. A maioria dos desenvolvedores depende do autocomplete do editor, que tropeça em nomes longos como lightgoldenrodyellow ou mediumspringgreen, e abrir o MDN o tempo todo quebra o ritmo de trabalho.

Aqui o campo de entrada oferece autocompletar nativo: ao digitar light, aparecem lightcoral, lightskyblue e o restante, e selecionar uma opção preenche em paralelo as notações hex, RGB, HSL e oklch(). No sentido inverso, cole qualquer hex e a ferramenta calcula a palavra-chave CSS mais próxima perceptualmente, usando os coeficientes OKLab de Björn Ottosson. A distância ΔE em OKLab reflete a percepção humana muito melhor do que a distância euclidiana em sRGB, então a sugestão "cor mais próxima" corresponde ao que o seu olho enxerga — útil para decidir se #5e8aaf está perto o bastante de steelblue para entregar como palavra-chave.

🧐 Perguntas frequentes

Q. Quantas cores nomeadas o CSS tem? A. 148, definidas formalmente no CSS Color Module Level 4 (Seção 6.1). Se contar as variantes ortográficas gray/grey separadamente, o total de superfície chega a 157, mas a paleta sRGB subjacente continua sendo 148 valores distintos.

Q. Por que existe rebeccapurple (#663399)? A. O CSS Working Group adicionou em 2014 em memória de Rebecca Meyer, filha do autor de CSS Eric Meyer. É uma das poucas cores com uma história humana explicitamente documentada na especificação.

Q. gray e grey são a mesma cor? A. Sim. Nove palavras-chave da família cinza (gray, darkgray, lightgray, dimgray, slategray, lightslategray, darkslategray e formas compostas) têm aliases com a grafia grey que compartilham exatamente o mesmo valor hex, preservadas por razões históricas.

Q. Por que usar ΔE OKLab para a busca do nome mais próximo? A. A distância euclidiana em sRGB se desvia bastante da percepção humana, especialmente em regiões escuras e saturadas: duas cores equidistantes em RGB podem parecer idênticas ou muito diferentes. O OKLab, publicado por Björn Ottosson em 2020, é um espaço de cor perceptualmente uniforme onde a distância em linha reta aproxima a diferença percebida.

Q. Posso digitar RGB, HSL ou OKLCH diretamente? A. No momento, não. Os modos de entrada aceitam apenas nomes CSS e códigos hex. RGB, HSL e OKLCH são apenas de saída; converta primeiro seus valores para hex.

Q. A notação oklch() pode ser usada no CSS? A. Sim. oklch(L% C H) faz parte do CSS Color Module Level 4 e já está disponível nas versões atuais de Chrome, Safari e Firefox. Vem sendo adotada em design systems com gamut ampliado (Display P3 ou Rec.2020).

📚 Curiosidades

A lista de cores nomeadas do CSS remonta ao arquivo rgb.txt distribuído com o X Window System em meados dos anos 1980, onde pesquisadores e programadores gráficos atribuíam nomes manualmente. Nomes caprichosos como mediumaquamarine, papayawhip ou peachpuff são fósseis daquela época, a sensibilidade de algum autor esquecido de tema X11, hoje congelada na plataforma web porque o CSS Working Group escolheu preservar, em vez de podar, o conjunto histórico.

Ver o vocabulário têxtil dos anos 1980 (burlywood = casca de árvore desnuda, gainsboro = sobrenome de um pintor inglês do século XVIII) convivendo na mesma especificação com a notação moderna oklch() faz da seção de cor do CSS um dos poucos documentos da plataforma web que cobre quarenta anos de história da computação em duzentas linhas.