Cómo usar OKLCH en CSS
OKLCH es un formato de color moderno para CSS que facilita ajustar los colores. Cuando conozcas sus tres números, podrás crear tonos y estados hover sin necesidad de una herramienta de diseño.
La sintaxis
color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* with transparency */- Luminosidad va de 0% (negro) a 100% (blanco).
- Croma indica lo vivo que es el color. 0 es gris, y la mayoría de colores utilizables se mantienen por debajo de 0.37.
- Tono es el ángulo del color en la rueda cromática, de 0 a 360.
Pruébalo con el selector de color OKLCH, o convierte el color de tu marca con el conversor de HEX a OKLCH.
Crea un juego de tonos
Mantén el croma y el tono iguales, y cambia solo la luminosidad:
:root {
--brand-300: oklch(80% 0.12 255);
--brand-500: oklch(62% 0.19 255);
--brand-700: oklch(45% 0.17 255);
}Crea estados hover
La sintaxis de color relativo te permite derivar un color a partir de otro:
.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }Los colores relativos son más recientes que el propio oklch(), así que comprueba el soporte de navegadores para tu público.
Mezcla colores
Usa color-mix() para mezclar dos colores. Mezclar en OKLCH suele dar puntos medios más limpios que sRGB:
background: color-mix(in oklch, var(--brand-500) 70%, white);Puedes probar mezclas con el mezclador de colores.
Añade un fallback
Los navegadores modernos soportan OKLCH. Para los muy antiguos, pon primero un valor HEX. Los navegadores ignoran lo que no pueden leer:
color: #2563eb;
color: oklch(54.6% 0.215 262.9);El conversor de OKLCH a HEX te da ese valor.
Comprueba el contraste
La luminosidad hace que el contraste sea más fácil de predecir, pero no lo garantiza. Prueba siempre los pares de texto y fondo con el comprobador de contraste.
