# OKLCH explicado: color perceptual para diseñadores [Canonical HTML page](https://gradiently.design/es/guide/oklch-explained) HSL prometió un color legible y casi lo cumplió. OKLCH conserva la parte legible y corrige la mentira sobre la luminosidad, por eso los sistemas de diseño se están pasando a él. ## The short version - OKLCH describe un color con tres valores: luminosidad perceptual (L), croma o colorido (C) y ángulo de tono (H). - A diferencia de HSL, la luminosidad de OKLCH coincide con lo claros que parecen los colores, así que dos colores con la misma L tienen un contraste similar sobre blanco. - En CSS se escribe `oklch(60% 0.2 293)`, con alfa opcional tras una barra, y todos los navegadores principales actuales lo admiten. - El croma no tiene un máximo fijo: cuánto color es posible depende de la luminosidad, del tono y de la pantalla, y los colores fuera del rango de la pantalla se ajustan a él. - Interpolar degradados en OKLCH u OKLab evita el centro gris y turbio que producen las mezclas en sRGB entre tonos alejados. **OKLCH** es una forma de escribir el color como luminosidad, croma y tono, donde la luminosidad se mide tal como la percibe el ojo humano. En CSS, `oklch(60% 0.2 293)` es un violeta que parece estar al 60% del camino entre el negro y el blanco, con un color intenso, en un ángulo de tono de 293 grados. La ventaja práctica para quien diseña es sencilla: cambia el tono, mantén la misma L, y el nuevo color parecerá igual de claro. HSL no puede prometer eso, y es la razón de que OKLCH se haya convertido en el estándar de los sistemas de diseño más recientes, incluida la paleta de colores de Tailwind. ## Luminosidad, croma y tono | Letra | Nombre | Rango | Qué controla | | --- | --- | --- | --- | | L | Luminosidad | De 0% a 100% (o de 0 a 1) | Lo claro que parece el color, según el ojo | | C | Croma | De 0 en adelante, rara vez por encima de 0,37 | Cuánto color: 0 es gris, más alto es más vivo | | H | Tono | De 0 a 360 grados | Qué color: más o menos 30 rojo, 110 amarillo, 140 verde, 265 azul | | / A | Alfa | De 0 a 1, o de 0% a 100% | Opacidad, opcional | Los ángulos de tono de OKLCH no coinciden con los de HSL. El azul puro está cerca de 264 aquí, no en 240. La **luminosidad** es la protagonista. Viene de OKLab, un espacio de color publicado en 2020 que se construyó para predecir la luminosidad, el colorido y el tono percibidos de forma más uniforme que los modelos anteriores. El **croma** sustituye a la saturación: en lugar de un porcentaje de algún máximo, es una cantidad absoluta de color, así que un croma de 0,1 significa la misma intensidad visual sea cual sea el tono. El **tono** sigue siendo un ángulo, pero los ángulos están espaciados para que un paso de 30 grados parezca un cambio similar en toda la rueda. ## OKLCH vs HSL: la misma luminosidad, lado a lado Toma seis tonos y fija la luminosidad y el croma en `oklch(65% 0.11 H)`. Las muestras de abajo parecen una sola familia, y su contraste sobre blanco se mantiene entre 3,1:1 y 3,4:1. Haz lo mismo en [HSL](https://gradiently.design/es/guide/hsl-colors) con un 50% de luminosidad y el contraste sobre blanco oscila desde aproximadamente 1,07:1 en el amarillo hasta 8,6:1 en el azul. - H 30 #c97466: #c97466 - H 90 #a98c35: #a98c35 - H 150 #5aa26b: #5aa26b - H 210 #11a1b4: #11a1b4 - H 270 #758bd3: #758bd3 - H 330 #b576af: #b576af `oklch(65% 0.11 H)` en seis tonos. Igual luminosidad, igual croma, y de verdad lo parecen. Esa uniformidad es lo que hace útil a OKLCH en el trabajo real. Un conjunto de colores de estado, series de un gráfico o etiquetas de categoría puede compartir una misma L y C y diferenciarse solo en el tono, y ninguno grita más que los demás. Si además necesitas un conjunto apto para daltonismo, varías también la L, como se explica en [paletas aptas para daltonismo](https://gradiently.design/es/guide/color-blindness-design). ## Cómo escribir OKLCH en CSS ```css :root { /* lightness as a percentage or a number */ --violet: oklch(60% 0.2 293); --violet-same: oklch(0.6 0.2 293); /* with transparency */ --violet-soft: oklch(60% 0.2 293 / 0.4); /* grey: chroma 0, hue ignored */ --grey: oklch(60% 0 0); } /* a fallback for very old browsers comes first */ .button { background: #8860ea; background: oklch(60% 0.2 293); } ``` `oklch(60% 0.2 293)` se acerca a #8860ea en sRGB. Las versiones actuales de Chrome, Edge, Firefox y Safari admiten oklch(). La compatibilidad de los navegadores es amplia, y puedes confirmar el detalle en [caniuse](https://caniuse.com/mdn-css_types_color_oklch). Para explorar valores de forma visual, [oklch.com](https://oklch.com) es un selector que muestra qué combinaciones puede mostrar una pantalla normal. Para convertir un hex de marca existente, pégalo en ese selector o en el panel de color de las herramientas de desarrollo de tu navegador, que puede mostrar cualquier color en OKLCH. ## Construir una escala con OKLCH Para hacer una escala de tintes y sombras, avanza la luminosidad en pasos iguales y deja que el croma suba hacia el centro y baje hacia los extremos. Los colores muy claros y muy oscuros físicamente no pueden contener mucho color, así que si mantienes el croma alto en los extremos el navegador tendrá que recortarlos. Aquí tienes una escala violeta construida así. - L 97 C .015: #f5f3ff - L 90 C .05: #dfd9fd - L 80 C .10: #c0b2f9 - L 70 C .17: #a486fd - L 60 C .22: #8a5af4 - L 50 C .22: #6e37d2 - L 40 C .18: #50249d - L 30 C .12: #331b63 - L 20 C .07: #180d32 Tono 293 en toda la escala. Cada paso es un salto visual similar, algo que las escalas HSL rara vez consiguen. Como la L sigue la luminosidad percibida, puedes tomar decisiones de contraste aproximadas solo con los números. En esta escala, el texto blanco supera 4,5:1 de L 50 hacia abajo, y el texto negro de L 60 hacia arriba. Confírmalo siempre con un [comprobador de contraste](https://gradiently.design/es/guide/color-contrast-accessibility), pero rara vez te llevarás sorpresas. Convertir una escala así en tokens con nombre se explica en [design tokens](https://gradiently.design/es/guide/design-tokens). ## Gama: cuando un color no existe en pantalla OKLCH puede describir colores que ninguna pantalla puede mostrar. La mayoría de los monitores muestran sRGB; muchos móviles y portátiles recientes muestran el más amplio Display P3. Sube el croma lo suficiente y te sales de ambos. Cuando eso ocurre, el navegador ajusta el color al más cercano que la pantalla puede mostrar, así que nada se rompe, pero puede que no obtengas lo que escribiste. ### Evita - Croma alto con L muy clara o muy oscura - Copiar valores P3 en una guía de marca pensada para impresión - Dar por hecho que un color OKLCH vivo se ve igual en todas las pantallas - Usar un croma por encima de 0,2 en grandes superficies de fondo ### Haz - Comprueba los valores en un selector que marque el límite de sRGB - Guarda un hex de reserva para los colores de marca - Baja el croma hacia los extremos de una escala - Reserva los colores más vivos para acentos pequeños ## Degradados en OKLCH Los degradados son donde el color perceptual se nota más. Un degradado CSS normal mezcla en sRGB, que cae hacia el gris entre tonos alejados. El CSS moderno te deja elegir el espacio en el que mezclar, y OKLab u OKLCH mantienen el centro luminoso y limpio. - Mezclado en sRGB: centro gris: `linear-gradient(90deg in srgb, #2563eb, #facc15)` - Mezclado en OKLab: limpio: `linear-gradient(90deg in oklab, #2563eb, #facc15)` - Mezclado en OKLCH: pasa por el verde: `linear-gradient(90deg in oklch, #2563eb, #facc15)` Los mismos dos colores de tres formas. OKLCH recorre la rueda de tonos, así que puede pasar por tonos que ninguno de los extremos contiene. OKLab mezcla en línea recta y sirve para la mayoría de los degradados de dos colores. OKLCH gira el tono, lo que queda precioso en atardeceres y arcoíris pero puede sorprenderte. La técnica completa, incluidas las palabras clave `shorter hue` y `longer hue`, está en [degradados CSS en OKLCH](https://gradiently.design/es/guide/css-gradient-oklch), y la teoría que hay detrás, en [interpolación de degradados](https://gradiently.design/es/guide/gradient-interpolation). Los Marks de Gradiently se renderizan en vivo en lugar de escribirse en CSS, y cada uno lleva su propia paleta: la tinta automática elige texto claro u oscuro de esa paleta para cada línea, así que las palabras se leen sin que tengas que comprobar números. Si prefieres partir de un fondo vivo terminado en lugar de un valor en un selector, explora el Mercado con palabras de color. ## FAQ ### ¿Qué es OKLCH? OKLCH es un formato de color basado en el espacio de color OKLab. Describe los colores por luminosidad perceptual, croma y tono, así que valores iguales parecen igual de claros e intensos. ### ¿Es OKLCH mejor que HSL? Para construir paletas, escalas y degradados, sí, porque su luminosidad coincide con lo que ve el ojo. HSL sigue sirviendo para retoques rápidos a mano. ### ¿Puedo usar oklch() en CSS hoy? Sí. Las versiones actuales de Chrome, Edge, Firefox y Safari lo admiten. Pon antes un hex de reserva si tienes que dar soporte a navegadores muy antiguos. ### ¿Cuál es el croma máximo en OKLCH? No hay un máximo fijo. El croma posible depende de la luminosidad, del tono y de la pantalla; en sRGB la mayoría de los tonos se quedan muy por debajo de 0.37. ### ¿Cómo convierto un hex a OKLCH? Pega el hex en un selector OKLCH como oklch.com, o en el panel de color de las herramientas de desarrollo de tu navegador, que puede mostrar el mismo color en OKLCH.