Buscador de colores Tailwind CSS Encuentra la clase de color CSS de Tailwind más cercana para cualquier código HEX.
Buscador de colores Tailwind
Encuentra la clase de color CSS de Tailwind más cercana para cualquier código HEX.
Introduce tu color
Escribe un código HEX o utiliza el selector de colores.
Ver coincidencias
Visualiza las 10 mejores coincidencias de colores Tailwind CSS clasificados por distancia.
Copiar nombre de clase
Copia el nombre de la clase de color Tailwind (p. ej., blue-500) para tu proyecto.
What Is Buscador de colores Tailwind?
El buscador de colores Tailwind CSS coincide con cualquier color HEX al color más cercano en la paleta predeterminada de Tailwind CSS. Tailwind incluye 22 familias de colores (pizarra, gris, cinc, rojo, naranja, etc.) cada una con 11 tonos (50-950), lo que suma un total de 242 colores predefinidos. Esta herramienta calcula la distancia RGB euclidiana entre el color de entrada y cada color de Tailwind, clasificando los 10 mejores coincidencias. Es invaluable para desarrolladores que migran diseños a Tailwind, coinciden con colores de marca en clases de Tailwind o encuentran la clase de utilidad correcta de Tailwind para una especificación de diseño. Cada coincidencia muestra un parche visual, el nombre de la clase de Tailwind (por ejemplo, azul-500), el valor HEX real y la métrica de distancia para que pueda juzgar la calidad de la coincidencia.
Why Use Buscador de colores Tailwind?
-
Busca entre los 242 colores predeterminados de Tailwind para encontrar la mejor coincidencia
-
Comparación visual lado a lado del color introducido vs. el color de Tailwind
-
Muestra el nombre exacto de la clase de Tailwind listo para usar en el código
-
La métrica de distancia ayuda a juzgar la calidad de la coincidencia
-
Los 10 mejores resultados para elegir la mejor opción
Common Use Cases
Diseño a Tailwind
Convierte los colores de diseño de Figma/Sketch en las clases de utilidad más cercanas de Tailwind.
Integración de marca
Encuentra los colores de Tailwind más cercanos a las pautas de la marca para prototipos rápidos.
Migración heredada
Asocia los colores CSS existentes con equivalentes de Tailwind durante la migración del marco.
Exploración de colores
Descubre colores de Tailwind similares a un color que te guste para un estilo de utilidad primero coherente.
Technical Guide
El buscador calcula la distancia euclidiana en el espacio de color RGB: D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) entre el color de entrada y cada uno de los 242 colores de la paleta predeterminada de Tailwind. Los resultados se ordenan por distancia ascendente. Una distancia de 0 significa una coincidencia exacta. Distancias inferiores a 20 son coincidencias muy cercanas; superar 50 significa una diferencia notable. La paleta de Tailwind se organiza en 22 familias de colores con 11 tonos cada uno (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). El tono 500 es típicamente el color "base" de cada familia. Los colores de Tailwind 3.x están diseñados con uniformidad perceptual en mente, lo que significa que los pasos de tono iguales (por ejemplo, 400 a 500) producen diferencias de luminosidad visual aproximadamente iguales en todas las familias de colores.
Tips & Best Practices
-
1Una distancia inferior a 10 significa que el color de Tailwind es casi indistinguible del introducido
-
2Si la mejor coincidencia tiene una gran distancia, considera ampliar Tailwind con un color personalizado
-
3El formato del nombre de la clase es "nombreDelColor-sombra" (p. ej., bg-blue-500, text-red-600)
-
4Los colores de Tailwind 500-sombra son la intensidad "estándar" - más claro es 50-400, más oscuro es 600-950
-
5Puedes ampliar la paleta de colores de Tailwind con colores personalizados en tailwind.config.js para obtener coincidencias exactas
Related Tools
Convertidor de HEX a RGB
Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.
🎨 Color Tools
Selector de colores
Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.
🎨 Color Tools
Paletas de colores de marca
Explora las paletas de colores oficiales de más de 50 marcas y empresas tecnológicas populares.
🎨 Color Tools
Colores de Material Design
Explora la paleta de colores completa de Material Design con todos los matices y acentos.
🎨 Color Tools
Color a Variables CSS
Convierta un conjunto de colores en propiedades personalizadas de CSS (variables).
🎨 Color ToolsFrequently Asked Questions
Q ¿Qué pasa si ningún color de Tailwind es lo suficientemente cercano?
Q ¿Funciona con Tailwind v4?
Q ¿Qué distancia se considera una buena coincidencia?
About This Tool
Buscador de colores Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.