Convertir de Hex a OKLCH (y de vuelta)

Prueba un viaje de ida y vuelta. Toma un azul de marca — #2563eb — y conviértelo a OKLCH: oklch(0.546 0.215 262.9). Convierte eso de vuelta a hex y #2563eb reaparece, exacto hasta el último dígito. Ahora haz una edición antes del viaje de regreso: sube el croma de 0,215 a 0,28, una versión más vívida del mismo azul, y convierte otra vez. Esta vez obtienes #0054ff — y al leer ese hex de vuelta reporta un croma de 0,261, no el 0,28 que escribiste. El viaje de ida fue perfecto; el de vuelta movió tu color sin avisar.

Esa asimetría es toda la historia de la conversión de hex a OKLCH: hex → OKLCH no tiene pérdida — cada color hex tiene coordenadas OKLCH exactas — mientras que OKLCH → hex puede recortar, porque OKLCH puede expresar colores que ningún valor hex logra codificar, y esos deben mapearse por gama al color más cercano que hex sí puede contener. Los viajes de ida y vuelta son seguros; las ediciones son donde un color puede salirse del mapa hex. Este artículo recorre el pipeline, la asimetría y el flujo de trabajo que hace innecesaria la conversión a mano — parte de nuestra guía de OKLCH.

¿Cómo funciona realmente la conversión?

Cuatro etapas, ejecutadas en orden. Primero se descompone el valor hex en sus tres canales sRGB (cada par de dígitos hex se convierte en un número de 0 a 255, escalado a 0–1). Segundo, esos canales se decodifican desde su forma con codificación gamma a luz lineal — números proporcionales a la luz física que emite una pantalla. Tercero, los valores lineales se transforman a OKLab, el espacio perceptual donde un eje es la luminosidad y dos ejes llevan el color. Cuarto, esos dos ejes de color se reexpresan en forma polar: la distancia al gris se vuelve croma, el ángulo se vuelve tono — y tienes L, C, H. La definición formal, con matrices y raíz cúbica incluidas, vive en la referencia del espacio de color Oklab; en la práctica cada herramienta de color ejecuta estas etapas por ti.

Cada etapa es reversible, y ejecutarlas al revés es la dirección OKLCH → hex. La precisión no es un problema en la práctica: hex cuantiza cada canal a 256 niveles, lo cual es más grueso que los valores OKLCH de tres decimales — por eso oklch(0.546 0.215 262.9), redondeado como se imprime aquí, aún devuelve exactamente #2563eb.

¿Por qué hex a OKLCH nunca pierde información?

Porque el viaje va de un conjunto pequeño y discreto a un espacio más grande y continuo. Hex puede nombrar exactamente 16.777.216 colores (256³), todos dentro de la gama sRGB. OKLCH describe un espacio continuo que contiene todo sRGB — y más allá. Por tanto, cada color hex tiene una dirección OKLCH precisa, y convertirlo a ella no descarta nada. Una forma útil de imaginarlo: los colores hex son pueblos, y OKLCH es un mapa más grande y mejor calibrado. Situar un pueblo en un mapa más grande nunca pierde el pueblo.

¿Por qué OKLCH a hex puede recortar?

El viaje de regreso no tiene esa garantía, porque OKLCH contiene direcciones sin pueblo en el mapa hex: colores fuera de sRGB. Algunos son visibles en pantallas de gama amplia — medios tonos vívidos en Display-P3 — y otros son simplemente más croma del que la luminosidad permite en cualquier parte.

El experimento inicial muestra la mecánica con números reales. En la luminosidad y el tono de #2563eb (L 0,546; H 262,9), sRGB se queda sin espacio en un croma ≈ 0,251. Pedir 0,28 solicita un color que existe — una pantalla P3 puede mostrarlo — pero que ningún valor hex puede escribir. En su lugar, el mapeo de gama encuentra el color expresable más cercano: #0054ff, que mide oklch(0.532 0.261 262.7). Fíjate en que las tres coordenadas se movieron, no solo el croma — el recorte aterriza en el color más cercano, no en tu color con un número topado.

Por eso también los generadores de escalas topan el croma un poco por debajo del techo sRGB en cada luminosidad — margen en lugar de recorte — para que los pasos generados se conviertan a hex de forma limpia en vez de amontonarse en el límite de la gama.

¿Cómo es el flujo de trabajo de conversión en la práctica?

No se parece a una conversión. Casi nadie traduce valores hex a mano, porque el punto de partida realista es un color de marca que ya existe como hex, y la meta realista es una paleta — no coordenadas. Así que el flujo de trabajo es: importar el hex como color semilla y dejar que la generación de la escala ocurra en OKLCH a su alrededor. Importa este azul como color semilla en Scale Composer — la herramienta lee #2563eb como oklch(0.546 0.215 262.9) y construye la escala a partir de ahí.

Esta es la escala que produce esa semilla — la luminosidad avanzando en una curva, el croma siguiendo un perfil de campana que alcanza su pico cerca de la semilla y mantiene un piso en los extremos para que incluso los pasos más pálidos y más oscuros conserven un matiz de azul:

Cada fila se convierte a hex sin recorte, porque cada valor de croma queda por debajo del techo de gama en su luminosidad. La semilla entró como hex, el pensamiento ocurrió en OKLCH, y los resultados salen de nuevo como hex — tres conversiones por paso, ninguna de ellas hecha por un humano.

¿Qué pasa cuando editas y reexportas?

Editar es la razón para convertir en primer lugar — y es donde la asimetría del inicio de este artículo se vuelve un hecho cotidiano en vez de una curiosidad. Empuja el croma de un color hacia arriba y en algún punto sale de sRGB: a partir de ahí, su forma en hex es una aproximación recortada mientras el color en sí sigue existiendo. Las exportaciones manejan la división con honestidad — el hex se mantiene recortado a sRGB, y en modo Display-P3 cada paso también lleva una cadena color(display-p3 …) que contiene el croma que el hex no puede. Abre la escala con semilla, sube el croma y reexporta — observa qué valores hex de cada paso dejan de moverse al alcanzar el techo mientras las cadenas P3 siguen adelante.