Una guía completa sobre el espacio de color perceptualmente uniforme que está revolucionando el diseño web
OKLCH es una representación cilíndrica del espacio de color OKLAB, diseñado por Björn Ottosson en 2020. Significa OK Luminosidad, Croma y Tono - ofreciendo una forma más intuitiva de trabajar con colores comparado con los sistemas tradicionales RGB o HSL.
A diferencia de RGB que está orientado al dispositivo, o HSL que tiene defectos perceptuales, OKLCH se basa en principios de visión humana. Asegura que cambios numéricos iguales produzcan cambios perceptuales iguales.
La uniformidad perceptual significa que un cambio de la misma cantidad numérica produce un cambio perceptual similar independientemente del color inicial. Esto es crucial para:
Crea variaciones de color que mantienen el mismo brillo percibido, esencial para estados hover, estados deshabilitados y variaciones de tema.
Predice con precisión las relaciones de contraste y asegura el cumplimiento de WCAG trabajando con valores de luminosidad perceptual verdaderos.
Las pantallas modernas soportan gamas de color mucho más allá del sRGB tradicional. OKLCH maneja sin problemas estos espacios de color extendidos:
Gama estándar soportada por todas las pantallas
25% más colores, común en dispositivos Apple
Gama a prueba de futuro para pantallas HDR
Con OKLCH, puedes especificar colores que aprovechen al máximo las pantallas modernas mientras proporcionas alternativas automáticas para pantallas estándar.
/* Color base */
--primary: oklch(0.6 0.2 250);
/* Variante más clara - solo aumenta L */
--primary-light: oklch(0.8 0.2 250);
/* Variante más oscura - solo disminuye L */
--primary-dark: oklch(0.4 0.2 250);
/* Complementario - añade 180 al tono */
--secondary: oklch(0.6 0.2 70);/* Asegurar contraste WCAG AA */
--text-on-light: oklch(0.3 0 0); /* L=0.3 para texto oscuro */
--text-on-dark: oklch(0.9 0 0); /* L=0.9 para texto claro */
/* Brillo percibido consistente */
--success: oklch(0.7 0.15 140); /* Verde */
--warning: oklch(0.7 0.15 90); /* Amarillo */
--error: oklch(0.7 0.15 30); /* Rojo */OKLCH es soportado en todos los navegadores modernos:
/* Proporcionar alternativas para navegadores antiguos */
.element {
/* Alternativa para navegadores antiguos */
background-color: rgb(0, 128, 255);
/* Los navegadores modernos usarán esto */
background-color: oklch(0.65 0.2 240);
}
/* O usar @supports */
@supports (color: oklch(0 0 0)) {
.element {
color: oklch(0.7 0.15 180);
}
}OKLCH representa un cambio de paradigma en cómo pensamos sobre el color en la web. Al alinearse con la percepción humana en lugar de las capacidades del dispositivo, permite:
Comienza a usar OKLCH hoy con nuestro selector de color arriba y experimenta la diferencia que hace la uniformidad perceptual en tus diseños.
Aprende más sobre OKLCH y cómo usar este selector de color de manera efectiva.
OKLCH es un espacio de color perceptualmente uniforme que facilita la creación de paletas de colores armoniosas. A diferencia de RGB o HSL, ajustar la luminosidad en OKLCH mantiene el brillo percibido consistente en todos los tonos.
P3 y Rec2020 son espacios de color de amplia gama que pueden mostrar colores más vibrantes que el sRGB estándar. P3 es comúnmente soportado en dispositivos Apple modernos y pantallas de alta gama.
Cuando seleccionas colores altamente saturados, pueden estar fuera del rango de colores que tu pantalla puede mostrar. El selector muestra un color alternativo que aproxima el color deseado.
Puedes usar colores OKLCH directamente en navegadores modernos con la sintaxis CSS: color: oklch(0.7 0.1 180). Para soporte de navegadores antiguos, siempre proporciona un color alternativo en formato RGB o HEX.
El croma en OKLCH representa la coloración o intensidad de un color de manera perceptualmente uniforme. A diferencia de la saturación HSL, los valores de croma permanecen consistentes en diferentes niveles de luminosidad.
¡Sí! Cada selección de color actualiza automáticamente el hash de la URL. Puedes marcar cualquier color o compartir la URL con otros para cargar la misma configuración de color.
Cuando seleccionas un color fuera de la capacidad de tu pantalla, el selector muestra tanto el color deseado como una versión alternativa que se puede mostrar.
Cuando seleccionas un color fuera del espacio de color sRGB, el selector muestra dos vistas previas: la izquierda muestra el color real (si tu pantalla lo soporta), y la derecha muestra la alternativa sRGB.
Usa el control deslizante Alfa para controlar la transparencia. El canal alfa se muestra sobre un patrón de fondo de tablero de ajedrez.
¡Absolutamente! Puedes escribir o pegar colores en cualquier formato (OKLCH, HEX, RGB o HSL) en los campos de entrada de formato.
El selector detecta automáticamente las capacidades de tu pantalla. Si ves 'P3 no está disponible en este monitor' o mensajes similares, tu pantalla no soporta esas gamas de color más amplias.
Comienza estableciendo tu tono deseado, luego ajusta la luminosidad para cumplir con los requisitos de contraste WCAG.