Global ToolBox

Localizador de Nome de Cor

Digite uma cor em hex, rgb() ou hsl() e encontre instantaneamente o nome de cor CSS mais próximo, com comparação de amostras ao vivo e algumas alternativas próximas.

🔒 Processado localmente no seu navegador

Loading…

Como usar

  1. Digite uma cor no campo em formato hex, rgb() ou hsl(), ou escolha uma visualmente com a amostra de cor.
  2. O nome de cor CSS mais próximo aparece instantaneamente, com sua própria amostra, nome e código hex exibidos ao lado da sua cor.
  3. Verifique a pontuação de distância para ver o quão próxima é a correspondência — uma distância de 0 significa correspondência exata.
  4. Role a lista abaixo para ver mais alguns dos nomes de cor mais próximos seguintes, classificados do mais perto ao mais longe.

Funcionalidades

  • Aceita os formatos de cor hex, rgb() e hsl(), além de um seletor de cor visual
  • Compara com todas as 148 cores nomeadas padrão do CSS/X11
  • Mostra uma amostra ao vivo lado a lado da sua cor e da cor nomeada correspondente
  • Inclui uma pontuação de distância numérica além de várias alternativas próximas
  • 100% do lado do cliente — suas cores nunca saem do seu navegador

Perguntas frequentes

Como funciona a correspondência de nomes de cor?

Sua cor é convertida para RGB e depois comparada com cada cor nomeada padrão do CSS usando a distância euclidiana entre os valores RGB. A cor nomeada com a menor distância é exibida como a correspondência mais próxima, com as próximas menores exibidas como alternativas.

Com quais nomes de cor a comparação é feita?

O conjunto padrão de 148 palavras-chave de cores estendidas CSS/X11 definidas pelo CSS Color Module — os mesmos nomes que os navegadores reconhecem em CSS, como "tomato", "slateblue" ou "rebeccapurple". É uma lista fixa e conhecida, então uma correspondência exata só é encontrada quando sua cor cai exatamente em uma delas.

Por que os nomes de cor aparecem em inglês mesmo com o site no meu idioma?

Nomes como "Tomato" ou "SlateBlue" são palavras-chave literais do CSS, não texto traduzível — um navegador só entende a grafia em inglês em uma folha de estilo. Por isso permanecem em inglês em todos os idiomas, enquanto o restante da página ao redor é totalmente traduzido.

O que significa a pontuação de distância?

É a distância em linha reta (euclidiana) entre sua cor e a cor nomeada no espaço RGB, onde cada canal varia de 0 a 255. Uma distância de 0 é uma correspondência exata; a distância máxima possível (preto a branco) é cerca de 441. Números menores significam uma correspondência visual mais próxima.

Esta ferramenta armazena ou envia minhas cores?

Não. Toda a análise, correspondência e cálculo de distância acontecem localmente no seu navegador usando JavaScript simples. Nada é enviado a um servidor ou salvo em nenhum lugar.

Ferramentas relacionadas