¿Cómo genero una paleta Tailwind 50-950 desde un único color?
Genera una paleta Tailwind 50-950 desde un único color base, usando OKLCH para una escala de luminosidad perceptualmente uniforme.
Los generadores estándar lo hacen en HSL, lo que produce "el 300 se ve idéntico al 400". Nosotros usamos OKLCH = pasos legibles que cuadran con Tailwind v3 / v4.
Elige tu "anchor": en qué paso se sitúa tu color original (normalmente 500). Exporta como variables CSS o como snippet de config Tailwind.
Cómo usarlo
- Elige un color base: HEX (p. ej. #3b82f6), picker nativo, cuentagotas de pantalla (Chrome/Edge) o uno de los 6 presets de marca.
- Elige un "anchor": en qué paso de Tailwind debe caer tu color original. Por defecto 500. Para colores muy claros elige 200, para muy oscuros 800. El anchor se marca con una estrella (★).
- A la derecha ves la escala completa 50-950. Cada swatch es clicable: copia el HEX. 50-200 para "fondos y bordes sutiles", 300-500 para "estados interactivos principales", 600-950 para "texto y acentos".
- La "Vista previa de contraste" muestra el ratio de contraste de cada swatch con texto blanco (A) y negro (A). Ayuda a decidir qué pasos sirven para botones.
- Dos exportaciones: variables CSS (soltar en globals.css) o un snippet de config Tailwind listo (soltar en tailwind.config.js).
Cuándo es útil
Dónde ayuda el generador de paleta Tailwind - escenarios típicos:
- Brand book → Tailwind: tienes un color de marca (p. ej. #3b82f6 índigo) y necesitas una escala completa para diseño. El generador construye 50, 100, ..., 950 siguiendo la convención de Tailwind.
- Modo oscuro: en Tailwind v4 una paleta OKLCH significa que invertir la escala (50 ↔ 950, 100 ↔ 900) da un modo oscuro razonable.
- Sistema de diseño: paleta completa para N colores de marca + 1 escala de grises = un sistema completo.
- Migración HSL → OKLCH: ¿proyecto antiguo en HSL que migrar a OKLCH? El generador muestra lo que Tailwind v4 produciría desde tu color de marca.
- Educación: compara nuestros swatches basados en OKLCH con los defaults oficiales de Tailwind v3: están muy cerca, porque Tailwind también usa OKLCH desde 2024.
¿Necesitas afinar antes el color base? Usa el conversor de colores para sacar HEX / OKLCH. Elegir pares de acento y neutros es más fácil en la herramienta de armonía de colores, y pasa las combinaciones finales de texto/fondo por el verificador de contraste antes de entregar.