CodeKitHub¿Qué es esta herramienta?
Tailwind CSS incluye una escala de colores por defecto fija en lugar de dejarte elegir valores arbitrarios para los colores de interfaz habituales. Cada una de las 22 familias con nombre (como amber o slate) tiene exactamente 11 tonos, numerados del 50 al 950, y cada tono tiene un único valor hex oficial documentado por el propio Tailwind y usado de forma idéntica en las utilidades bg-, text-, border- y ring-.
Esta referencia incorpora esa paleta oficial completa de forma local, así que buscar un color o un nombre de clase no requiere abrir la documentación de Tailwind, ejecutar una compilación, ni pasar la clase por PurgeCSS solo para ver su aspecto. Las búsquedas por hex usan distancia euclídea en RGB para encontrar el tono oficial más cercano, y las búsquedas por clase son exactas — cada valor aquí coincide con los valores por defecto documentados de Tailwind.
¿Por qué utilizarlo?
- Pega un código hex de un archivo de diseño o una captura de pantalla y obtén al instante el nombre de clase de Tailwind más cercano, en lugar de adivinar a qué tono numerado corresponde.
- Escribe un nombre de clase como slate-900 o bg-purple-500 para ver su valor hex y RGB exacto sin buscar en la documentación de Tailwind.
- Explora la cuadrícula completa de 22 familias x 11 tonos para comparar tonos lado a lado antes de elegir uno.
- Obtén las variantes bg-, text-, border- y ring- de cualquier tono con un clic, ya que Tailwind usa la misma escala numérica en todas ellas.
- Gratis, instantánea y totalmente local — sin subir archivos, sin cuenta, sin paso de compilación.
Cómo utilizarlo
- Para encontrar un nombre de clase a partir de un código hex: escribe o pega el valor hex (con o sin #) en el cuadro de búsqueda — el tono oficial de Tailwind más cercano aparece encima de la cuadrícula, junto con la distancia de color si no es una coincidencia exacta.
- Para encontrar un valor hex a partir de un nombre de clase: escribe la clase o el nombre de familia (p. ej. amber-500, bg-blue-600, o simplemente teal) — una coincidencia exacta muestra el hex, el RGB y todas las variantes de utilidad; un nombre de familia solo filtra la cuadrícula a esa familia.
- Para explorar todo: deja el cuadro de búsqueda vacío y haz clic en cualquier muestra de la cuadrícula — sus detalles aparecen en el panel de arriba y su código hex se copia automáticamente.
- Haz clic en cualquiera de los botones de variante bg-/text-/border-/ring- del panel de detalle para copiar ese nombre de clase exacto.
Ejemplo
Entrada
#c4b5fdResultado
violet-300 — Coincidencia exacta, #C4B5FD, rgb(196, 181, 253)Este hex es uno de los valores por defecto documentados del propio Tailwind, así que la distancia es 0 y la coincidencia es exacta, no aproximada.
Preguntas frecuentes
¿Son estos los colores por defecto oficiales de Tailwind CSS?
Sí — los 242 valores hex (22 familias x 11 tonos) provienen de la paleta por defecto documentada oficialmente por Tailwind. Tailwind v4 representa los colores internamente como OKLCH, pero la misma paleta por defecto y sus equivalentes hex documentados no han cambiado respecto a v3, así que estos valores son válidos para cualquiera de las dos versiones.
¿Qué significa que una búsqueda por hex no sea una coincidencia exacta?
Si pegas un código hex que no es uno de los 242 valores por defecto de Tailwind (un color de marca personalizado, por ejemplo), la herramienta muestra el tono oficial más cercano según la distancia RGB y lo etiqueta como "Coincidencia más cercana" junto con la distancia mostrada — no será idéntico pixel a pixel a tu entrada, solo el valor por defecto de Tailwind más próximo.
¿Por qué bg-, text-, border- y ring- usan todos los mismos números?
Tailwind aplica una única escala de color compartida en todas las categorías de utilidad, así que bg-amber-500, text-amber-500, border-amber-500 y ring-amber-500 son todos el mismo valor hex subyacente aplicado a una propiedad CSS distinta. Por eso el panel de detalle muestra las cuatro variantes juntas para cualquier tono que consultes.
¿Puedo buscar un grupo de familia como solo "blue" sin número de tono?
Sí — escribir solo un nombre de familia (sin número) filtra la cuadrícula a los 11 tonos de esa familia para que puedas compararlos lado a lado, sin elegir todavía un tono específico.
¿Cubre esto los colores de tema personalizados de Tailwind que he definido en mi configuración?
No — esta referencia solo cubre la paleta por defecto integrada de Tailwind, no los colores que hayas añadido o sobrescrito en un bloque theme.extend.colors de tailwind.config.js o un bloque @theme de v4. Si tu proyecto personaliza la paleta, tus colores realmente renderizados pueden diferir de lo que se muestra aquí para el mismo nombre de clase.