Arma un theme de Tailwind
Genera de 50 a 950 desde un color de marca y exporta un snippet de tailwind.config.ts listo para usar.
Generador de escalas de tonos de Tailwind
Ingresa un color base, obtén una escala de tonos completa de 50 a 950. Parte de generador de paletas de color con IA.
Respuesta rápida: Una escala de tonos es un conjunto de variaciones de luminosidad derivadas de un solo color base. En Tailwind CSS, las escalas van de 50 (el más claro) a 500 (base) y llegan a 950 (el más oscuro).
Método
colors: {
'color': {
'50': '#a8f5ff',
'100': '#97e4ff',
'200': '#7ec9ff',
'300': '#62abff',
'400': '#468eff',
'500': '#246bdd',
'600': '#004ebe',
'700': '#0031a0',
'800': '#000d82',
'900': '#000069',
'950': '#0d0050',
}
}Cómo funciona
- 1
Ingresa tu color base
Se convierte en el paso 500 de tu escala.
- 2
Revisa la escala generada
11 tonos, de casi blanco (50) a casi negro (950).
- 3
Copia el resultado
Elige config de Tailwind, variables CSS o JSON.
¿Qué es una escala de tonos?
Una escala de tonos es un conjunto de variaciones de luminosidad derivadas de un solo color base. En Tailwind CSS, las escalas van de 50 (el más claro) a 500 (base) y llegan a 950 (el más oscuro), y cada paso cumple un rol específico: 50 para fondos, 100 a 200 para estados hover, 500 para acciones primarias, 700 a 900 para texto.
Construir escalas perceptualmente uniformes a mano es tedioso. Los mismos pasos numéricos en HSL no producen los mismos pasos visuales. OKLCH, un espacio de color perceptualmente uniforme, resuelve esto: valores iguales de delta-L generan saltos de luminosidad visualmente iguales.
Un generador de escalas de tonos automatiza esto: ingresa un color, obtén una escala completa de 11 pasos con espaciado perceptual uniforme. El resultado queda listo para configuración de Tailwind, propiedades personalizadas de CSS o JSON de design tokens.
Usa el convertidor de hex a RGB para normalizar el color fuente primero, luego recorre la escala con el verificador de contraste WCAG para confirmar que cada paso funcione con texto. Para sistemas multicolor completos y tokens de superficie sincronizados, escalas de tonos y exportaciones Pro.
Casos de uso comunes
Estandariza un design system
Reemplaza hex ad-hoc con una escala perceptualmente uniforme que tu equipo de ingeniería puede extender. Verifica el resultado con el simulador de daltonismo.
Corrige tonos medios apagados
Pasa de sRGB a OKLCH y mira cómo el rango de 400 a 600 deja de verse gris.
Exporta tokens multiplataforma
Exporta CSS, JSON y Tailwind desde una sola fuente para que web y nativo se mantengan sincronizados.
Preguntas frecuentes
Un color, una escala.
Paletta genera escalas coordinadas para cada color de tu paleta, con validación de accesibilidad en cada paso.