O que é Localizador de cores Tailwind?

O Tailwind Color Finder aceita qualquer valor de cor —hex, rgb(), hsl() ou um nome CSS como teal— e devolve na hora a classe utilitária Tailwind CSS mais próxima. Em vez de comparar paletas no olho, cole um valor da sua ferramenta de design e receba o nome exato da classe pronto para o código.

A comparação usa a distância perceptual ΔE no espaço CIE Lab e não uma subtração de RGB, então o resultado se aproxima do que o olho realmente vê como semelhante, não do que é numericamente próximo. Toda a paleta padrão do Tailwind v3/v4 é percorrida, todas as famílias de slate até rose, tons de 50 a 950, além de preto e branco. Os dez melhores voltam com a distância para você equilibrar matiz e luminosidade.

Como usar

1. Insira um código de cor hexadecimal do seu mockup de design ou escolha uma cor usando o seletor de cores.
2. A ferramenta mostra instantaneamente a classe de cor Tailwind CSS mais próxima com uma comparação visual lado a lado.
3. Copie o nome da classe Tailwind (ex.: bg-blue-500) diretamente para o seu código. Veja a distância de cor para avaliar a precisão da correspondência.

Quando usar

• Converter códigos hex da marca ou do Figma em classes do Tailwind em um projeto novo.
• Revisar uma folha de estilos antiga com hex avulso e migrar para classes utilitárias.
• Escolher o tom semântico mais adequado (red-500 vs rose-500) quando o designer só passou um hex.

Resultado

Seu designer entrega a cor da marca #2563EB. Cole-a e a ferramenta mostra que corresponde exatamente a blue-500. Para #3A7BC8, encontra sky-600 como a correspondência mais próxima, com uma pontuação de distância indicando a proximidade.

Perguntas frequentes

Como a ferramenta decide qual cor do Tailwind é a mais próxima?

Converte ambos os valores hex para CIE Lab e calcula a ΔE76, uma distância perceptual que aproxima a sensação de quanto dois tons diferem. ΔE abaixo de 1 é praticamente indistinguível; acima de 5 já se percebe deslocamento de matiz ou luminosidade.

Qual versão da paleta do Tailwind é usada?

A paleta padrão v3/v4: 22 famílias (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) nos tons de 50 a 950, além de preto e branco. Cores personalizadas do tema não entram na busca.

Por que meu hex casou com um tom inesperado?

A distância em Lab combina matiz, saturação e luminosidade. Um verde apagado pode ficar mais perto de um slate que de um teal vivo porque a diferença de luminosidade pesa muito. Se a primeira opção não combinar, abra o top dez e selecione pela família de matiz.

Posso copiar o resultado como variável CSS em vez de classe do Tailwind?

O painel de detalhes mostra tanto o nome da classe (bg-blue-500) quanto o hex correspondente. Copie o hex e envolva em var(--brand) se você trabalha com propriedades CSS customizadas em lugar de utilidades. E quando nada na paleta fica perto o suficiente, a ferramenta mostra a classe de valor arbitrário (bg-[#hex]) criada com sua cor exata, mantendo a precisão sem mexer no seu tema.

Posso colar rgb(), hsl() ou um nome de cor CSS em vez de hex?

Sim. O campo entende hex (#2563EB ou 2563EB, com 3 ou 6 dígitos), rgb()/rgba(), hsl()/hsla() com graus ou matiz sem unidade, e todo o conjunto de cores nomeadas do CSS (teal, rebeccapurple, cornflowerblue e por aí). Canais alpha são ignorados — a comparação roda no equivalente RGB opaco.

Ferramentas relacionadas