RGB e TSL

Da quando ho scritto l'ultimo post ad ora non ho fatto altro che pensare alle procedure più comode per, avendo i valori dei tre parametri Red, Green and Blue o Tono, Saturazione e Luminosità, trovare il codice esadecimale del colore. Nell'ultimo post avevo enunciato come passare dai tre RGB con valori compresi tra 0 e 255 (2^8 possibili valori, 16^2, ergo due cifre esadecimali) ad un unico numero di sei cifre, semplicemente giustapponendo, da sinistra a destra, i codici di R,G e B (occhio che funziona solo con gli esadecimali: che a nessuno salti in mente di accostare i decimali e fare poi la conversione una volta sola). Avevo detto che passare da TSL a RGB (e quindi ormai banalmente al singolo codice) sarebbe stato più difficile, ma mi ci sono messo un po' di lena ed in un'oretta (dopo essere tornato dal catechismo degli adolescenti) ho fatto. Spiegherò solo il meccanismo; al solito, pubblicherò gli algoritmi od il sorgente (lavorando solo con numeri, a questo punto, non ho più le complicazioni dell'interfaccia grafica) laddove richiesto.

L'ordine delle operazioni è importante. Le tre variabili T, S e L assumono valori interi da 0 a 240. Vengono considerati valori di default per la saturazione 240 (colore puro), per la luminosità 120 (media luminosità). Per prima cosa, calcoliamo i valori di RGB in base al tono.

Per T=0 abbiamo il colore rosso (R=255, G=0,B=0). Fino a T=40 il valore di rosso rimane costante, quello di G sale linearmente a 255 e quello di B sta a 0. Per T=40 il colore è giallo. Fino a T=80 il valore di R scende linearmente a zero, G è costante a 255 e B sta a zero. Si arriva a T=80 con il colore verde (green, appunto). Fino a T=120, R rimane costante a zero, G è costante a 255 e B sale linearmente a 255, fino ad ottenere il turchese (00FFFF). Dopo (ormai ci siamo capiti) R sta a zero, G scende a 0 e B sta a 255: Blu. Fino a T=200, R torna a salire a 255, G e B sono costanti. Si arriva al violetto, FF00FF. Da 200 a 240 R e G sono costanti, mentre B scende, finché per T=240 siamo nella stessa condizione di T=0.

Adesso abbiamo i tre valori di R1,G1,B1 puri (con il pedice 1 perché bisogna ancora manipolarli, non avendo considerato saturazione e luminosità); partiamo con la prima. Si nota che, per S=0, i tre valori di RGB sono uguali e valgono 127 (notare: la metà di 255). Ovviamente (anche solo per semplicità) la legge per andare da S=240 (dove abbiamo R1, G1, B1) a S=0 (127,127,127) è lineare. Al lettore il calcolo per determinarla.

Ci troviamo ora con R2, G2, B2. Ci manca da considerare la luminosità del colore. Notiamo che i valori da noi ottenuti corrispondono a L=120. Per L che va fino a 0, i valori delle tre variabili decrescono finché abbiamo RGB=(0,0,0), nero. Per L che va fino a 240, i valori salgono fino ad avere RGB=(255,255,255), bianco. Ovviamente queste leggi sono ancora lineari.

Avendo implementato questi due modi di scrivere i colori, tra l'altro, possiamo considerare due diversi tipi di gradiente (cioè di sfumatura): quella semplice, ottenuta interpolando sullo spazio della nostra figura i valori RGB (così, non so, per passare da rosso (FF0000) a blu (0000FF) muovo linearmente R da FF a 00 e B da 00 a FF), e quella "iridata", che posso usare facendo variare i tre parametri TSL (per passare da rosso (0,240,120) a blu (160,240,120) muovo T da 0 a 160, ottenendo così nel passaggio arancione, giallo, verde, allo stesso modo dell'arcobaleno. La conversione da TSL a RGB e ad Hex si fa poi come illustrato.

Esempio di gradiente RGB e TSL a confronto