La Matemática detrás de la Conversión de OKLCH a RGB

Introducción

A medida que crece el soporte para el modelo de color OKLCH, también lo hace la necesidad de comprender cómo se relaciona con el omnipresente modelo RGB. Si bien OKLCH ofrece una uniformidad perceptual superior y acceso a colores de amplia gama, nuestras pantallas (en su mayoría) todavía funcionan con subpíxeles RGB.

En este artículo, exploraremos el viaje matemático de convertir un color OKLCH al espacio sRGB estándar utilizado por la mayoría de los dispositivos web.

El Convertidor Interactivo

Antes de sumergirnos en las matemáticas, ¡pruebe el proceso de conversión usted mismo! Ajuste los controles deslizantes de Luminosidad (Lightness), Croma (Chroma) y Matiz (Hue) a continuación para ver cómo se asignan a un código hexadecimal RGB.

El Flujo de Conversión

Convertir OKLCH a RGB no es un solo paso; implica una serie de transformaciones a través de diferentes espacios de color.

Paso 1: OKLCH a OKLab

Primero, necesitamos convertir las coordenadas cilíndricas OKLCH (Luminosidad, Croma, Matiz) nuevamente a las coordenadas cartesianas OKLab (L, a, b).

• L permanece igual.
• a (verde-rojo) se calcula usando coseno: $a = C \times \cos(H)$
• b (azul-amarillo) se calcula usando seno: $b = C \times \sin(H)$

(Nota: Asegúrese de que H esté en radianes para estos cálculos.)

Paso 2: OKLab a RGB Lineal (Linear RGB)

A continuación, pasamos del espacio perceptivo OKLab a un espacio RGB "Lineal". Esta transformación ocurre en tres sub-pasos:

2.1 OKLab a LMS (Respuesta de Cono)

Primero transformamos las coordenadas L, a, b en un dominio intermedio LMS usando una matriz específica:

$$\begin{bmatrix} L' \\ M' \\ S' \end{bmatrix} = \begin{bmatrix} 1 & 0.3963377774 & 0.2158037573 \\ 1 & -0.1055613458 & -0.0638541728 \\ 1 & -0.0894841775 & -1.2914855480 \end{bmatrix} \begin{bmatrix} L \\ a \\ b \end{bmatrix}$$

2.2 No linealidad LMS

El modelo OKLab utiliza una no linealidad de raíz cúbica. Para volver a la intensidad de luz lineal, debemos elevar al cubo los valores LMS resultantes:

$$\begin{aligned} L_{lin} &= (L')^3 \\ M_{lin} &= (M')^3 \\ S_{lin} &= (S')^3 \end{aligned}$$

2.3 LMS a RGB Lineal

Finalmente, convertimos estos valores LMS lineales a RGB Lineal usando otra transformación matricial:

$$\begin{bmatrix} R_{lin} \\ G_{lin} \\ B_{lin} \end{bmatrix} = \begin{bmatrix} 4.0767416621 & -3.3077115913 & 0.2309699292 \\ -1.2684380046 & 2.6097574011 & -0.3413193965 \\ -0.0041960863 & -0.7034186147 & 1.7076147010 \end{bmatrix} \begin{bmatrix} L_{lin} \\ M_{lin} \\ S_{lin} \end{bmatrix}$$

Paso 3: RGB Lineal a sRGB (Corrección Gamma)

Finalmente, la mayoría de las pantallas requieren señales con "Corrección Gamma". Esto se debe a que los ojos humanos son más sensibles a los tonos oscuros que a los claros.

La conversión sRGB estándar utiliza una función de transferencia:

1. Si el valor es muy pequeño ($\le 0.0031308$), multiplique por 12.92.
2. De lo contrario, eleve a la potencia de $(1/2.4)$ y aplique compensaciones de escala.

$$V_{sRGB} = 1.055 \times V_{linear}^{(1/2.4)} - 0.055$$

Este paso final nos da los valores familiares 0-255 (después del escalado) para Rojo, Verde y Azul.

Ejemplo de Cálculo

Sigamos oklch(60% 0.15 250) a través de este flujo:

1. A OKLab:

   • $L = 0.6$
   • $H = 250^\circ \approx 4.36 \text{ rad}$
   • $a = 0.15 \times \cos(4.36) \approx -0.051$
   • $b = 0.15 \times \sin(4.36) \approx -0.141$

2. A RGB Lineal (después de la transformación matricial):

   • $R_{lin} \approx 0.021$
   • $G_{lin} \approx 0.229$
   • $B_{lin} \approx 0.667$

3. A sRGB (después de la corrección Gamma):

   • $R \approx 39$
   • $G \approx 132$
   • $B \approx 213$
   • Hex: #2784D5

Conclusión

Comprender estas conversiones resalta la complejidad oculta detrás de una simple declaración de color CSS. Si bien los navegadores modernos manejan esto automáticamente, conocer las matemáticas nos da una apreciación más profunda de la precisión de la ciencia del color digital.