Construir una paleta de colores OKLCH que Tailwind v4 realmente quiera implica dos cambios respecto al método anterior: tus tonos viven en el espacio de color OKLCH (no en hex), y tus colores de marca se definen en CSS dentro de un bloque @theme en lugar de una configuración de JavaScript. Haz ambas cosas y obtendrás una escala de 50 a 900 donde cada paso se ve uniformemente espaciado, tus oscuros se mantienen ricos en lugar de embarrados, y tus tintes más claros no se vuelven neón lavado. Esta guía recorre todo el proceso, desde elegir un tono de marca hasta pegar variables en @theme.
La mayoría de los generadores de paletas aún te dan códigos hex y se detienen ahí. Eso funcionaba para Tailwind v3. En v4, el sistema de color predeterminado se reconstruyó sobre OKLCH, por lo que pegar hex de nuevo desecha exactamente lo que hace que la nueva paleta se sienta equilibrada. A continuación verás por qué OKLCH evita el clásico problema de "700 embarrado, 100 neón", cómo la luminosidad, el croma y el tono se asignan a una escala, y la sintaxis exacta de @theme para implementarlo.
Por qué Tailwind v4 cambió a OKLCH#
Tailwind v4 incluye toda su paleta predeterminada en OKLCH y espera que tus colores personalizados sigan el mismo formato. OKLCH significa Luminosidad, Croma, Tono, con un alfa opcional. Es un espacio de color perceptual uniforme, lo que significa que un cambio en el número de luminosidad se percibe visualmente igual sin importar el tono en el que te encuentres.
Esto suena académico hasta que lo comparas con los espacios que usábamos antes. Hex y HSL no son perceptual uniformes. En HSL, un "50% de luminosidad" en amarillo se ve mucho más brillante que un "50% de luminosidad" en azul, por lo que una paleta construida escalando uniformemente la luminosidad HSL resulta desequilibrada. Algunos tonos se ven demasiado oscuros, otros demasiado pálidos, y nada se alinea entre colores.
Idea clave: OKLCH separa el brillo de un color de su tono. Escala la luminosidad de manera uniforme y los tonos se sienten espaciados de forma equitativa, ya sea el color limón o azul marino.
Lo que OKLCH soluciona en la práctica#
Dos modos de fallo desaparecen cuando trabajas en OKLCH:
- Oscuros embarrados: En HSL, oscurecer un color saturado a menudo lo arrastra hacia el gris o el marrón. OKLCH te permite reducir la luminosidad mientras mantienes el croma, por lo que un tono 700 u 800 sigue siendo una versión rica y reconocible del color de marca, no un lodo.
- Colores neón: Los tintes HSL cercanos al blanco pueden disparar la saturación aparente y verse radiactivos. Los tintes OKLCH se mantienen suaves y controlados porque el croma se gestiona independientemente de la luminosidad.
El bonus de la gama más amplia#
OKLCH también puede describir colores fuera del antiguo rango sRGB. En pantallas modernas que soportan la gama P3 (la mayoría de los teléfonos y portátiles recientes), los colores de Tailwind v4 se renderizan más vívidos que los equivalentes sRGB, y luego retroceden elegantemente en pantallas más antiguas. Obtienes colores más ricos sin costo en hardware capaz sin romper nada en el resto. Por eso los colores de gama P3 importan para el trabajo de marca en 2026: el mismo CSS se ve más intenso donde puede y seguro en todas partes.
Cómo se asignan la luminosidad, el croma y el tono a una escala de 50 a 900#
Una escala de colores de Tailwind va de 50 (el tinte más claro) a 950 (el tono más oscuro), y el color de la marca suele estar en 500. El truco para una escala OKLCH limpia es entender cuál de los tres canales se mueve en cada paso y cuál se deja mayormente igual.
Este es el modelo mental:
| Canal | Qué controla | Cómo se mueve de 50 a 950 |
|---|---|---|
| Luminosidad (L) | Qué tan brillante se ve el color, de 0 a 1 | Máxima en 50 (alrededor de 0.97), mínima en 950 (alrededor de 0.25). Esto hace la mayor parte del trabajo. |
| Croma (C) | Intensidad / saturación del color | Mínima en los extremos (tintes y oscuros), alcanza su punto máximo en el rango medio (400-600). |
| Tono (H) | El ángulo real del color, de 0 a 360 | Se mantiene casi constante. Pequeños cambios añaden realismo pero son opcionales. |
La regla más importante: la luminosidad debe aumentar en incrementos aproximadamente uniformes. Si tu 500 está cerca de L 0.65, tu escala podría ser algo como 0.97, 0.94, 0.89, 0.82, 0.74, 0.65, 0.55, 0.45, 0.37, 0.30 de 50 a 900. Un espaciado uniforme en L es lo que hace que las muestras se sientan como un verdadero degradado en lugar de muestras aleatorias.
El croma es una curva, no una línea#
El error que comete la gente es mantener el croma plano en toda la escala. Eso produce tintes lavados y oscuros sobresaturados. Las paletas reales y agradables usan un arco de croma:
- Tintes (50-200): croma bajo. Un tinte casi blanco con croma alto se ve artificial, así que redúcelo.
- Núcleo (400-600): croma máximo. Aquí es donde el color de la marca es más vívido.
- Sombras (700-950): el croma disminuye nuevamente, en parte porque los colores oscuros no pueden mantener un croma alto sin salirse de la gama.
Imagina el croma subiendo desde el tinte más claro hasta un pico alrededor de 400-500, luego bajando suavemente hacia el tono más oscuro. Ese arco es la diferencia entre una escala que parece diseñada y una que parece generada.
Tono: déjalo mayormente igual#
Para una escala limpia y moderna, mantén el tono constante en los once pasos. Si quieres un acabado más refinado, puedes ajustar el tono unos pocos grados, una técnica llamada desplazamiento de tono, para imitar cómo se comportan los pigmentos reales (las sombras se vuelven más frías, los reflejos más cálidos). Es opcional y fácil de exagerar, así que comienza con un tono constante y añade cambios sutiles solo si la versión plana se siente sin vida.
Cómo crear una paleta OKLCH para Tailwind v4#
Puedes calcularlo a mano, pero es complicado y es fácil equivocarse en la curva de croma. La ruta más rápida y fiable es generar la escala a partir de un solo color de marca y luego pegar los valores OKLCH en tu hoja de estilos. Aquí tienes el procedimiento completo.
Paso 1: Elige tu color de marca como ancla 500#
Empieza con un color, el que representa tu marca, y trátalo como el paso 500. No empieces desde el extremo más claro ni más oscuro; el tono medio es el ancla del que deriva todo lo demás. Si solo tienes un código hexadecimal de un logotipo, no pasa nada, lo convertirás. Abre el generador de paletas de colores gratuito, introduce tu hexadecimal o elige un tono, y conviértelo en tu 500.
Paso 2: Genera la escala completa de 50 a 900 en OKLCH#
Desde el ancla 500, genera los pasos circundantes. Un buen generador hace el escalado de luminosidad y el arco de croma por ti, así obtienes tintes suaves y sombras ricas. Confirma que la salida está en OKLCH, no en hexadecimal. Quieres valores como oklch(0.65 0.18 250), tres números para luminosidad, croma y tono. Si una herramienta solo te da hexadecimal, está generando salida de Tailwind v3 y perderás el beneficio.
Paso 3: Verifica la escala visualmente#
Mira las muestras en orden. Dos pruebas rápidas:
- ¿Los pasos se sienten espaciados uniformemente, sin un salto repentino donde un tono parezca mucho más cercano a su vecino que el resto?
- ¿Los oscuros siguen siendo claramente tu color de marca, y los tintes son suaves en lugar de neón?
Si un paso se ve mal, casi siempre es un problema de espaciado de luminosidad o un valor de croma que no disminuyó. Ajusta ese paso en lugar de reconstruir toda la escala.
Paso 4: Convierte cada paso en una variable CSS#
Tailwind v4 lee los colores de las propiedades personalizadas CSS. Nómbralas con la convención --color-brand-50 hasta --color-brand-950. El prefijo --color- es lo que le indica a Tailwind que genere utilidades coincidentes. Cada variable contiene un valor OKLCH:
:root {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Observa la columna de croma: sube a 0.18 en 500 y luego disminuye en ambas direcciones. Eso es el arco en acción.
Paso 5: Integra la escala en el bloque @theme#
Esta es la parte realmente nueva en v4. En lugar de editar tailwind.config.js, declaras los colores del tema en CSS dentro de un bloque @theme, directamente en tu hoja de estilos principal:
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Como los nombres empiezan con --color-, Tailwind genera automáticamente las utilidades: bg-brand-500, text-brand-700, border-brand-200, etc., además del valor brand correspondiente en sintaxis arbitraria. Sin configuración JS, sin plugin, sin necesidad de reinicio más allá de la reconstrucción normal del desarrollo.
Advertencia: las variables que definen tus tokens de diseño deben estar dentro de
@theme, no en un bloque:rootsimple, si quieres que Tailwind genere utilidades a partir de ellas. Una variable:rootes solo una variable CSS normal que Tailwind ignora. Usa@themepara tokens,:rootsolo para valores únicos en tiempo de ejecución.
Paso 6: Usa las utilidades y verifica en una pantalla real#
Aplica las clases y comprueba el resultado en un dispositivo real, idealmente uno con pantalla P3 y otro sin ella. Los colores deben verse vívidos en la pantalla de amplia gama y correctos (no rotos) en la pantalla sRGB. Si soportas modo oscuro, puedes redefinir las mismas variables dentro de un @theme con ámbito en tu selector oscuro, intercambiando qué extremo de la escala se asigna a tus superficies.
OKLCH vs Hex: ¿Qué cambia realmente en tu flujo de trabajo?#
Para los desarrolladores que vienen de v3, el cambio puede parecer un trámite extra. No lo es, una vez que ves el beneficio. Aquí está el antes y después honesto.
| Aspecto | Tailwind v3 (hex/HSL) | Tailwind v4 (OKLCH) |
|---|---|---|
| Dónde viven los colores | tailwind.config.js (JavaScript) | Bloque @theme en CSS |
| Formato de color | Hex o HSL | OKLCH (L, C, H) |
| Uniformidad de escala | Ajuste manual, a menudo desigual | Pasos de luminosidad uniformes y equilibrados |
| Tonos oscuros | Tienden a volverse turbios | Se mantienen ricos con baja luminosidad |
| Gama amplia | Solo sRGB | Gama P3 en pantallas compatibles |
| Editar un tono | Recalcular hex a mano | Ajustar un número (L, C o H) |
La ventaja del día a día es la última fila. ¿Quieres un 600 un poco más vibrante? Aumenta su croma en 0.02. ¿Quieres toda la escala un poco más clara? Añade 0.02 a cada valor de luminosidad. Como los canales son independientes y perceptuales, pequeños cambios numéricos producen cambios visuales predecibles, en lugar de la prueba y error que haces con hex.
Cuándo todavía necesitas hex#
Algunos destinos no hablan OKLCH aún: ciertos clientes de correo, herramientas de diseño antiguas, algunas plataformas nativas. Para esos, exporta un fallback hex junto con tu tema OKLCH. Tailwind v4 maneja el fallback del navegador automáticamente para navegadores modernos, pero si estás entregando colores a una superficie que no es CSS, mantén una hoja hex convertida. Un buen generador te da ambas representaciones desde el mismo color fuente para que nunca se desvíen.
Combinación con otros tokens de tema#
Una paleta rara vez se usa sola. Una vez que la escala de tu marca está en @theme, el mismo patrón se extiende al resto de las variables de color del tema: neutros, colores semánticos (éxito, advertencia, peligro) y superficies. Construye cada uno como su propia escala OKLCH con el mismo ritmo de luminosidad, y todo tu sistema se mantendrá visualmente coherente porque cada color comparte el mismo espaciado perceptual.
Si tu diseño también utiliza degradados o efectos en capas, defínelos a partir de los mismos tokens OKLCH para que los puntos finales del degradado coincidan exactamente con tu paleta. Una forma rápida de prototipar paradas de degradado que se alineen con tu escala de marca es el generador de degradados CSS, que permite previsualizar combinaciones antes de asignarlas a un token. Y cuando necesites exportar la marca resultante o una muestra como activo, el convertidor de SVG a PNG transforma una exportación vectorial en un archivo raster para diapositivas o redes sociales.
Para el aspecto conceptual de elegir los tonos base correctos antes de usar un generador, el tutorial sobre un generador de paletas de colores para diseño de marca cubre reglas de armonía y contraste de accesibilidad, que se complementan naturalmente con los mecanismos OKLCH aquí.
Conclusión#
Una paleta de colores OKLCH para Tailwind v4 no es solo un cambio de formato; es una mejor manera de pensar en el color. Ancla tu color de marca en 500, escala la luminosidad uniformemente de 50 a 950, arquea el croma hacia el medio y de regreso, mantén el tono casi constante, luego declara toda la escala como variables --color-marca-* dentro de un bloque @theme. Haz eso y obtendrás tonos equilibrados, vibrantes y sin turbidez, además de la riqueza P3 gratuita en pantallas modernas. Genera la escala, pégala en @theme y despliega.
Preguntas Frecuentes#
¿Qué es OKLCH y por qué Tailwind v4 lo usa? OKLCH es un espacio de color perceptual uniforme definido por Luminosidad, Croma y Tono. Tailwind v4 lo adoptó porque escalonar uniformemente la luminosidad produce tonos que se ven espaciados de manera uniforme al ojo humano, algo que el hex y HSL no pueden lograr. El resultado son escalas 50-950 equilibradas con oscuros ricos y tintes suaves, en lugar de extremos turbios o neón.
¿Dónde defino colores personalizados en Tailwind v4?
Dentro de un bloque @theme en tu CSS, no en un archivo de configuración JavaScript. Declara cada tono como una propiedad personalizada como --color-brand-500: oklch(0.65 0.18 250);. Como los nombres comienzan con --color-, Tailwind genera automáticamente utilidades como bg-brand-500 y text-brand-700. Las variables simples en :root no generan utilidades, así que usa @theme para tokens de diseño.
¿Cómo se asignan luminosidad, croma y tono a una escala 50-900? La luminosidad hace la mayor parte del trabajo: más alta en 50, más baja en 950, escalonada en incrementos uniformes. El croma sigue un arco, bajo en los extremos de tinte y sombra, y alcanza su punto máximo alrededor de 400-600 donde el color es más vívido. El tono se mantiene casi constante en toda la escala, con solo pequeños cambios opcionales para mayor realismo.
¿Por qué mis tonos oscuros basados en hex se ven turbios pero los de OKLCH no? En flujos de trabajo HSL y hex, oscurecer un color saturado a menudo lo arrastra hacia el gris o marrón porque la luminosidad y la saturación están entrelazadas. OKLCH las separa, por lo que puedes reducir la luminosidad para un tono 700 u 800 mientras mantienes el croma, manteniendo el color como una versión rica y reconocible de tu marca en lugar de un lodo.
¿Todavía necesito valores de color hex con Tailwind v4? Para la web, no: los navegadores modernos leen OKLCH y Tailwind maneja los fallbacks. Puede que aún necesites hex para destinos que no soportan OKLCH, como algunos clientes de correo, herramientas de diseño antiguas o plataformas nativas. Genera ambos desde el mismo color fuente para que las representaciones nunca se desvíen.
¿Puedo generar una escala OKLCH de Tailwind automáticamente?
Sí. Un generador de paletas que produzca OKLCH manejará el escalonamiento uniforme de luminosidad y el arco de croma a partir de un solo color de marca, y luego te dará las líneas --color-brand-* para pegar en @theme. Esto es más rápido y confiable que calcular cada paso manualmente, lo cual es fácil de equivocar en la curva de croma.
