Quer descobrir o nome da cor pelo código? Cole o HEX aqui e a ferramenta devolve o nome de cor CSS mais próximo. Faça o teste com as cores da bandeira do Brasil: o verde #009739 volta como "green", o amarelo #FEDD00 como "gold" e o azul #002776 como "navy". Os nomes vêm em inglês, porque são os nomes que o próprio CSS entende, e é assim que eles aparecem em briefing de agência, em handoff no Figma e em conversa com dev. Quando alguém pergunta qual é o nome da cor, você responde com uma palavra em vez de seis dígitos.
O que esta ferramenta faz
O Buscador de Nome da Cor recebe um código de cor HEX e mostra o nome de cor CSS mais próximo, dentro de uma lista de 32 cores nomeadas bem conhecidas (red, tomato, gold, teal, navy, indigo, lavender e companhia). Serve para quando um designer te passa #1B6B45 e você precisa chamar a cor de algo mais fácil de lembrar do que o código, ou quando quer dar um nome a uma cor que está vendo para conseguir explicá-la a alguém.
Roda no seu navegador, resposta instantânea, nenhum dado enviado a servidor.
Como usar
- Digite um código HEX de seis dígitos no campo. Tanto
#1B6B45quanto1B6B45funcionam. Se preferir, clique no quadrado colorido ao lado e escolha a cor no seletor. - Clique em "Buscar nome da cor".
- O resultado mostra o nome CSS mais próximo, uma amostra dessa cor nomeada e o HEX dela. Compare o HEX do resultado com o seu: se forem iguais, a correspondência é exata; se forem diferentes, é uma aproximação.
#1B6B45 não é uma cor CSS nomeada. A mais próxima na lista da ferramenta é "teal" (#008080): um tom aparentado, mas mais azulado e mais claro. Saber o nome mais próximo ajuda a descrever a cor em voz alta ("é um teal, só que mais verde e mais escuro") mesmo quando o HEX não tem nome padrão.
De onde vêm os nomes das cores
Cores nomeadas do CSS. A especificação do CSS define cerca de 140 cores com nome que os navegadores entendem: red, blue, seagreen, tomato, cornflowerblue, papayawhip etc. A maioria foi herdada das cores do sistema X11, que são mais antigas que a própria web. Esta ferramenta compara com 32 das mais comuns, não com as cerca de 140.
Cores X11. O sistema de janelas X11, do Unix, definiu centenas de cores nomeadas no arquivo rgb.txt lá nos anos 1980. O CSS adotou a maioria delas, e é por isso que o CSS tem cores estranhamente específicas como papayawhip e navajowhite.
Pantone, equivalentes de Pantone e cores de marca. Pantone é um sistema proprietário de correspondência de cores usado em gráfica e design de marca. Ele tem seus próprios nomes (Pantone 281C, Pantone 2945C etc.), mas o sistema é licenciado e não está disponível livremente para ferramentas como esta. Existem aproximações, mas legalmente elas não são Pantone.
Como a "cor mais próxima" é calculada
Cores que parecem parecidas ao olho humano nem sempre têm valores RGB parecidos. Por isso, a correspondência de cores mais moderna usa espaços de cor perceptuais, como o CIE Lab, e a métrica Delta E (ΔE), que se aproximam de como o olho percebe diferenças de cor.
Esta ferramenta faz a conta mais simples: a distância euclidiana pura no espaço RGB, sem ponderação perceptual. É rápida e sempre dá o mesmo resultado, e para achar um nome de referência para um HEX de marca resolve bem. Mas às vezes ela escolhe um nome que o seu olho não escolheria. Para correspondência precisa de cor em gráfica ou calibração de tela, use uma ferramenta dedicada e um monitor calibrado.
Usos comuns
Falar de uma cor em voz alta. "Usa o #1B6B45 no botão" é preciso, mas ninguém lembra. "Usa aquele teal escuro no botão" fica na cabeça numa conversa de design. A ferramenta te dá esse apelido.
Documentação e design systems. Nomear cores pela referência padrão mais próxima deixa os design tokens mais fáceis de entender: brand-green ≈ teal na documentação dos seus tokens.
Engenharia reversa de um site. Viu uma cor que você gostou em outro site? Use um seletor de cores para pegar o HEX e passe por esta ferramenta para dar a ela um nome que você consegue pesquisar.
Auditorias de acessibilidade. Num relatório de contraste, um nome ajuda a leitura: "o cinza usado no texto do corpo" fica mais claro do que "#374151". Só confira o resultado antes de copiar: para esse cinza azulado, o vizinho mais próximo na lista é "indigo", o que mostra bem os limites de uma distância RGB pura.
Erros comuns
"Mais próxima" não quer dizer "idêntica". A cor "blue" é #0000FF. Uma cor quase azul (#0010FF) ainda vai aparecer como "blue", mas elas não são iguais. Compare o HEX do resultado com o que você digitou para saber o quanto a correspondência é exata.
Cores de marca normalmente não têm nome CSS. A maioria das paletas de marca é propositalmente única, para ser reconhecível. Não espere que o vermelho da Coca-Cola, o azul Tiffany ou o verde da Microapp correspondam a uma cor CSS nomeada: elas costumam ser definidas só pelo HEX.
Os nomes das cores mudam de sistema para sistema. "Lavender" no CSS é #E6E6FA (bem clarinho). "Lavanda" no mundo das flores ou da moda é bem mais saturada. A busca por nome CSS te dá o padrão da web, não o sentido do dia a dia.
Códigos curtos não funcionam. A ferramenta só aceita HEX de seis dígitos. Um código de três dígitos como #F00 não gera resultado; escreva por extenso (#FF0000).
Ferramentas relacionadas
Para converter qualquer cor entre HEX, RGB, HSL e HSV, use o Conversor de Cores. Para escolher uma cor visualmente num seletor, o Seletor de Cor Hex é a escolha certa. Para montar uma paleta harmônica a partir de uma cor base, veja o Gerador de Paleta de Cores.