Localizador de nome da cor
Digite um código HEX, RGB ou HSL para descobrir o nome de cor mais próximo, comparar tons parecidos e copiar os valores na hora.
Localizador de nomes de cores
O que é o localizador de nomes de cores?
O localizador de nomes de cores mostra qual nome de cor fica mais próximo quando você informa um código HEX, RGB ou HSL. A ferramenta compara a entrada com os 140 nomes padrão do CSS e com um banco expandido com mais de 1.500 referências para devolver a opção mais útil para design, documentação e comunicação visual.
Ela ajuda bastante quando você tem apenas um código, um tom retirado de uma marca, uma captura de tela ou uma paleta e quer descobrir como chamar essa cor de forma clara. Além do nome mais próximo, você vê os códigos prontos para copiar, o nível de semelhança e cinco alternativas parecidas para continuar refinando a escolha.
Quando vale usar esta ferramenta
- Design e branding – Dar nome a uma cor de marca, campanha ou interface antes de documentar a paleta
- Comunicação com clientes – Explicar um tom com uma referência mais memorável do que apenas um código técnico
- CSS e frontend – Descobrir se existe um nome CSS útil antes de manter só o valor HEX
- Organização de paletas – Comparar cores vizinhas e identificar famílias parecidas em sistemas visuais
- Busca de alternativas – Encontrar tons próximos quando a cor original está bonita, mas ainda não é a ideal
- Aprendizado de nomenclatura – Se familiarizar com nomes de cores usados em web, design e catálogos visuais
Principais recursos
- Entrada em HEX, RGB e HSL – Digite a cor no formato que você já tem ou escolha direto no seletor visual.
- Duas bases de comparação – Alterne entre os nomes CSS padrão e um banco expandido com mais variedade descritiva.
- Nome mais próximo com semelhança – Veja qual cor combina melhor com a entrada e quão perto ela está em termos percentuais.
- 5 sugestões relacionadas – Compare rapidamente outros tons parecidos sem sair da ferramenta.
- Cópia rápida dos códigos – Clique em HEX, RGB ou HSL para copiar o valor escolhido.
- Histórico local automático – As últimas 20 buscas ficam salvas no navegador para consulta rápida.
Como usar o localizador
- Informe a cor – Use o seletor ou digite diretamente um valor HEX, RGB ou HSL.
- Escolha a base – Fique com a base CSS para nomes padrão da web ou use a expandida para achar opções mais descritivas.
- Confira a melhor correspondência – Veja o nome principal, os códigos convertidos e o percentual de semelhança.
- Explore cores parecidas – Clique em qualquer uma das cinco sugestões para trocar a cor instantaneamente.
- Copie e retome depois – Copie o formato desejado e use o histórico para voltar a buscas recentes.
Guia do banco de cores
Cores CSS (140)
São os nomes oficiais definidos pelo padrão da web. Você pode usar termos como gold, coral e slateblue diretamente no CSS, e eles funcionam nos navegadores modernos.
Base expandida (1.500+)
Reúne nomes adicionais inspirados em natureza, comida, gemas, metais, tons pastel, cores neon e outras famílias visuais. É ótima para descrever uma cor com mais nuance, mesmo quando esse nome não pode ser usado como palavra-chave no CSS.
Como a semelhança é calculada
A ferramenta compara a distância entre a cor informada e cada cor da base usando uma aproximação do Delta E. O objetivo é chegar mais perto do que o olho humano percebe do que de uma simples diferença numérica entre valores RGB.
Perguntas frequentes
Qual é a diferença entre as cores CSS e a base expandida?
As cores CSS são os 140 nomes padrão definidos para a web e podem ser usados diretamente em folhas de estilo. Já a base expandida traz muitos nomes adicionais para classificar e descrever cores, mas normalmente você vai aplicar esses resultados usando HEX, RGB ou HSL, e não o nome como palavra-chave CSS.
Como é calculado o percentual de semelhança?
A ferramenta mede a distância entre a cor digitada e cada item do banco. Depois essa distância é convertida em um percentual para facilitar a comparação. Quando o resultado é 100%, a correspondência é exata.
Posso digitar códigos HEX com 3 caracteres?
Sim. Se você informar um HEX curto como F00, a ferramenta expande automaticamente para a versão completa de seis caracteres FF0000. Também não é necessário digitar o símbolo #.
Onde o histórico de pesquisas fica salvo?
O histórico fica armazenado localmente no navegador. Até 20 cores recentes são mantidas para consulta rápida e você pode apagar tudo com o botão de limpeza ou ao remover os dados do navegador.
O seletor de cores não aparece ou não funciona
O seletor nativo depende do navegador e do dispositivo. Se ele não estiver disponível, você ainda pode usar a ferramenta preenchendo os campos HEX, RGB ou HSL manualmente.
De onde vêm os nomes de cores mostrados aqui?
Os nomes CSS vêm do padrão W3C. Os nomes da base expandida reúnem referências comuns em design e catalogação cromática, incluindo termos ligados a materiais, plantas, alimentos, pedras preciosas e famílias de cor.
Ainda não há comentários. Deixe a primeira opinião.