Utilia

Descobrir o nome de uma cor

Descobre o nome de qualquer cor. Introduz um código HEX ou RGB e vê os 5 nomes mais próximos entre mais de 30 000 cores, mais o nome CSS mais próximo.

Como descobrir o nome de uma cor

  1. Escolhe uma cor com Escolher uma cor, ou escreve um valor em Código da cor: um código HEX como #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ou qualquer outra cor CSS.
  2. Da primeira vez, a ferramenta carrega a sua lista de cerca de 32 000 nomes de cores (algumas centenas de kilobytes, uma vez por visita). A partir daí, os resultados aparecem à medida que escreves.
  3. Lê o Nome mais próximo ao lado de A tua cor. Quando o código está exatamente na lista, a indicação diz Correspondência exata.
  4. Mais abaixo, os 5 nomes mais próximos e as Cores CSS com nome mais próximas aparecem com o respetivo código HEX e a distância (ΔE). Usa Copiar nome ou Copiar HEX para ficares com um deles.
  5. Muda Comparar com para comparar com CIEDE2000 (CIELAB) ou Distância OKLab, ou clica em Cor aleatória para explorar.

A cor e a pesquisa ficam no teu navegador.

De onde vêm os nomes

Os nomes vêm do color-name-list, uma coleção open source mantida por David Aerne e muitos colaboradores sob a licença MIT. Reúne cerca de 32 000 nomes únicos tirados de catálogos de tintas, dicionários históricos de cores, da natureza, da cultura pop e de sugestões da comunidade, de «Absolute Zero» a «Zucchini». Cada nome corresponde a exatamente um código HEX. Os nomes estão em inglês: a ferramenta não tem uma lista de nomes de cores em português.

A ferramenta compara também a tua cor com as 148 cores CSS com nome do CSS Color Level 4 (tomato, rebeccapurple, dodgerblue…), que todos os navegadores entendem. Os sinónimos com o mesmo código aparecem juntos, como gray / grey ou aqua / cyan. São estes os nomes a usar numa folha de estilos quando queres algo legível.

Como é escolhida a cor mais próxima

Comparar códigos HEX dígito a dígito não funciona: #808080 e #7F8080 são quase idênticos, mas uma pequena alteração noutro canal pode parecer muito diferente. A ferramenta converte cada cor para um espaço de cor percetual e mede as distâncias aí.

  • CIEDE2000 (CIELAB) é a fórmula de diferença de cor da Comissão Internacional de Iluminação (CIE), usada na impressão e na correspondência de tintas. Corrige a antiga distância CIELAB de acordo com a forma como os nossos olhos avaliam a luminosidade, o croma e a tonalidade, sobretudo nos azuis e nos tons próximos do cinzento. A implementação segue Sharma, Wu e Dalal (2005) e é testada com os dados de referência desses autores.
  • Distância OKLab é a distância em linha reta no OKLab, um espaço moderno concebido para passos percetuais uniformes. É apresentada multiplicada por 100 para se ler numa escala semelhante à do ΔE2000. É mais rápida e costuma concordar com o CIEDE2000; quando discordam, as diferenças são subtis.

Como referência, um ΔE abaixo de 1 é invisível para a maioria das pessoas, entre 1 e 2 é uma diferença muito ligeira quando vista lado a lado, e acima de 5 as cores parecem claramente diferentes. Se o nome mais próximo tiver um ΔE elevado, a tua cor simplesmente fica entre cores com nome.

Ideias para usar nomes de cores

  • Dar nomes a design tokens e amostras de paletas mais simpáticos do que um código.
  • Descrever uma cor num e-mail, numa ficha de produto ou num texto alternativo.
  • Encontrar uma palavra-chave CSS próxima de uma cor de marca para protótipos rápidos.

Perguntas frequentes

Qual é o nome da cor #1E90FF?

O nome CSS é dodgerblue, um azul-celeste vivo, e a grande lista da comunidade chama-lhe «Clear Chill» (correspondência exata). Escreve qualquer outro código para encontrares os nomes mais próximos da mesma forma.

Porque é que alguns nomes são estranhos?

A lista é feita pela comunidade e inclui nomes divertidos inspirados na cultura pop e na natureza. Vê os cinco resultados mais próximos e escolhe o que se adequa ao teu contexto; as cores CSS com nome são as mais padronizadas.

O nome mais próximo corresponde exatamente à minha cor?

Só quando a indicação diz Correspondência exata e o ΔE é 0. Caso contrário, o nome pertence a uma cor vizinha: compara as duas amostras lado a lado.

Que método de comparação devo usar?

O CIEDE2000 é o padrão consolidado da indústria e a opção por omissão. A distância OKLab é uma boa alternativa moderna. Experimenta os dois quando uma cor fica entre dois nomes.

Posso pesquisar pelo nome em vez do código?

Não nesta ferramenta. Podes, no entanto, escrever qualquer um dos 148 nomes de cores CSS em Código da cor, como salmon, e ver os outros nomes próximos.