¿Qué es Buscador de colores Tailwind?

Tailwind Color Finder acepta cualquier valor de color —hex, rgb(), hsl() o un nombre CSS como teal— y encuentra al instante la clase de utilidad de Tailwind CSS más cercana. En lugar de comparar paletas a ojo, pega un valor desde tu herramienta de diseño y obtén el nombre exacto de la clase para usar en tu código.

La coincidencia usa la distancia perceptual ΔE en el espacio CIE Lab, no una resta RGB cruda, así que el resultado se acerca a lo que el ojo considera parecido, no a lo numéricamente cercano. Recorre toda la paleta por defecto de Tailwind v3/v4, todas las familias de slate a rose, tonos del 50 al 950, más negro y blanco. Las diez mejores coincidencias vuelven con su distancia para que decidas entre matiz y luminosidad.

Cómo usar

1. Introduce un código de color hexadecimal de tu maqueta de diseño o selecciona un color usando el selector de colores.
2. La herramienta muestra al instante la clase de color Tailwind CSS más cercana con una comparación visual lado a lado.
3. Copia el nombre de la clase Tailwind (por ejemplo, bg-blue-500) directamente en tu código. Revisa la distancia de color para evaluar la precisión de la coincidencia.

Cuándo usar

• Traducir códigos hex de la marca o de Figma a clases Tailwind en un proyecto nuevo.
• Revisar una hoja de estilos antigua con valores hex sueltos y migrarla a clases utilitarias.
• Elegir el tono semántico más adecuado (red-500 frente a rose-500) cuando solo te pasan un hex.

Resultado

Tu diseñador te entrega el color de marca #2563EB. Pégalo y la herramienta muestra que coincide exactamente con blue-500. Para #3A7BC8, encuentra sky-600 como la coincidencia más cercana con una puntuación de distancia que indica qué tan próximo es.

Preguntas frecuentes

¿Cómo decide la herramienta qué color de Tailwind es el más cercano?

Convierte ambos valores hex a CIE Lab y calcula la ΔE76, una distancia perceptual que aproxima cuán diferentes se ven dos colores. Una ΔE menor a 1 es prácticamente indistinguible; por encima de 5 el cambio de matiz o luminosidad ya se nota.

¿Qué versión de la paleta de Tailwind se utiliza?

La paleta por defecto de v3/v4: 22 familias (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) con tonos del 50 al 950, además de negro y blanco. Los colores personalizados del tema no están incluidos.

¿Por qué mi hex coincide con un tono que no esperaba?

La distancia en Lab combina matiz, saturación y luminosidad. Un verde apagado puede quedar más cerca de un slate que de un teal vivo porque la luminosidad pesa mucho. Si la primera opción no encaja, revisa el top diez y selecciona por familia de matiz.

¿Puedo copiar el resultado como variable CSS en lugar de clase Tailwind?

El panel de detalle muestra tanto el nombre de la clase (bg-blue-500) como el hex correspondiente. Copia el hex y envuélvelo en var(--brand) si usas propiedades CSS personalizadas en lugar de las utilidades directamente. Y cuando nada en la paleta queda lo bastante cerca, la herramienta muestra la clase de valor arbitrario (bg-[#hex]) creada con tu color exacto, para mantener la precisión sin tocar tu tema.

¿Puedo pegar rgb(), hsl() o un nombre de color CSS en vez de hex?

Sí. El campo acepta hex (#2563EB o 2563EB, de 3 o 6 dígitos), rgb()/rgba(), hsl()/hsla() con grados o tono sin unidad, y el conjunto completo de colores con nombre de CSS (teal, rebeccapurple, cornflowerblue, etc.). Los canales alpha se ignoran: la comparación se hace sobre el equivalente RGB opaco.

Herramientas relacionadas