Generador de Escalas de Colores de Tailwind CSS

Generador de Escalas de Colores de Tailwind CSS

Pega un solo color en hex y obtén inmediatamente una paleta completa de 50 a 950 en estilo Tailwind con pasos perceptualmente equilibrados. La escala se construye en el espacio de color OKLCH, por lo que cada punto parece un salto equilibrado de luminosidad para el ojo humano — no solo una caída lineal en RGB o HSL.

Pega el resultado directamente en tu tailwind.config.js, úsalo como propiedades personalizadas en CSS o como variables en SCSS, o exporta el resultado como JSON para tu pipeline de tokens de diseño.

Cómo Usar

1. Elige un color base con el selector de colores o pega un valor en hex como #464aff.
2. Asigna un nombre a la paleta (por ejemplo primary, brand, o accent) — este se convierte en la clave del objeto en el código exportado.
3. Elegir Tailwind v4 (OKLCH) para el moderno oklch() CSS, o Tailwind v3 (hex) para salida clásica en hex.
4. Alternar el punto 950 encendido o apagado, y mover el control de cromatidad hacia arriba o hacia abajo para aumentar o reducir la saturación.
5. Selecciona el formato de exportación — configuración de Tailwind, propiedades personalizadas en CSS, variables en SCSS o JSON — luego copia o descarga el código generado.
6. Haz clic en cualquier tono en la vista previa para copiar su valor en hex a la pestaña de portapapeles.

Características

• Matemáticas perceptuales de OKLCH – Interpola la luminosidad y la cromatidad en el espacio de color OKLCH para que cada paso en el rango de 50 a 950 se vea como un paso equilibrado para el ojo humano.
• Escala completa de 50 a 950 – Genera la paleta completa de 11 puntos, con la opción de omitir el punto extraoscuro 950 si solo necesitas los 10 clásicos.
• Vista previa interactiva de tonos – Ve todos los tonos de una vista, haz clic en cualquier tono para copiar su valor en hex, y ajusta inmediatamente la escala mientras escribes.
• Verificador de contraste WCAG – Cada tono se evalúa contra fondos blancos y negros con insignias de paso AA o AAA.
• Múltiples destinos de exportación – Exporta como tailwind.config.js, :root variables CSS, variables SCSS o tokens de diseño en formato plano.
• Control de aumento de cromatidad – Un control de deslizante escala la saturación en todos los puntos, permitiéndote hacer que el tono sea más brillante o reducirlo sin cambiar el tono.
• Seguro en el gamut – La cromatidad se clava automáticamente en cada nivel de luminosidad para que los valores en hex siempre se rendericen dentro de sRGB.