Encontrador de Cores do Tailwind CSS Encontre a classe de cor CSS do Tailwind mais próxima para qualquer código HEX.
Encontrador de Cores Tailwind
Encontre a classe de cor CSS do Tailwind mais próxima para qualquer código HEX.
Insira sua Cor
Digite um código HEX ou use o seletor de cores.
Visualize as Correspondências
Veja as 10 cores Tailwind CSS mais próximas, classificadas por distância.
Copie o Nome da Classe
Copie o nome da classe de cor do Tailwind (por exemplo, azul-500) para seu projeto.
What Is Encontrador de Cores Tailwind?
O Tailwind CSS Color Finder combina qualquer cor HEX com a cor mais próxima na paleta padrão do Tailwind CSS. O Tailwind inclui 22 famílias de cores (slate, gray, zinc, red, orange, etc.) cada uma com 11 tons (50-950), totalizando 242 cores pré-definidas. Essa ferramenta calcula a distância Euclidiana RGB entre a cor de entrada e todas as cores do Tailwind, classificando os 10 melhores combinações. É inestimável para desenvolvedores que migram designs para o Tailwind, combinam cores de marca com classes do Tailwind ou encontram a classe de utilitário certa do Tailwind para uma especificação de design. Cada combinação mostra um visor visual, o nome da classe do Tailwind (por exemplo, blue-500), o valor HEX real e a métrica de distância para que você possa julgar a qualidade da combinação.
Why Use Encontrador de Cores Tailwind?
-
Pesquisa todas as 242 cores padrão do paleta do Tailwind para encontrar a correspondência mais próxima
-
Comparação visual lado a lado da entrada vs. cor do Tailwind
-
Mostra o nome exato da classe do Tailwind pronto para uso no código
-
A métrica de distância ajuda a julgar a qualidade da correspondência
-
Os 10 principais resultados para escolher a melhor opção
Common Use Cases
Design para Tailwind
Converte cores de design do Figma/Sketch para as classes de utilidade mais próximas do Tailwind.
Integração de Marca
Encontre cores do Tailwind mais próximas das diretrizes da marca para prototipagem rápida.
Migração Legada
Mapeie as cores CSS existentes para equivalentes do Tailwind durante a migração de framework.
Exploração de Cores
Descubra cores do Tailwind semelhantes a uma cor que você gosta para estilização consistente com utilidade em primeiro lugar.
Technical Guide
O finder computa a distância Euclidiana no espaço de cor RGB: D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) entre a cor de entrada e cada uma das 242 cores da paleta padrão do Tailwind. Os resultados são classificados por distância ascendente. Uma distância de 0 significa uma combinação exata. Distâncias abaixo de 20 são combinações muito próximas; acima de 50 significa diferença notável. A paleta do Tailwind é organizada em 22 famílias de cores com 11 tons cada (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). O tom 500 é normalmente a cor "base" de cada família. As cores do Tailwind 3.x são projetadas com uniformidade perceptual em mente, o que significa que etapas iguais de tons (por exemplo, 400 para 500) produzem diferenças de brilho visual aproximadamente iguais em todas as famílias de cores.
Tips & Best Practices
-
1Uma distância inferior a 10 significa que a cor do Tailwind é quase indistinguível da entrada
-
2Se a correspondência mais próxima tiver uma grande distância, considere estender o Tailwind com uma cor personalizada
-
3O formato do nome da classe é "nomeDaCor-sombra" (por exemplo, bg-azul-500, text-vermelho-600)
-
4As cores 500-sombra do Tailwind são a intensidade "padrão" - mais clara é 50-400, mais escura é 600-950
-
5Você pode estender a paleta de cores do Tailwind com cores personalizadas em tailwind.config.js para correspondências exatas
Related Tools
Conversor HEX para RGB
Converta códigos de cor HEX em valores RGB instantaneamente com uma pré-visualização ao vivo.
🎨 Color Tools
Seletor de Cores
Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.
🎨 Color Tools
Paletas de Cores de Marcas
Navegue pelas paletas de cores oficiais de mais de 50 marcas e empresas de tecnologia populares.
🎨 Color Tools
Cores do Material Design
Navegue pela paleta de cores completa do Material Design com todas as sombras e acentos.
🎨 Color Tools
Cor para Variáveis CSS
Converte um conjunto de cores em propriedades personalizadas do CSS (variáveis).
🎨 Color ToolsFrequently Asked Questions
Q E se nenhuma cor do Tailwind for próxima o suficiente?
Q Isso funciona com o Tailwind v4?
Q Qual distância é considerada uma boa correspondência?
About This Tool
Encontrador de Cores Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.