CodeKitHubO que é esta ferramenta?
O Tailwind CSS traz uma escala de cores padrão fixa em vez de deixar você escolher valores arbitrários para cores comuns de interface. Cada uma das 22 famílias nomeadas (como amber ou slate) tem exatamente 11 tons, numerados de 50 a 950, e cada tom tem um único valor hex oficial documentado pelo próprio Tailwind e usado de forma idêntica nos utilitários bg-, text-, border- e ring-.
Esta referência incorpora essa paleta oficial completa localmente, então buscar uma cor ou um nome de classe não exige abrir a documentação do Tailwind, rodar um build, ou passar a classe pelo PurgeCSS só para ver a aparência. As buscas por hex usam distância euclidiana em RGB para encontrar o tom oficial mais próximo, e as buscas por classe são exatas — cada valor aqui corresponde aos valores padrão documentados do Tailwind.
Por que usar?
- Cole um código hex de um arquivo de design ou captura de tela e obtenha instantaneamente o nome de classe do Tailwind mais próximo, em vez de adivinhar a qual tom numerado ele corresponde.
- Digite um nome de classe como slate-900 ou bg-purple-500 para ver seu valor hex e RGB exato sem vasculhar a documentação do Tailwind.
- Navegue pela grade completa de 22 famílias x 11 tons para comparar tons lado a lado antes de escolher um.
- Obtenha as variantes bg-, text-, border- e ring- de qualquer tom com um clique, já que o Tailwind usa a mesma escala numérica em todas elas.
- Grátis, instantânea e totalmente local — sem upload, sem conta, sem etapa de build.
Como usar
- Para encontrar um nome de classe a partir de um código hex: digite ou cole o valor hex (com ou sem #) na caixa de busca — o tom oficial do Tailwind mais próximo aparece acima da grade, junto com a distância de cor se não for uma correspondência exata.
- Para encontrar um valor hex a partir de um nome de classe: digite a classe ou o nome da família (por exemplo, amber-500, bg-blue-600, ou apenas teal) — uma correspondência exata mostra o hex, o RGB e todas as variantes de utilitário; um nome de família sozinho filtra a grade para essa família.
- Para navegar por tudo: deixe a caixa de busca vazia e clique em qualquer amostra da grade — seus detalhes aparecem no painel acima e seu código hex é copiado automaticamente.
- Clique em qualquer um dos botões de variante bg-/text-/border-/ring- no painel de detalhes para copiar esse nome de classe exato.
Exemplo
Entrada
#c4b5fdResultado
violet-300 — Correspondência exata, #C4B5FD, rgb(196, 181, 253)Esse hex é um dos próprios valores padrão documentados pelo Tailwind, então a distância é 0 e a correspondência é exata, não aproximada.
Perguntas frequentes
Essas são as cores padrão oficiais do Tailwind CSS?
Sim — todos os 242 valores hex (22 famílias x 11 tons) vêm da própria paleta padrão documentada pelo Tailwind. O Tailwind v4 representa cores internamente como OKLCH, mas a mesma paleta padrão e seus equivalentes hex documentados permanecem inalterados em relação ao v3, então esses valores são atuais para qualquer uma das versões.
O que significa quando uma busca por hex não é uma correspondência exata?
Se você colar um código hex que não é um dos 242 valores padrão do Tailwind (uma cor de marca personalizada, por exemplo), a ferramenta mostra o tom oficial mais próximo por distância RGB e rotula como "Correspondência mais próxima" com a distância exibida — não será idêntico pixel a pixel à sua entrada, apenas o valor padrão do Tailwind mais próximo.
Por que bg-, text-, border- e ring- usam todos os mesmos números?
O Tailwind aplica uma única escala de cores compartilhada em todas as categorias de utilitário, então bg-amber-500, text-amber-500, border-amber-500 e ring-amber-500 são todos o mesmo valor hex subjacente aplicado a uma propriedade CSS diferente. É por isso que o painel de detalhes mostra as quatro variantes juntas para qualquer tom que você consultar.
Posso buscar um grupo de família como apenas "blue" sem número de tom?
Sim — digitar apenas um nome de família (sem número) filtra a grade para os 11 tons dessa família, para você comparar lado a lado, sem ainda escolher um tom específico.
Isso cobre cores de tema personalizadas do Tailwind que defini na minha configuração?
Não — esta referência cobre apenas a paleta padrão embutida do Tailwind, não cores que você adicionou ou sobrescreveu em um bloco theme.extend.colors do tailwind.config.js ou um bloco @theme do v4. Se seu projeto personaliza a paleta, suas cores realmente renderizadas podem diferir do que é mostrado aqui para o mesmo nome de classe.