Início >
Blog > Como dar nome a uma cor HEX (e porque isso poupa tempo à equipa)
Como dar nome a uma cor HEX (e porque isso poupa tempo à equipa)
Numa reunião de design ninguém diz "muda para #E11D48" — diz-se "muda para aquele vermelho". O problema é que "aquele vermelho" também podia ser #DC2626 ou #F43F5E. Este guia explora como aproximar um código HEX de um nome de cor reconhecível, e onde isso ajuda (e onde não deve substituir o código exato).
Porque é que um nome de cor ainda importa na era do HEX
Resposta rápidaUm nome de cor como "violeta" ou "coral" funciona como atalho de comunicação verbal — mais fácil de dizer, lembrar e escrever numa mensagem do que um código HEX de seis carateres.
O código HEX é exato, portátil e o formato universal para guardar cor em CSS, design tokens ou ficheiros de design. Mas é péssimo para conversa humana: ninguém memoriza #7C3AED, e escrevê-lo errado numa mensagem rápida (trocar um caráter) muda a cor sem se notar. Um nome aproximado — mesmo que não seja tecnicamente exato — dá às pessoas um ponto de referência comum quase instantâneo.
É por isso que ferramentas de design e sistemas de cor incluem frequentemente um "nome mais próximo" ao lado do código: não substitui o valor exato, mas acelera a comunicação sobre ele.
Como se calcula o nome de cor mais próximo de um HEX
Resposta rápidaCompara-se a cor com uma lista de referência de nomes de cor conhecidos e escolhe-se a entrada cuja distância no espaço de cor é a menor — não precisa de ser uma correspondência exata.
O princípio: existem listas padronizadas de nomes de cor associados a um HEX fixo — por exemplo os 147 nomes de cor CSS/X11 (tomato, slateblue, mediumseagreen, etc.). Para encontrar o nome mais próximo de uma cor arbitrária, calcula-se a distância entre essa cor e cada entrada da lista — normalmente em RGB simples, ou de forma mais precisa num espaço percetivo como LAB, onde a distância numérica se aproxima melhor da diferença que o olho humano perceciona.
A entrada com a menor distância "ganha" e é apresentada como sugestão. Isto significa que a maioria das cores do mundo real não tem um nome exato — apenas uma aproximação razoável. Um roxo ligeiramente mais azulado ou mais rosado do que slateblue continua a ser etiquetado como "slateblue" se for a entrada mais próxima disponível.
Ideia para o futuro: esta funcionalidade — mostrar automaticamente o nome de cor mais próximo por baixo do código HEX e da amostra visual — ainda não está implementada nesta ferramenta, mas é um candidato natural para uma próxima atualização do conversor de cor, já que a maioria da lógica de comparação de cor (distância entre tons) já existe nas funcionalidades de paleta e daltonismo.
Um cenário prático: alinhar cores entre design e desenvolvimento
Imagina uma equipa pequena a rever o protótipo de uma aplicação. O designer escolhe uma cor de destaque no seu editor e vê o código #E11D48. Ao mostrar o ecrã à equipa numa chamada, ninguém vai ler o código em voz alta — alguém diz simplesmente "aquele vermelho-rosado" ou "o vermelho tipo cereja". Se essa etiqueta informal estiver ligada ao HEX exato, a ata da reunião ou o ticket de bug pode registar "ajustar o vermelho-cereja para 4,5:1 de contraste" sem perder a precisão, porque o código continua disponível ao lado.
Este tipo de etiqueta também ajuda a nomear variáveis de design mais legíveis — --color-cherry em vez de --color-e11d48 — o que torna um ficheiro CSS ou um sistema de tokens mais fácil de ler à primeira vista, mesmo sabendo que o nome é apenas uma aproximação amigável do valor real.
Onde um nome de cor aproximado não deve ser usado
Um nome de cor é uma etiqueta de conveniência, não uma especificação. Para produção gráfica, impressão ou conformidade rigorosa com uma marca, o código HEX exato (ou melhor ainda, uma referência Pantone com perfil ICC) continua a ser a única fonte de verdade. Duas cores de marca visivelmente diferentes podem, por coincidência, aproximar-se do mesmo nome de referência da lista — o que tornaria o nome enganador se fosse usado como identificador único.
Em resumo: usa o nome para conversas rápidas e documentação informal; usa sempre o HEX (ou o token de design) para qualquer decisão que exija exatidão.
Perguntas frequentes
Porque é que preciso de um nome para uma cor se já tenho o código HEX?
O código HEX é preciso mas não é memorável — ninguém se lembra de #7C3AED numa conversa. Um nome aproximado como 'violeta' ou 'roxo médio' funciona como atalho verbal entre design, desenvolvimento e cliente, especialmente em reuniões ou tickets onde reescrever o código todas as vezes é impraticável. O nome não substitui o HEX exato; serve apenas de referência rápida.
Como se determina o nome de cor mais próximo de um HEX?
O método mais comum é comparar a cor introduzida com uma lista de referência de nomes de cor (por exemplo, os 147 nomes de cor padrão do CSS/X11) e calcular qual delas tem a menor distância no espaço de cor — normalmente medida em RGB ou num espaço percetivo como LAB. A cor da lista com a distância mais pequena é apresentada como o nome mais próximo, mesmo que não seja uma correspondência exata.
Um nome de cor aproximado é o mesmo que uma correspondência Pantone?
Não. Um nome de cor como 'slateblue' é apenas um rótulo de conveniência associado a um único HEX de referência CSS/X11; um código Pantone é parte de um sistema de correspondência de tinta física, licenciado e calibrado para impressão. Se precisares de uma cor exata para produção gráfica, o nome aproximado serve só como ponto de partida da conversa, não como especificação final.
Em que situações um nome de cor aproximado é mais útil do que o próprio HEX?
É útil em comunicação verbal ou informal: descrever um erro visual num relatório de bugs ('o botão ficou verde-azulado em vez de verde'), documentar rapidamente uma paleta em notas de reunião, ou dar um nome legível a variáveis de design (--color-coral em vez de --color-ff7f50). Para especificações técnicas exatas, o HEX ou o token de design continuam a ser a referência principal.
Um nome de cor aproximado pode enganar sobre o tom real da cor?
Sim, é preciso ter cuidado: como o algoritmo escolhe apenas o nome mais próximo de uma lista limitada, cores intermédias ou muito específicas de marca podem receber um nome que não capta nuances importantes (por exemplo, dois roxos visivelmente diferentes podem ambos aproximar-se do mesmo nome de referência). Por isso o nome deve ser tratado como uma etiqueta aproximada, e o HEX exato como a fonte de verdade.
Experimenta o Conversor de cor
Converte entre HEX, RGB, HSL, HSV e CMYK, verifica o contraste WCAG e gera paletas complementares — tudo gratuito, no navegador.
Experimentar o Conversor de cor →
Nota sobre metodologia: os exemplos e cenários descritos neste artigo (nomes de cor, situações de equipa) são ilustrativos e hipotéticos, criados apenas para explicar o conceito. Não representam dados reais de nenhuma empresa. A funcionalidade de deteção automática do nome de cor mais próximo é mencionada como possível melhoria futura e não está atualmente implementada na ferramenta.