La Matematica dietro la Conversione da OKLCH a RGB

Introduzione

Man mano che cresce il supporto per il modello di colore OKLCH, cresce anche la necessità di capire come si relaziona all'onnipresente modello RGB. Mentre OKLCH offre un'uniformità percettiva superiore e l'accesso a colori ad ampia gamma, i nostri schermi (per la maggior parte) funzionano ancora con subpixel RGB.

In questo articolo, esploreremo il viaggio matematico della conversione di un colore OKLCH nello spazio sRGB standard utilizzato dalla maggior parte dei dispositivi web.

Il Convertitore Interattivo

Prima di immergerci nella matematica, prova tu stesso il processo di conversione! Regola i cursori di Luminosità (Lightness), Croma (Chroma) e Tonalità (Hue) qui sotto per vedere come vengono mappati in un codice esadecimale RGB.

La Pipeline di Conversione

La conversione da OKLCH a RGB non è un singolo passaggio; comporta una serie di trasformazioni attraverso diversi spazi colore.

Passaggio 1: OKLCH a OKLab

Innanzitutto, dobbiamo convertire le coordinate cilindriche OKLCH (Luminosità, Croma, Tonalità) nelle coordinate cartesiane OKLab (L, a, b).

• L rimane lo stesso.
• a (verde-rosso) viene calcolato usando il coseno: $a = C \times \cos(H)$
• b (blu-giallo) viene calcolato usando il seno: $b = C \times \sin(H)$

(Nota: Assicurati che H sia in radianti per questi calcoli.)

Passaggio 2: OKLab a RGB Lineare (Linear RGB)

Successivamente, ci spostiamo dallo spazio percettivo OKLab a uno spazio RGB "Lineare". Questa trasformazione avviene in tre sotto-fasi:

2.1 OKLab a LMS (Risposta dei Coni)

Trasformiamo prima le coordinate L, a, b in un dominio intermedio LMS utilizzando una matrice specifica:

$$\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 Non-linearità LMS

Il modello OKLab utilizza una non-linearità della radice cubica. Per tornare all'intensità luminosa lineare, dobbiamo elevare al cubo i valori LMS risultanti:

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

2.3 LMS a RGB Lineare

Infine, convertiamo questi valori LMS lineari in RGB Lineare utilizzando un'altra trasformazione matriciale:

$$\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}$$

Passaggio 3: RGB Lineare a sRGB (Correzione Gamma)

Infine, la maggior parte degli schermi richiede segnali "Correcti Gamma". Questo perché gli occhi umani sono più sensibili alle sfumature scure rispetto a quelle chiare.

La conversione sRGB standard utilizza una funzione di trasferimento:

1. Se il valore è molto piccolo ($\le 0.0031308$), moltiplicare per 12.92.
2. Altrimenti, elevare alla potenza di $(1/2.4)$ e applicare offset di scala.

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

Questo passaggio finale ci dà i familiari valori 0-255 (dopo il ridimensionamento) per Rosso, Verde e Blu.

Esempio di Calcolo

Tracciamo oklch(60% 0.15 250) attraverso questa pipeline:

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 Lineare (dopo trasformazione matriciale):

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

3. A sRGB (dopo correzione Gamma):

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

Conclusione

Comprendere queste conversioni evidenzia la complessità nascosta dietro una semplice dichiarazione di colore CSS. Mentre i browser moderni gestiscono questo automaticamente, conoscere la matematica ci dà un apprezzamento più profondo per la precisione della scienza del colore digitale.