Localizador de nomes de cor CSS

Encontre a palavra-chave CSS mais próxima

O CSS inclui uma longa lista de palavras-chave de cores com nome, desde escolhas familiares como black, white e red até nomes mais específicos como cornflowerblue, papayawhip e mediumseagreen. Este localizador de nomes de cor ajuda a ligar qualquer valor HEX ao nome CSS disponível mais próximo. Introduza uma cor e o navegador compara-a com o mapa de palavras-chave incorporado usando a distância RGB. O nome mais próximo, o seu valor HEX e várias alternativas próximas atualizam-se de imediato.

As cores com nome são úteis para demonstrações rápidas, ensino, documentação e exemplos legíveis. Também ajudam a descrever uma cor a alguém quando tokens exatos não são necessários. No entanto, a lista de cores com nome é limitada e distribuída de forma desigual: há muitos rosas e azuis claros, mas menos tons de marca modernos e precisos, pelo que a palavra-chave mais próxima deve ser vista como uma aproximação e não como uma substituição perfeita do seu código HEX original.

Como funciona a correspondência da cor mais próxima

Cada palavra-chave CSS tem um valor fixo de vermelho, verde e azul. O script converte a sua entrada HEX em RGB e mede a distância ao quadrado até cada cor com nome, comparando os três canais. O nome com a menor distância é mostrado como a correspondência mais próxima. Este método é rápido e previsível, ideal para uma ferramenta do lado do cliente. Não é uma fórmula completa de diferença percetual de cor, pelo que duas cores com distância RGB semelhante nem sempre parecem igualmente próximas ao olho humano.

Quando usar nomes em vez de HEX

Em sistemas de design de produção, HEX, RGB, HSL ou propriedades personalizadas costumam ser melhores do que nomes de cor, porque preservam a intenção exata. Os nomes brilham em exemplos, protótipos rápidos, artigos de blogue e conversas em que a legibilidade importa mais do que a precisão. Se usar uma cor com nome em CSS publicado, teste-a na interface completa como qualquer outro token. A palavra-chave mais próxima pode ainda precisar de uma verificação de contraste antes de ser usada como fundo, cor de texto ou indicador de estado.