¿Qué es OKLCH y por qué debería usarlo en lugar de HEX o HSL?

OKLCH (Luminosidad, Croma, Tono) es un espacio de color perceptualmente uniforme basado en el modelo Oklab. A diferencia de HEX o HSL, cambios numéricos iguales en OKLCH producen diferencias perceptuales iguales. Esto lo hace ideal para diseñar paletas de color accesibles, crear gradientes suaves y generar escalas de color consistentes para Tailwind v4.

¿Cómo convierto HEX a OKLCH?

Pega tu valor HEX (por ejemplo, #3b82f6) en el campo de entrada HEX y el campo OKLCH se actualiza al instante con la notación equivalente oklch(0.6 0.18 250). Todos los demás formatos —OKLab, RGB y HSL— también se sincronizan al mismo tiempo, lo que te permite comparar representaciones de color de forma inmediata.

¿Qué significa 'fuera de la gama sRGB' y qué le ocurre al color?

Algunos colores OKLCH, en particular los valores de alto croma, superan el espacio de color sRGB que usa la mayoría de las pantallas. Cuando esto ocurre, la herramienta aplica el algoritmo toGamut de CSS Color 4 para encontrar el color sRGB visualizable más cercano. Aparece un banner de advertencia ámbar que muestra el valor original fuera de gama junto al resultado mapeado para que puedas comparar ambos valores.

¿Cómo funciona el generador de paleta OKLCH de Tailwind v4?

El generador usa el esquema de luminosidad oficial de Tailwind v4 (50=0.971, 100=0.945, hasta 950=0.238) aplicado a tu tono y croma actuales. Produce 11 pasos de color de claro a oscuro y los exporta como un bloque de código @theme { --color-brand-50: oklch(...); } listo para pegar en tu CSS.

¿Por qué la interpolación OKLCH se ve mejor que HSL en los gradientes?

HSL interpola a través de un sistema de coordenadas cilíndricas que no corresponde a la percepción humana, lo que a menudo provoca caídas de gris o desplazamientos de tono inesperados en mitad de un gradiente. OKLCH interpola en el espacio perceptualmente uniforme Oklab, de modo que la luminosidad y el croma transicionan de forma suave sin tonalidades de color inesperadas.

¿Este convertidor OKLCH es gratuito y privado?

Sí. La herramienta es completamente gratuita y se ejecuta íntegramente en tu navegador usando la biblioteca culori. No se envía ningún valor de color a un servidor. Todos los cálculos de conversión y mapeo de gama se realizan localmente en tu dispositivo, garantizando la privacidad total de tus datos.

¿Funciona la sintaxis OKLCH de CSS Color 4 en todos los navegadores?

La sintaxis de color OKLCH (oklch()) está soportada en todos los navegadores modernos desde 2023, incluidos Chrome 111+, Firefox 113+, Safari 15.4+ y Edge 111+. Para navegadores más antiguos, usa los valores de reserva HEX o RGB que proporciona este convertidor.

Herramientas de Color

Convertidor OKLCH – CSS Color 4, Generador de Paleta Tailwind v4

Convertidor de color OKLCH gratuito con sincronización en vivo entre OKLCH, OKLab, RGB, HSL y HEX. Incluye controles deslizantes L/C/H/alpha, mapeo de gama CSS Color 4 y exportación de paleta Tailwind v4.

OKLCH (Luminosidad, Croma, Tono) es un espacio de color perceptualmente uniforme basado en el modelo Oklab y adoptado oficialmente en CSS Color Level 4. A diferencia de RGB o HSL, OKLCH mantiene la luminosidad percibida de forma consistente en todos los tonos, lo que lo hace ideal para sistemas de color accesibles, paletas Tailwind v4 y gradientes suaves.

Cómo Usar el Convertidor de Color OKLCH

1
Introduce un valor de color
Escribe o pega un valor en cualquier formato compatible: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) o oklab(0.6 -0.056 -0.169). La herramienta sincroniza todos los demás formatos al instante.
2
Ajusta con los controles deslizantes L/C/H/Alpha
Arrastra los controles de Luminosidad (L), Croma (C), Tono (H) o Alpha. El control de Croma muestra el marcador de límite de gama sRGB para que siempre sepas cuándo un color supera el rango de visualización estándar.
3
Comprueba la advertencia de gama si aparece
Si tu color OKLCH está fuera de la gama sRGB, aparece un banner de advertencia ámbar que muestra el valor original y el resultado mapeado con el algoritmo toGamut de CSS Color 4 usado para la visualización.
4
Genera una paleta Tailwind v4
La sección de paleta OKLCH de Tailwind v4 genera automáticamente pasos de color del 50 al 950 para tu tono actual, siguiendo el esquema de luminosidad oficial de Tailwind. Haz clic en Copiar para pegar el bloque @theme directamente en tu CSS.

