Diseño / Color
Generador de escalas de color de Tailwind
Convierte un color de marca en una paleta completa de Tailwind CSS de 50 a 950, creada en OKLCH como los colores propios de Tailwind, y cópiala como CSS de tema de Tailwind 4, configuración de Tailwind 3 o variables CSS.
Generador de escalas de color de Tailwind: Cada tono adopta la luminosidad, el croma y la ligera variación de matiz que tienen las paletas propias de Tailwind en ese paso, medidos en el espacio de color OKLCH, y los ajusta para que tu color coincida exactamente con ese tono. Los grises siguen las familias de grises de Tailwind. Los colores que la gama sRGB no puede mostrar se adaptan mediante el método de mapeo de gama de CSS Color 4, como hacen los navegadores; la salida de Tailwind 4 conserva los valores OKLCH y los demás formatos usan hexadecimal. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas cotidianas
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Los tonos siguen la variación de luminosidad, croma y matiz de las propias paletas de Tailwind, medida en OKLCH, por lo que una escala creada a partir del blue-500 de Tailwind queda a unas pocas diferencias apenas perceptibles del azul de Tailwind. Los colores fuera del rango sRGB se ajustan mediante el método de mapeo de gama de CSS Color 4.
Usar la escala
Un patrón habitual usa 50–100 para los fondos de la página y las tarjetas, 200–300 para los bordes, 500–600 para los botones y enlaces, 700 para los estados al pasar el cursor y 800–950 para el texto sobre fondos claros. Comprueba las combinaciones de texto y fondo con el comprobador de contraste de color.
Para convertir un color individual entre hex, RGB, HSL y OKLCH, usa el convertidor de color; para empezar a partir de una foto, usa el extractor de paletas de color.
Tailwind 4 y OKLCH
Tailwind CSS 4 define sus colores en OKLCH, que puede describir colores fuera del espacio sRGB en pantallas de gama amplia. El resultado de Tailwind 4 que aparece aquí se mantiene dentro de sRGB, por lo que los colores se ven iguales en todas las pantallas.
Cómo se usa
- Elige un color o pega su código hexadecimal.
- Elige qué tono debe representar, normalmente 500, o deja que el generador lo asigne.
- Copia el código para Tailwind 4, Tailwind 3 o variables CSS sin formato adicional.
Privacidad y límites
Todo se genera en tu navegador.
Herramientas relacionadas
Preguntas frecuentes
¿Por qué OKLCH?
Los pasos iguales de luminosidad en OKLCH se perciben como pasos iguales para el ojo, con cualquier matiz. Por eso, una escala amarilla y una azul creadas de la misma forma tienen un contraste equivalente, algo que HSL no consigue.
¿Qué tono debería tener el color de mi marca?
Normalmente 500 o 600, donde Tailwind mantiene sus colores más intensos. Un color muy claro, como un tono pastel, encaja mejor en 200 o 300; elige Automático para asignarlo según su luminosidad.
¿El texto será legible sobre estos tonos?
Por lo general, el texto blanco necesita 600 o un tono más oscuro, y el texto oscuro 400 o uno más claro, pero comprueba cada combinación con un verificador de contraste.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta