Como usar: Nome da Cor
- Digite um código HEX (ex.:
#55AAEE) ou qualquer cor CSS, ou use o seletor de cores. - Veja o nome mais próximo e o quão parecida a cor é (ΔE — quanto menor, mais próxima).
- Copie um nome de variável pronto para CSS, SCSS, JavaScript ou Tailwind.
- Para nomear uma paleta inteira, cole várias cores na caixa em massa e copie o bloco
:rootgerado.
Por que nomear cores?
Um código HEX como #55AAEE não diz nada numa revisão de código, mas --cerulean diz. Nomes descritivos de cores tornam os tokens de design legíveis, ajudam designers e desenvolvedores a falar sobre a mesma cor e evitam que variáveis como --blue-2-new-final se espalhem pelo código.
Como funciona a correspondência
A ferramenta compara a sua cor com cerca de 5.000 nomes selecionados manualmente do projeto de código aberto color-names (licença MIT). As distâncias são medidas no espaço de cores perceptualmente uniforme OKLab, então o nome “mais próximo” é o que realmente parece mais semelhante, e não apenas o que tem os números mais próximos. O valor ΔEOK indica o quão próximo ele está: abaixo de cerca de 2 é praticamente indistinguível, entre 2 e 5 é próximo, e acima de 5 o nome é apenas uma descrição aproximada.
Você também vê a palavra-chave CSS oficial mais próxima entre as 148 existentes (como royalblue ou tomato), que pode ser usada diretamente no CSS.
Convenções de nomenclatura para tokens
| Contexto | Convenção | Exemplo |
|---|---|---|
| Propriedade customizada CSS | kebab-case | --ocean-blue |
| Variável SCSS | kebab-case com prefixo | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Chave de tema do Tailwind | kebab-case | bg-ocean-blue |
Nomes descritivos vs. semânticos
Nomes descritivos (azul oceano) são ótimos para uma paleta bruta. Os componentes geralmente devem usar tokens semânticos (--color-primary, --color-danger) que apontam para os descritivos, assim você pode mudar a marca sem renomear tudo. Gere uma escala completa de tons para cada cor base com o Gerador de Cores Tailwind.
Também pesquisado como: descobrir nome da cor, nome da cor hex, que cor é essa, nomes de variáveis css, tokens de design, qual o nome dessa cor.
Ferramentas que combinam com: Nome da Cor
- Extrator de Paleta de Cores de Imagem — Descubra a paleta de cores de qualquer imagem: uma foto, logo, captura de tela ou design.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- CSS Variables para Tailwind — Transforme suas variáveis de cor em :root em um tema do Tailwind com uma única colagem — Tailwind v3 com tailwind.config.js ou v4 com @theme, usando valores literais ou referências var().
- Mixer de Cores — Escolha duas cores e a quantidade de passos para obter cores de transição misturadas uniformemente — perfeitas para gradientes, bordas, gráficos e estados de hover.
Perguntas frequentes
Qual é a cor #008080?
#008080 é Teal — também é uma das palavras-chave oficiais de cor do CSS. Cole qualquer código acima para identificá-la.Esses são nomes oficiais de cores?
tomato) são oficiais no CSS. Os outros nomes vêm de uma lista curada pela comunidade e são rótulos descritivos, não padrões.Quão precisa é a correspondência?
Posso nomear muitas cores de uma vez?
:root resultante. Nomes duplicados recebem um sufixo numérico.