Color HEX a clase de Tailwind
Escribe o elige el color de tu marca. La herramienta lo compara con los 242 colores de la paleta estándar de Tailwind y muestra los más parecidos, con la clase lista para copiar.
Cómo usarCuál es el color de Tailwind más cercano
Disponible en: 
Color HEX a clase de Tailwind: para qué sirve
Quien usa Tailwind CSS y recibe el color de la marca en HEX quiere saber qué color de la paleta estándar se acerca más, para no llenar el código de valores con corchetes.
La herramienta compara tu color con los 242 colores de la paleta de Tailwind 3 (de slate a rose, tonos 50 a 950, más blanco y negro) usando la distancia en el espacio OKLab, que sigue la percepción del ojo. Muestra los cinco más parecidos, con la clase lista, y avisa cuando ninguno se parece lo suficiente.
Cómo usar
- Pega el color en HEX o rgb(), o elígelo en el selector.
- Elige el prefijo de la clase (bg, text, border…).
- Copia la clase del color más cercano o el valor exacto.
Cuándo usar
- Adaptar el color de la marca a un proyecto Tailwind.
- Convertir un diseño de Figma a clases.
- Decidir si vale la pena registrar un color nuevo en el tema.
Preguntas frecuentes
¿Cómo se elige el color más cercano?
Por la distancia de color en el espacio OKLab, que sigue la percepción del ojo humano mejor que comparar los números del RGB. Cuanto menor la distancia, más parecidos los colores.
¿Y si ninguno se parece?
Usa el valor exacto con corchetes, como bg-[#1f6feb], o registra el color de tu marca en el tema (theme.extend.colors en tailwind.config o @theme en Tailwind 4) con un nombre, como brand.
¿La paleta es la de Tailwind 3 o 4?
La comparación usa los valores HEX de la paleta estándar de Tailwind 3. Tailwind 4 definió los mismos colores en OKLCH, con tonos ligeramente más vivos, pero los nombres (blue-600, red-500…) son los mismos.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.