Referencias

W3C CSS Color Level 4 – oklch()
La especificación del W3C que define la notación de color OKLCH y los algoritmos de mapeo de gama.
Culori – Biblioteca de Color JavaScript
La biblioteca de código abierto que impulsa la conversión OKLCH, el mapeo toGamut y la interpolación perceptual en esta herramienta.
Evil Martians – OKLCH en CSS: ¿Por qué abandonar RGB y HSL?
Una guía completa que explica las ventajas de OKLCH sobre RGB y HSL para el trabajo moderno con colores.
Tailwind CSS v4 – Paleta Predeterminada
La documentación oficial de la paleta de colores de Tailwind, incluidos los valores de luminosidad OKLCH usados en este generador de paletas.

Herramientas Relacionadas

Convertidor de Color

Convierte entre RGB, RGBA, HEX, HSL, HSV y CMYK con sincronización bidireccional en tiempo real.

Minificador CSS

Minifica CSS que usa tus valores de color OKLCH.

Visor SVG

Previsualiza e inspecciona gráficos SVG que usan valores de relleno y trazo OKLCH.

Preguntas Frecuentes

¿Qué es OKLCH y por qué debería usarlo en lugar de HEX o HSL?: OKLCH (Luminosidad, Croma, Tono) es un espacio de color perceptualmente uniforme basado en el modelo Oklab. A diferencia de HEX o HSL, cambios numéricos iguales en OKLCH producen diferencias perceptuales iguales. Esto lo hace ideal para diseñar paletas de color accesibles, crear gradientes suaves y generar escalas de color consistentes para Tailwind v4.
¿Cómo convierto HEX a OKLCH?: Pega tu valor HEX (por ejemplo, #3b82f6) en el campo de entrada HEX y el campo OKLCH se actualiza al instante con la notación equivalente oklch(0.6 0.18 250). Todos los demás formatos —OKLab, RGB y HSL— también se sincronizan al mismo tiempo, lo que te permite comparar representaciones de color de forma inmediata.
¿Qué significa 'fuera de la gama sRGB' y qué le ocurre al color?: Algunos colores OKLCH, en particular los valores de alto croma, superan el espacio de color sRGB que usa la mayoría de las pantallas. Cuando esto ocurre, la herramienta aplica el algoritmo toGamut de CSS Color 4 para encontrar el color sRGB visualizable más cercano. Aparece un banner de advertencia ámbar que muestra el valor original fuera de gama junto al resultado mapeado para que puedas comparar ambos valores.
¿Cómo funciona el generador de paleta OKLCH de Tailwind v4?: El generador usa el esquema de luminosidad oficial de Tailwind v4 (50=0.971, 100=0.945, hasta 950=0.238) aplicado a tu tono y croma actuales. Produce 11 pasos de color de claro a oscuro y los exporta como un bloque de código @theme { --color-brand-50: oklch(...); } listo para pegar en tu CSS.
¿Por qué la interpolación OKLCH se ve mejor que HSL en los gradientes?: HSL interpola a través de un sistema de coordenadas cilíndricas que no corresponde a la percepción humana, lo que a menudo provoca caídas de gris o desplazamientos de tono inesperados en mitad de un gradiente. OKLCH interpola en el espacio perceptualmente uniforme Oklab, de modo que la luminosidad y el croma transicionan de forma suave sin tonalidades de color inesperadas.
¿Este convertidor OKLCH es gratuito y privado?: Sí. La herramienta es completamente gratuita y se ejecuta íntegramente en tu navegador usando la biblioteca culori. No se envía ningún valor de color a un servidor. Todos los cálculos de conversión y mapeo de gama se realizan localmente en tu dispositivo, garantizando la privacidad total de tus datos.
¿Funciona la sintaxis OKLCH de CSS Color 4 en todos los navegadores?: La sintaxis de color OKLCH (oklch()) está soportada en todos los navegadores modernos desde 2023, incluidos Chrome 111+, Firefox 113+, Safari 15.4+ y Edge 111+. Para navegadores más antiguos, usa los valores de reserva HEX o RGB que proporciona este convertidor.