Herramientas
Escalas de color para Tailwind
Generador de escalas de color para Tailwind CSS
Genera la escala completa de tonos 50–950 de un color para usarla en Tailwind CSS.
Sobre esta herramienta
Tailwind organiza cada color en una escala de once tonos, del 50 (casi blanco) al 950 (casi negro). Esta herramienta genera esa escala completa a partir del color de tu marca, para que puedas usar clases como bg-primary-100 o text-primary-700 con un resultado coherente. También sirve fuera de Tailwind, para crear los tonos de un sistema de diseño o las variables de color de cualquier web.
Elige el color base con el selector o pega su código HEX, ponle un nombre (por ejemplo, «primary» o «marca») y escoge un modo de generación: Clásico, Desplazamiento de tono, Anclado en blanco y negro, Vivo o Apagado. Verás los once tonos en una franja y en una tabla; haz clic en cualquiera para copiarlo. Abajo tienes tres bloques listos para copiar: variables CSS, variables CSS en OKLCH y el fragmento de configuración de Tailwind.
El cálculo se hace en tu navegador, sin enviar nada a ningún servidor. Los tonos se generan en OKLCH con luminosidades fijas por nivel, así que tu color base no tiene por qué quedar exactamente en el 500: el 500 será un tono de luminosidad media con su mismo matiz. Algunos tonos muy saturados se ajustan al límite de sRGB. La herramienta no mide el contraste entre tonos para accesibilidad.
Preguntas frecuentes
¿Cómo añado un color personalizado a Tailwind?
Copia el bloque «Configuración de Tailwind» y pégalo dentro de theme.extend.colors en tailwind.config.js. En Tailwind v4, pega las variables CSS dentro de @theme cambiando el prefijo a --color-, por ejemplo --color-primary-500.
¿Por qué mi color no aparece exactamente en el tono 500?
Cada nivel tiene una luminosidad fija para que todas las escalas sean coherentes entre sí. Tu color define el tono y la saturación, pero si es muy claro o muy oscuro encajará más cerca del 300 o del 700.
¿Qué modo de generación elijo?
«Clásico» se parece a las paletas por defecto de Tailwind. «Desplazamiento de tono» calienta los claros y enfría los oscuros para un resultado más natural, «Vivo» maximiza la saturación y «Apagado» da tonos discretos para interfaces sobrias.
¿Puedo abrir aquí un color desde otra herramienta?
Sí. El generador de paletas y el extractor de paleta tienen un botón junto a cada color que abre esta página con ese color ya cargado.