OKLCH en Tailwind v4

Tailwind v4 reconstruyó su paleta de colores por defecto en OKLCH y trasladó la configuración al propio CSS: los colores personalizados ahora son simples propiedades personalizadas de CSS escritas en oklch(), declaradas bajo la directiva @theme en lugar de en tailwind.config.js. La paleta reconstruida avanza con pasos más uniformes y alcanza la viveza extra de las pantallas P3 de gama amplia — y ambas propiedades están disponibles para tus propios colores de marca, si construyes la rampa como se construyeron los valores por defecto.

Esa última parte es el verdadero tema aquí: no usar los colores de Tailwind, sino hacer que una paleta personalizada se comporte como ellos. El modelo de color que hace el trabajo tiene su propia serie en nuestra guía de OKLCH.

¿Qué cambió en el color en Tailwind v4?

Dos cambios llegaron juntos.

La paleta por defecto se regeneró en OKLCH. Abre la referencia de color en la documentación de Tailwind y verás que los valores son cadenas oklch() en lugar de hex. Los efectos prácticos: los pasos dentro de cada escala son perceptualmente más suaves y, en pantallas Display-P3, los tonos medios llevan un croma que el hex sRGB no podía expresar — la paleta se ve más viva en la mayoría de los teléfonos y portátiles actuales sin ningún cambio en los nombres de clase.

La configuración pasó a ser CSS-first. La directiva @theme reemplaza gran parte de tailwind.config.js: los design tokens son propiedades personalizadas de CSS declaradas en tu hoja de estilos, y Tailwind genera las utilidades a partir de ellas. Los colores viven bajo el espacio de nombres --color-*. Una consecuencia que vale la pena notar antes de entrar en cualquier teoría del color: tu paleta ahora está en el mismo archivo y lenguaje que el resto de tu CSS, legible y editable en el sitio.

¿Cómo defines colores de marca personalizados en @theme?

Declara propiedades con el nombre --color-<name>-<step> y las utilidades vienen solas:

@import "tailwindcss";

@theme {
  --color-brand-100: oklch(0.93 0.03 262.9);
  --color-brand-300: oklch(0.78 0.10 262.9);
  --color-brand-500: oklch(0.60 0.19 262.9);
  --color-brand-600: oklch(0.546 0.215 262.9); /* #2563eb */
  --color-brand-700: oklch(0.49 0.19 262.9);
  --color-brand-900: oklch(0.36 0.12 262.9);
}

Con ese bloque en su lugar, bg-brand-600, text-brand-100, border-brand-300 y cualquier otra utilidad de color funcionan exactamente igual que con la paleta integrada.

Estos valores son un ejemplo trabajado, no relleno. El paso 600 es el color semilla: oklch(0.546 0.215 262.9) es exactamente #2563eb, el azul que Tailwind v3 incluyó como blue-600. Los otros cinco se generaron a partir de él — tono mantenido en 262,9 a lo largo de la rampa, luminosidad recorriendo una curva y croma siguiendo un perfil de campana que alcanza su máximo cerca de la semilla y se atenúa hacia ambos extremos. Sus gemelos en hex caen en ≈ #dde8fd, #95b7f8, #3f78f0, #2055ca y #19387b.

¿Qué te aporta OKLCH frente a pegar códigos hex?

La rampa se comporta como la propia de Tailwind. Las escalas por defecto se sienten uniformes porque se generaron sobre un modelo perceptual; una escala de marca en hex ensamblada a mano normalmente no lo estaba, así que convive en el mismo proyecto con una física distinta — el salto de brand-500 a brand-600 tiene un tamaño diferente al mismo salto en gray, las derivaciones de hover caen de forma desigual y el contraste hay que probarlo par por par en lugar de leerlo en la columna de luminosidad. Una rampa de marca generada en OKLCH hereda las propiedades por las que se reconstruyó la paleta por defecto: pasos uniformes y un contraste que puedes predecir a partir de los valores de L.

Los valores además te responden. #2563eb y #2055ca no te dicen nada sobre cómo se relacionan; oklch(0.546 0.215 262.9) y oklch(0.49 0.19 262.9) te lo dicen con exactitud — mismo tono, un paso más oscuro, un poco menos colorido. Esa es la razón intuitiva por la que OKLCH pertenece a un archivo de tema: los números por fin coinciden con la forma en que los diseñadores ya se describen el color entre sí — «igual, pero más oscuro» — así que editar en el sitio se vuelve razonable. Si brand-600 se lee demasiado pesado, sube su L en 0,02 y sabrás con precisión qué cambiaste.

Abre esta rampa de marca con su exportación de Tailwind en Scale Composer — la escala de arriba, generada a partir del color semilla #2563eb, con el bloque @theme ensamblado en el panel de exportación y el hex junto a cada paso.

¿Cómo se ve el flujo de generar y pegar?

Tres movimientos, ninguno de ellos de ajuste manual:

1. Semilla. Pega el color de marca — el hex sirve; se convierte a coordenadas OKLCH y la rampa se genera a su alrededor: pasos sobre una curva de luminosidad, un perfil de croma en campana con un suelo para que los pasos más pálidos conserven un matiz del tono, y el croma limitado ligeramente por debajo del techo de gama para que ningún paso quede recortado. Se puede derivar una variante de modo oscuro a partir de la misma rampa, con su propia curva de luminosidad y un aumento de croma.
2. Comprobación. Los mínimos de contraste se evalúan por rol (WCAG, con APCA al lado), de modo que los pasos que destinas a texto y fondos quedan verificados antes de exportar nada.
3. Exportación. La exportación de Tailwind v4 es un único bloque @theme — las escalas de color más, si las quieres, niveles tipográficos, espaciado, radios y breakpoints en el mismo dialecto. Pégalo en tu hoja de estilos y las utilidades existen.

¿Cambia OKLCH cómo funcionan las utilidades?

No — y vale la pena decirlo con claridad. bg-brand-600 se comporta de forma idéntica tanto si la propiedad subyacente contiene un valor oklch() como un código hex; los nombres de clase, las variantes y el pipeline de build son indiferentes a la notación. OKLCH cambia la calidad de los valores — pasos uniformes, edición en el sitio, alcance P3 — no la API. Eso también significa que la migración puede ser incremental: los nuevos tokens se pueden escribir en oklch() mientras los tokens hex existentes quedan intactos hasta que tengas una razón para regenerarlos. oklch() nativo está disponible en todos los navegadores principales desde 2023, así que para los objetivos actuales no interviene ninguna transformación de build.

¿Cuál es la forma más rápida de probarlo con tu propia marca?

La rampa de ejemplo de arriba es el resultado de un solo color semilla; el flujo es el mismo para cualquier color. Pon tu propio color de marca como semilla — se convierte a OKLCH, la rampa se genera bajo las mismas reglas que el ejemplo, y el bloque @theme del panel de exportación está listo para pegar.