6. L'espai HSL

 

Índex

 

L'espai HSL

esquema HSSEl sistema HSL fa servir els conceptes de to (hue), saturació (saturation) i lluminositat (lightness).

Aquest sistema es fa servir en alguns programes, entre els quals els de Microsoft (Paint, colors personalitzats a l'Office...) i és reconegut, al costat de l'RGB, pels fulls d'estil CSS per a HTML.

En la representació cònica d'aquest sistema, els colors s'organitzen en forma de dos cons units per la base.

La circunferència de la base comuna conté, com en el cas de l'HSV, els colors de màxima saturació i lluminositat, en què almenys un component RGB és màxim i almenys un altre és nul. El centre del cercle que fa de base comuna no l'ocupa el blanc, sinó el gris mitjà, rgb(127,127,127); la resta dels colors que ocupen la base comuna dels cons no són doncs els intermedis entre els més saturats i lluminosos i el blanc, sinó entre els més saturats i lluminosos i el gris mitjà.

El concepte de to (H) és pràcticament coincident amb el del sistema HSV, i com en aquest el mesura l'angle a partir del pla que conté el vermell.

La lluminositat (L) es mesura d'acord amb l'alçària en el doble con, amb una escala que va del 0 (negre) al màxim (blanc). Els colors situats sobre la base comuna als dos cons tenen lluminositat al 50%.

La saturació (S) també és indicada pel valor del radi, però cal tenir present la forma de doble con. El concepte de saturació s'allunya molt del concepte de la CIE i del sistema HSV, però es relaciona estretament amb el que en llenguatge col·loquial es denominen colors nets. El fet més cridaner és que a mesura que un color es barreja amb el blanc, no perd saturació.

 

Escales del sistema HSL i punts singulars

Habitualment els tons es mesuren, com en el sistema HSV, sobre una escala de 0 a 360 (la mesura sexagesimal habitual dels angles), amb els tres colors primaris distribuïts uniformement: el 0 (que coincideix amb el 360) correspon al vermell, el 120 al verd i el 240 al blau.

La lluminostitat va de 0 (vértex del con inferior) a 100 (vértex del con superior).

La saturació va de 0 a 100 (quocient dels radis expressat en percentatge).

El sistema HSL fa servir, a més, diverses escales a més de la descrita damunt. En el Paint de Microsoft tant H com L com S van de 0 a 240. I en les eines de l'Office de Microsoft les tres escales van del 0 al 255.

D'aquests supòsits deriven els punts singulars següents

Color RGB HSL
  rgb(255,255,255) hsv(-,0,100)
  rgb(127,127,127) hsv(-,0,0)
  rgb(0,0,0) hsv(-,0,0)
 
  rgb(255,0,0) hsv(0,100,100)
  rgb(255,255,0) hsv(60,100,100)
  rgb(0,255,0) hsv(120,100,100)
  rgb(0,255,255) hsv(180,100,100)
  rgb(0,0,255) hsv(240,100,100)
  rgb(255,0,255) hsv(300,100,100)
  rgb(255,0,0) hsv(360,100,100)
 

 

Transformacions RGB - HSL

Les transformacions RGB-HSL es poden fer d'una manera d'una manera anàloga a la vista per a l'espai HSV. Cal tenir present que quan L>50 el color està situat en el con superior, i quan L<50, a l'inferior. Com que el recorregut d'L en cada con és de només 50, els coeficients que s'apliquen són el doble del que sembla a primera vista.

En veurem dos exemples, el primer per a un color situat en el con superior i l'altre per a un de situat en el con inferior.

Sigui el color C=hsl(70,30,70). Farem successivament l'ajustament del to, de la saturació i finalment de la lluminositat.

Determinem en primer lloc el color afí de màxima saturació i màxima lluminositat (situat doncs a la circumferència d'unió dels dos cons), i anotem els valors rgb corresponents:

  hsl(70,100,50) rgb(212,255,0)  

Ajustem la saturació al 30% interpolant entre el color anterior i el gris mitjà:

0,3* hsl(70,100,50) rgb(212,255,0)  
+0,7* hsl(-,0,50) rgb(127,127,127)  
= hsl(70,30,50) rgb(152,165,89)  

I finalment ajustem la lluminositat al 70% interpolant entre el color anterior i el blanc:

0,60* hsl(70,30,50) rgb(152,165,89)  
+0,40* hsl(-,-,100) rgb(255,255,255)  
= hsl(70,30,70) rgb(193,201,155)  

- - - - -

Sigui ara el color C=hsl(110,85,30). Fent els mateixos passos, comencem a

  hsl(110,100,50) rgb(43,255,0)  

Ajustem la saturació al 85% interpolant entre el color anterior i el gris mitjà:

0,85* hsl(110,100,50) rgb(43,255,0)  
+0,15* hsl(-,0,50) rgb(127,127,127)  
= hsl(110,85,50) rgb(56,236,19)  

I finalment ajustem el valor al 30% interpolant entre el color anterior i el negre:

0,60* hsl(110,85,50) rgb(56,236,19)  
+0,40* hsl(-,-,0) rgb(0,0,0)  
= hsv(110,85,30) rgb(33,142,12)  

Aquest raonament dóna lloc a sengles algorismes (vegeu-ne un per al pas d'RGB a HSL i un altre per al pas d'HSL a RGB), i a programes, com el que es fa servir a l'apartat següent.

 

Eina de càlcul i representació de colors a partir de les dades HSL

A continuació hi ha una eina que, a partir de les dades HSL, permet la representació i la quantificació RGB de qualsevol color. S'hi fan servir les relacions anteriors.

Cal començar fent una primera aproximació de to (H) prement qualsevol dels botons numerats.

A continuació s'ajusta el to, la lluminositat i la saturació, amb els 12 botons corresponents. Poden fer-s'hi tantes rectificacions com calgui.

En tot moment se'ns presenta:


           
           
R  
G  
B  
   
   
   
   
To 0-360
Saturació 0-100
Lluminositat 0-100
 

 

L'HLS de Hoffmann

Diagrama de HoffmannEn el model de Hoffmann, els colors es distribueixen en dos cons units per un cilindre. L'alçada de cada con coincideix amb l'alçada del cilindre.

Les característiques d'aquest sistema són les següents: