Buscador de Colores Tailwind

¿Qué es un Buscador de Colores Tailwind?

Tailwind CSS incluye una paleta de colores predeterminada con 22 familias de colores, cada una con 11 tonos del 50 (más claro) al 950 (más oscuro). Eso te da 242 colores predefinidos con nombres de clase como bg-indigo-500 o text-red-400. Cuando tienes un valor HEX o RGB de un archivo de diseño y necesitas encontrar la clase Tailwind más cercana, un buscador de colores Tailwind calcula la distancia entre tu valor de entrada y cada color de la paleta, y devuelve las mejores coincidencias.

El proceso de coincidencia convierte tanto tu color de entrada como cada color Tailwind a tripletas RGB, y luego calcula la distancia euclídea en el espacio de color 3D: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). El color Tailwind con la menor distancia es la coincidencia más cercana. Si la distancia es cero, tu valor de entrada corresponde exactamente a un tono predeterminado de Tailwind.

Esto es diferente de un convertidor de colores general o un buscador de nombres de color. Un convertidor cambia formatos (HEX a HSL, RGB a CMYK). Un buscador de nombres coincide con los 148 colores con nombre de CSS. Un buscador de colores Tailwind coincide específicamente con la paleta predeterminada de Tailwind CSS y devuelve nombres de clase que puedes pegar directamente en tu marcado.

¿Por qué usar este Buscador de Colores Tailwind?

Comparar manualmente un valor HEX contra 242 tonos Tailwind implica recorrer la documentación o los archivos de configuración. Esta herramienta ejecuta el cálculo de distancia para cada tono y muestra las mejores coincidencias ordenadas por proximidad, con sus valores HEX exactos y nombres de clase Tailwind listos para copiar.

Casos de uso del Buscador de Colores Tailwind

Paleta de colores predeterminada de Tailwind CSS

Tailwind CSS v3 incluye 22 familias de colores. Cada familia tiene 11 tonos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950. El tono 500 se considera la base de cada familia. La tabla a continuación lista cada familia con sus valores HEX más claro (50) y más oscuro (950).

Paleta de colores: Tailwind v3 vs v4

Tailwind CSS v4 cambia cómo se definen los colores, pero mantiene los mismos nombres de paleta predeterminada y números de tono.

Ejemplos de código

Encuentra el color Tailwind más cercano de forma programática usando la distancia euclídea en el espacio RGB. Cada ejemplo recibe una cadena HEX y devuelve el nombre de clase Tailwind más cercano de la paleta predeterminada.

// 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

Preguntas frecuentes