Localizador de nomes de cores CSS

Como usar

1. Insira um valor de cor : digite ou cole um código hex (#3b82f6), um valor RGB ou HSL, ou clique no seletor para escolher uma cor visualmente.
2. Obtenha o nome da cor : o nome CSS nomeado mais próximo, uma referência Pantone e um nome legível são exibidos instantaneamente.
3. Explore as cores vizinhas : veja uma paleta de cores nomeadas similares para encontrar a melhor correspondência ou uma alternativa para seu design.

Por que usar a busca de nome de cor ?

Quando você trabalha com um design system, documentação de acessibilidade ou comunicação com cliente, dispor de um nome legível para uma cor é muito mais útil do que um código hex. « Cornflower Blue » comunica claramente ; « #6495ed » não. Esta ferramenta faz a ponte entre os valores de máquina e os nomes humanos, ajudando os designers a documentar paletas, explicar escolhas de cores e recuperar os nomes CSS padrão para seus valores hex.

Funcionalidades

• Nome CSS mais próximo : encontra a cor CSS nomeada mais próxima (entre a lista completa de 148 cores CSS) para qualquer código hex ou RGB.
• Vários formatos de entrada : aceita hex (#rrggbb), RGB, HSL e HSV.
• Seletor de cor : use o seletor nativo para uma seleção visual.
• Cores vizinhas : exibe cores nomeadas similares para encontrar alternativas.
• Metadados de cor : exibe matiz, saturação, luminosidade e luminosidade percebida.

Perguntas frequentes

Como a ferramenta encontra o nome mais próximo ?

A ferramenta calcula a distância perceptual entre sua cor e todas as cores CSS nomeadas usando a fórmula de diferença CIEDE2000, que corresponde bem à percepção humana das diferenças de cor. A correspondência mais próxima é retornada como nome.

Essas cores são idênticas às palavras-chave CSS ?

Sim. A ferramenta inclui todas as 148 cores nomeadas CSS padrão (da especificação CSS Color Module Level 4) como « rebeccapurple », « dodgerblue » e « tomato ». Você pode usá-las diretamente em CSS no lugar dos valores hex.

E se minha cor não tiver um nome exato ?

A maioria das cores não tem um nome CSS exato. A ferramenta retorna a cor nomeada perceptualmente mais próxima e exibe a diferença (delta E) para indicar o quão próxima é a correspondência.

De X11 ao CSS Color Module Level 4: a longa estrada até «rebeccapurple»

As cores nomeadas CSS que a maioria das pessoas usa hoje são herdadas da lista de cores do X Window System (rgb.txt), que foi montada no MIT para o ambiente gráfico X11 em 1986. A lista cresceu organicamente na década seguinte, repleta de nomes caprichosos e obscuros como «papayawhip», «peachpuff» e «papayawhip». Quando Mosaic (1993) e depois Netscape Navigator (1994) padronizaram a cor em HTML, mantiveram um subconjunto dos nomes X11. CSS1 (dezembro de 1996) formalizou apenas 16 cores nomeadas correspondendo à paleta VGA original: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) adicionou «orange» como a 17ª. CSS2.1 (junho de 2011) manteve as 17. CSS3 Color Module (junho de 2014, finalizado em 2018) adicionou o restante dos nomes X11, levando o total a 147. Em junho de 2014, a cor «rebeccapurple» (#663399) foi adicionada para honrar a filha de Eric Meyer, Rebecca, que havia morrido de câncer cerebral; ela havia dito que roxo era sua cor favorita. Foi adicionada ao CSS Color Module Level 4, levando o total a 148. O valor hex #663399 é a única cor nomeada CSS adicionada em memória de uma pessoa específica.

Cor CSS além das cores nomeadas: oklch, lab, color()

As cores nomeadas ainda cobrem apenas um canto do que as telas modernas podem mostrar. CSS Color Module Level 4 (Candidate Recommendation, rascunho atual) introduz um conjunto muito mais amplo de sintaxes de cor. lab() e lch() permitem que você especifique cores em CIE Lab e LCh, que são espaços de cor perceptualmente uniformes. oklab() e oklch() (Björn Ottosson, 2020) são versões aprimoradas que lidam melhor com cores brilhantes saturadas; oklch(70% 0.15 240) é um azul céu vivo. color(display-p3 1 0.5 0) dá acesso ao gamut de cor P3 mais amplo que iPhones, iPads e Macs modernos podem exibir, cerca de 25% mais saturado que o sRGB ao qual as cores nomeadas estão limitadas. Sintaxe de cor relativa (oklch(from blue calc(l - 10%) c h)) permite que você derive uma cor de outra. O suporte do navegador para todas as quatro funções de cor atingiu >90% em 2024. Para designs da era 2025, use cores nomeadas para prototipagem, então porte para oklch() para paletas de produção que funcionem em todo o espectro de gamut de cor.

Como a «cor mais próxima» é realmente calculada

A «distância» entre duas cores não é um conceito único. Fórmulas diferentes dão respostas diferentes e cada uma se encaixa em diferentes casos de uso.

• Distância euclidiana em sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Rápido, mas não corresponde à percepção humana, duas cores que parecem idênticas podem estar distantes em RGB e duas cores que parecem muito diferentes podem estar próximas. Evite para consultas de «nome mais próximo».
• Delta E CIE76. Mesma fórmula euclidiana mas no espaço CIE Lab, que é aproximadamente perceptualmente uniforme. Aproximadamente, não exatamente. Boa primeira aproximação; ΔE ≤ 2,3 é considerado «mal perceptível» sob condições controladas.
• Delta E CIEDE2000. O padrão industrial atual, publicado pela CIE em 2001. Adiciona correções para luminosidade, croma e rotação de matiz que correspondem melhor a como os humanos realmente percebem diferenças de cor. ΔE2000 ≤ 1 é imperceptível para a maioria dos observadores; ≤ 5 parece uma cor similar. Esta ferramenta usa CIEDE2000 para a «correspondência mais próxima».
• Distância euclidiana em OKLab. O espaço de cor de Björn Ottosson de 2020 é projetado para que a distância euclidiana simples se aproxime de ΔE2000 de perto. Mais rápido que ΔE2000 e a qualidade perceptual é similar. Cada vez mais o padrão em ferramentas de design.

Onde nomear cores realmente ajuda

• Documentação de sistema de design. «Ação primária: Royal Blue (#4169e1)» lê melhor do que apenas um valor hex em especificações de design e diretrizes de marca.
• Comunicação com cliente. «Vamos usar coral e steel blue» funciona em uma reunião; «#ff7f50 e #4682b4» não. Os nomes ancoram a conversa antes de você se comprometer com valores exatos.
• Auditorias de acessibilidade. Ao documentar quais cores falham no contraste WCAG contra um fundo, ter nomes humanos torna os relatórios de auditoria utilizáveis por não-desenvolvedores.
• Tradução de código legado. Arquivos CSS antigos frequentemente usam cores nomeadas. Ao migrar para design tokens ou uma paleta personalizada, você precisa saber a quais cores exatas «lightseagreen» e «mediumaquamarine» mapeiam.
• Protótipos rápidos. Digitar background: tomato é mais rápido do que escolher um hex de uma roda de cores. As cores nomeadas são padrões surpreendentemente bons para esboçar layouts antes que as cores finais sejam escolhidas.
• Nomeando cores de marca. Se o vermelho da sua marca está próximo de crimson (#dc143c), chamá-lo de «Brand Crimson» internamente é mais memorável que «Red 8».
• Correspondência de amostras. Designers colam uma cor amostrada de uma fotografia ou screenshot e perguntam «de qual cor isto está próximo?» para iniciar uma paleta a partir de uma referência do mundo real.

Erros e surpresas com cores nomeadas CSS

• gray vs grey. CSS aceita ambas grafias, mas a lista X11 originalmente tinha apenas «gray». «grey» foi adicionado depois. lightgray e lightgrey são aliases, mesma cor. Atenha-se a uma grafia em uma base de código.
• Variantes «dark» não são sempre mais escuras que a base. darkgray (#a9a9a9) é na verdade mais claro que gray (#808080), uma peculiaridade histórica famosa da lista X11 que CSS herdou. Mesma armadilha com darkgrey.
• aqua e cyan são a mesma cor. Ambas são #00ffff. CSS inclui ambas como aliases legados. fuchsia e magenta também são idênticas (#ff00ff).
• «orange» é uma cor nomeada CSS mas as variantes «pink» são diferentes. orange = #ffa500. Mas não há um único «pink», CSS tem pink, lightpink, hotpink, deeppink, palevioletred, todas notavelmente diferentes.
• «Cor mais próxima» depende do que seu cérebro pensa que é cor. Duas pessoas amostrando o mesmo chip de tinta podem escolher nomes diferentes. CIEDE2000 captura a percepção média, não a sua. Sempre verifique as amostras visualmente em vez de confiar apenas no número de distância.
• Cores nomeadas são todas sRGB. As cores nomeadas CSS são definidas como triplos sRGB de 8 bits. Em uma tela P3 ou BT.2020, cores vivas como tomato e fuchsia podem parecer mais opacas que o mesmo matiz especificado em color(display-p3 ...). Para protótipos, tudo bem; para produção em hardware moderno, porte para sintaxe wide-gamut.
• Cores nomeadas sozinhas não passam em verificações de acessibilidade. yellow sobre white é ilegível; red sobre black é marginal. O status nomeado de uma cor não diz nada sobre contraste. Sempre empareje uma escolha de cor com uma verificação de contraste WCAG.

Mais perguntas frequentes

Quem realmente escolheu os nomes como «papayawhip» e «peachpuff»?

Nenhuma pessoa única; o arquivo rgb.txt do X11 cresceu através de múltiplos colaboradores no MIT e outros fornecedores Unix no final dos anos 1980. Muitos nomes vieram dos catálogos de tinta Sinclair Paints e outros da época. A nomeação é informal e inconsistente de propósito, colaboradores nomearam cores com base em objetos que tinham em sua mesa ou fora de sua janela. Não havia comitê central. Quando CSS3 adotou a lista X11 em massa em 2014, todas as peculiaridades vieram junto.

Devo usar rebeccapurple em produção?

O suporte do navegador é universal desde 2014, então funciona em todos os lugares. É exatamente equivalente a #663399. Use qualquer nome que leia melhor em seu código; «rebeccapurple» é uma homenagem pequena mas visível em cada página que o usa.

Qual é a diferença entre CIEDE2000 e as fórmulas ΔE mais simples?

ΔE76 (distância euclidiana em CIE Lab) é rápida e dá respostas razoáveis mas subestima diferenças em cores saturadas e superestima em cores escuras. CIEDE2000 adiciona cinco termos de correção (para luminosidade, croma, rotação de matiz e dois termos cruzados) que se ajustam a dados empíricos sobre como as pessoas realmente percebem diferenças de cor. A correção é significativa; o mesmo par de cores pode dar ΔE76 = 4 e ΔE2000 = 2 (veredito perceptual muito diferente). Para «esta cor está próxima o suficiente daquela», use ΔE2000. Para processamento em lote onde a velocidade importa, a distância euclidiana OKLab é uma aproximação rápida.

Posso adicionar meus próprios nomes de cor personalizados?

Não como palavras-chave CSS, a lista de cores nomeadas é fixada pela spec. Mas as Custom Properties CSS (variáveis) te dão a mesma ergonomia: :root { --brand-coral: #ff7f50; } então color: var(--brand-coral). Design tokens são essencialmente essa ideia formalizada, e sistemas de design modernos os usam universalmente.

Meus dados de cor são enviados a algum lugar?

Não. Toda conversão de cor e cálculo de distância executa em seu navegador. Abra a aba Rede no DevTools e escolha uma cor, você verá zero requisições de saída. Seguro para cores de marca não lançadas ou qualquer trabalho de paleta interna.