Tecnologia vestible

Codificació HSL dels colors

La codificació RGB dels colors és útil quan es vol generar un color a partir dels seus tres components però no ens dóna informació sobre el to del color ni sobre la seva lluminositat. Per això, en algunes ocasions ens serà més útil la codificació HSL. Aquesta codificació es basa en tres valors: la tonalitat del color (H), la seva saturació (S) i la seva lluminositat (L). Observem la típica paleta per triar colors:

Veiem un rectangle de colors (esquerra) i una barra de desplaçament (dreta). L'eix horitzontal del rectangle defineix la tonalitat, el valor zero correspon al vermell i va seguit els colors (en el mateix ordre que a l'espectre electromagnètic) fins arribar a l'especte electromagnètic per després passar pel magenta i tornar al vermell, o sigui dóna la volta. L'eix vertical del rectangle correspon a la saturació del color on els valors baixos (part inferior del rectangle) són grisos i els alts (part superior) són colors purs. La barra de la dreta defineix la lluminositat on els valors alts (part superior) corresponen a blanc per a qualsevol tonalitat i els valors baixos corresponen a negre. Els colors purs estan al mig de la barra. Així doncs, un color pur és el que té un valor màxim de saturació i un valor mig de lluminositat.

No tothom codifica els valors en la mateixa escala i ens podem trobar que els valors de tonalitat vagin de 0 a 360° (que seria el més raonable si ens imaginem que dona la volta), de 0 a 255 o de 0 a 100 (percentatge). Pel que fa a la saturació i la lluminositat el més habitual és trobar-les de 0 a 100 o de 0 a 255.

Conversió d'RGB a HSL

Si volem passar un codi RGB a un HSL podem fer servir el següent procediment. Partim de valors RGB entre 0 a 255 i passarem a H entre 0 i 360° i S i L en percentatge. Es mostren alguns exemples.

Pas	Càlcul	Expressió		Exemple
				R = 102 G = 102 B = 51	R = 51 G = 102 B = 153	R = 255 G = 51 B = 153	R = 204 G = 204 B = 204
1	Conversió a valor relatiu			r = 0,4     g = 0,4     b = 0,2	r = 0,2     g = 0,4     b = 0,6	r = 1,0     g = 0,2     b = 0,6	r = 0,8     g = 0,8     b = 0,8
2	Trobem el màxim i el mínim			M = 0,4   m = 0,2	M = 0,6   m = 0,2	M = 1,0   m = 0,2	M = 0,8   m = 0,8
3	Calculem la lluminositat			L = 30 %	L = 40 %	L = 60 %	L = 80 %
4	Calculem la saturació	L ≤ 50 %		S = 33 %	S = 50 %
		L > 50 %				S = 100 %	S = 0 %
5	Calculem la tonalitat	M = m	H = 0°				H = 0°
		M ≠ m M = r g ≥ b		H = 60°
		M ≠ m M = g		H = 60°
		M ≠ m M = b			H = 210°
		M ≠ m M = r g < b				H = 330°

Conversió d'HSL a RGB

Si volem passar un codi HSL a un RGB podem fer servir el següent procediment. Partim de valors d'H entre 0 i 360° i d'S i L en percentatge i passarem a RGB entre 0 a 255. Es mostren alguns exemples.

Pas	Càlcul	Expressió		Exemple
				H = 60° S = 33 % L = 30 %	H = 210° S = 50 % L = 40 %	H = 330° S = 100 % L = 60 %	H = 0° S = 0 % L = 80 %
1	Conversió a valor relatiu (H en múltiples de 60°)			h = 1     s = 0,33     l = 0,3	h = 3,5     s = 0,5     l = 0,4	h = 5,5     s = 1     l = 0,6	h = 0     s = 0     l = 0,8
2	Operació mòdul sobre h / 2			F = 1	F = 1,5	F = 1,5	F = 0
3	Calculem valors intermedis			c = 0,2     d = 0,2     m = 0,2	c = 0,4     d = 0,2     m = 0,2	c = 0,8     d = 0,4     m = 0,2	c = 0     d = 0     m = 0,8
4	Calculem els tres components			C = 102   D = 102   M = 51	C = 153   D = 102   M = 51	C = 255   D = 153   M = 51	C = 204   D = 204   M = 204
5	Calculem els tres colors	0 ≤ H ≤ 60	R = C G = D B = M	R = 102 G = 102 B = 51			R = 204 G = 204 B = 204
		60 ≤ H ≤ 120	R = D G = C B = M	R = 102 G = 102 B = 51
		120 ≤ H ≤ 180	R = M G = C B = D
		180 ≤ H ≤ 240	R = M G = D B = C		R = 51 G = 102 B = 153
		240 ≤ H ≤ 300	R = D G = M B = C
		300 ≤ H ≤ 360	R = C G = M B = D			R = 255 G = 51 B = 153

En CircuitPython la biblioteca color_lib.py ens permet convertir un valor de tonalitat entre 0 i 360° en el color RGB corresponent (considerant S = 100 % i L = 50 %). Per descarregar-la heu de picar amb el botó dret del ratolí. Aquí tenim un exemple d'ús:

import board
import neopixel
import time
import color_lib

led = neopixel.NeoPixel(board.D8, 1, brightness=0.3)

while True:
    for k in range(360):
        led[0] = color_lib.colorRGB(k)
        time.sleep(0.05)

En aquest web, les fotografies marcades amb [AF] són del web d'Adafruit, les marcades amb [SF] del web d'Sparkfun i les marcades amb [AU] del web d'Arduino.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.