O que é Identificador de nome de cor?

Digite qualquer valor HEX, RGB ou HSL e receba a cor nomeada mais próxima de uma base com mais de 1.500 nomes. Transforma um código de cor num nome que dá para falar em voz alta, o que ajuda ao escrever documentação de design ou ao discutir uma paleta com um colega.

Os nomes vêm do projeto color-name-list, a mesma base usada em plugins de Figma e extensões de Tailwind. Você digita um valor HEX, troca a entrada para RGB ou HSL e informa os canais, ou escolhe uma amostra no seletor visual. A ferramenta devolve a correspondência mais próxima por distância euclidiana em RGB — exibida em HEX, RGB, HSL, HSV e CMYK — mais dois nomes alternativos, uma pontuação de similaridade e uma verificação de contraste WCAG, assim dá para diferenciar uma combinação quase perfeita de uma aproximação grosseira.

Como usar

1. Passo 1 — Insira um valor de cor em HEX (ex.: #3B82F6), troque a entrada para RGB ou HSL e informe os canais, ou utilize o seletor de cores para escolher visualmente.
2. Passo 2 — A ferramenta encontra instantaneamente a cor nomeada mais próxima, juntamente com a distância exata de correspondência.
3. Passo 3 — Veja o nome da cor, o seu valor HEX exato e uma comparação visual entre a cor inserida e a cor nomeada.

Quando usar

• Batizar uma cor de marca antes de incluí-la no guia de estilo ou design system.
• Traduzir uma cor de captura de tela em um nome que o time de dev consiga procurar.
• Comparar uma amostra de tinta ou tecido com uma paleta web conhecida.

Resultado

Um desenvolvedor insere #4A90D9 e descobre que a cor mais próxima é "Steel Blue" (#4682B4) com 96,2% de similaridade.

Perguntas frequentes

De onde vêm esses nomes de cor?

Do projeto open-source color-name-list, que reúne cerca de 1.500 nomes curados a partir da pesquisa da xkcd, catálogos de fabricantes de tinta e da especificação CSS. Muitas ferramentas de design usam a mesma fonte, então os nomes parecem familiares.

Por que algumas entradas nunca chegam a 100% de similaridade?

Só cores que batem exatamente com uma entrada da lista atingem 100%. O restante recebe o vizinho mais próximo pela distância RGB. Acima de 95% o olho não distingue; abaixo de 85% o nome já está visivelmente fora.

Usa distância RGB ou distância perceptual?

Distância euclidiana em RGB. É rápida e funciona bem para a maioria das cores web, mas pode escolher um nome ligeiramente fora em vermelhos e verdes muito saturados, onde o olho humano percebe diferenças que o modelo RGB não reflete.

Posso inserir HSL, RGB ou HEX direto?

Sim — os três já vêm integrados. Troque a aba de entrada para HEX, RGB ou HSL e digite o valor, ou escolha uma cor no seletor. O cartão de resultado ainda mostra a cor correspondente em HSL, HSV e CMYK para você copiar o formato que precisar.

Por que dois valores HEX bem diferentes retornam o mesmo nome?

A lista é esparsa em algumas regiões do espaço de cor, principalmente neutros opacos e rosas pastel. Quando os dois inputs estão longe de qualquer entrada, vence o mesmo vizinho mais próximo para ambos. A pontuação de similaridade entrega a diferença.

Ferramentas relacionadas