Localizador de Cores Tailwind

O Que É um Localizador de Cores Tailwind?

O Tailwind CSS inclui uma paleta de cores padrão com 22 famílias de cores, cada uma contendo 11 tonalidades que vão de 50 (mais clara) a 950 (mais escura). Isso resulta em 242 cores predefinidas com nomes de classe como bg-indigo-500 ou text-red-400. Quando você tem um valor hex ou RGB de um arquivo de design e precisa encontrar a classe Tailwind mais próxima, um localizador de cores Tailwind calcula a distância entre sua entrada e cada cor da paleta, retornando as melhores correspondências.

O processo de correspondência funciona convertendo tanto a cor de entrada quanto cada cor Tailwind em triplas RGB, depois calculando a distância euclidiana no espaço de cores 3D: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). A cor Tailwind com a menor distância é a correspondência mais próxima. Se a distância for zero, sua entrada corresponde exatamente a uma tonalidade padrão do Tailwind.

Isso é diferente de um conversor de cores geral ou de um localizador de nomes de cores. Um conversor muda formatos (hex para HSL, RGB para CMYK). Um localizador de nomes compara com as 148 cores nomeadas do CSS. Um localizador de cores Tailwind compara especificamente com a paleta padrão do Tailwind CSS, retornando nomes de classe que você pode colar diretamente no seu código.

Por Que Usar Este Localizador de Cores Tailwind?

Comparar manualmente um valor hex com 242 tonalidades Tailwind significa percorrer documentação ou arquivos de configuração. Esta ferramenta executa o cálculo de distância para cada tonalidade e exibe as melhores correspondências ordenadas por proximidade, com seus valores hex exatos e nomes de classe Tailwind prontos para copiar.

Casos de Uso do Localizador de Cores Tailwind

Paleta de Cores Padrão do Tailwind CSS

O Tailwind CSS v3 inclui 22 famílias de cores. Cada família possui 11 tonalidades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950. A tonalidade 500 é considerada a 'base' de cada família. A tabela abaixo lista cada família com seus valores hex mais claro (50) e mais escuro (950).

Paleta de Cores Tailwind v3 vs v4

O Tailwind CSS v4 muda como as cores são definidas, mas mantém os mesmos nomes de paleta padrão e números de tonalidade.

Exemplos de Código

Encontre a cor Tailwind mais próxima programaticamente usando distância euclidiana no espaço RGB. Cada exemplo recebe uma string hex e retorna o nome da classe Tailwind mais próxima da paleta padrão.

// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)

import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)

# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

Perguntas Frequentes