Model de color HSL: Què és i per què hauries d’usar-ho en el teu CSS

Què és el model de color HSL i en què es diferencia del RGB o HEX?

El HSL (Hue, Saturation and Lightness) és un model de color i representació de colors en el desenvolupament web. S’utilitza per a descriure i manipular colors d’una manera més intuïtiva i perceptiva. Això li fa ser especialment útil i versàtil en aplicacions que impliquen la selecció i execució de colors. Amb aquest model, els desenvolupadors poden ajustar els colors de fons, els textos i altres elements visuals amb major facilitat i aconseguir resultats visuals més impactants.

En el disseny gràfic hi ha altres models molt comuns com el RGB (Xarxa, Green and Blue), i HEX (Hexadecimal). A continuació s’explica breument cadascun d’ells:

1. RGB

El model de color RGB es basa en la combinació de tres colors primaris: vermell, verd i blau, nomenats anteriorment. En aquest model, cada color s’especifica com un valor numèric en una escala que va de 0 a 225. La combinació d’aquests tres colors primaris permet crear milions de colors diferents.

2. HEX

El model de color HEX és similar al model RGB, però en lloc d’utilitzar valors numèrics de 0 a 255, s’utilitzen valors hexadecimals de 00 a FF per a representar cadascun dels tres colors primaris. Per tant, un color HEX s’especifica com una cadena de sis caràcters hexadecimals que representen la quantitat e vermell, verda i blava, respectivament. El model HEX és comunament utilitzat en disseny web, ja que es pot especificar fàcilment en codi HTML i CSS.

3. HSL

El model de color HSL es basa en tres components:

  • Hue: Es refereix al matís o tonalitat del colo. Es mesura en graus i varia des de 0° (vermell) fins a 360è (vermell novament després d’una volta completa).

Hue-HSL-y-en-que-se-diferencia-del-RGB-HEX

  • Saturation: Es refereix a la saturació o intensitat del color, que es mesura en percentatge i varia des de 0% (gris) fins a 100% (color completament saturat).Saturation-Modelo-de-color-HSL
  • Lightness: Es refereix a la lluminositat o lluentor del color, que es mesura també en percentatge i varia des de 0% (negre) fins a 100% (blanc).

Lightness-Modelo-de-color-HSL

 

El model HSL permet una manipulació més fàcil i precisa dels colors que el model RGB. A més, especialment en termes d’ajustar la lluminositat per a fins d’accessibilitat web, ofereix avantatges significatius.

Per què hauries d’usar HSL en el teu CSS?

Un dels paràmetres fonamentals quan estem treballant amb CSS són els colors. Primerament, ja sigui per un aspecte purament estètic o per accessibilitat, l’ús del color en crear una web és d’una importància fonamental. En segon lloc, en la gran majoria de casos, el més comú és usar algun d’aquests tres codis de color (i les seves variants amb transparències): RGB/RGBA, HEX o HSL/HSLA. No obstant això, si has vist o treballes amb CSS de manera habitual, hauràs notat que l’ús de RGB i HEX és bastant majoritari respecte a HSL.

Hi ha diverses raons per les quals pot ser útil utilitzar el model de color HSL en el teu codi de CSS:

Precisió i fàcil manipulació

El model HSL permet especificar de manera més precisa i fàcilment la tonalitat, saturació i lluminositat d’un color, en comparació amb altres models de color com el RGB. A més, pots ajustar qualsevol d’aquestes tres propietats per a canviar l’aparença del color de manera predictible i controlada. Això fa que puguis controlar millor el color del teu disseny, donant més agilitat i precisió a l’hora de crear paletes i combinacions.

Menor complexitat

El model HSL pot ser més fàcil i intuïtiu d’entendre per als desenvolupadors que no tenen experiència en la teoria del color o en la manipulació de valors RGB. En lloc d’haver d’ajustar els valors de tres components de color diferents, simplement s’ajusten els valors HSL. Només fixant-te en el primer valor HSL (el del matís) sabràs com és el color que observes. A continuació, si vols saber si és un color saturat o poc saturat, hauràs de fixar-te en el segon valor. I finalment, podràs deduir si és un color fosc o clar amb l’últim valor.

Fàcil accessibilitat

El model HSL pot ser molt útil en el disseny per a l’accessibilitat web. En primer lloc, permet ajustar la lluentor d’un color mentre es manté la mateixa tonalitat i saturació, gràcies a una harmonia. Això significa que els elements amb diferents nivells de contrast són llegibles i accessibles per a totes les persones.
A més, pots crear un conjunt de la mateixa tonalitat de colors secundaris modificant només el to del color primari, mantenint la mateixa lluminositat i una saturació molt semblant.

Estalvia temps i esforç implementant el model HSL

En resum, utilitzar el model de color HSL en el teu codi CSS ofereix nombrosos avantatges. Comprendràs millor el funcionament dels colors i podràs manipular-los d’una manera més precisa. Treballaràs d’una manera més fàcil i accessible que amb altres models.

Una de les principals avantatge del model HSL és que et permet ajustar la lluentor i la saturació d’un mateix color per a aconseguir diferents tonalitats. Pots augmentar o disminuir la lluminositat per a crear variacions d’un mateix color que s’adaptin millor al teu disseny. De la mateixa manera que pots modificar la saturació per a aconseguir colors més vibrants o més subtils segons les teves necessitats.

En treballar amb el model HSL en CSS, els valors de to, saturació i lluminositat són més comprensibles i expressius que els valors dels components RGB. Això et permet experimentar amb combinacions cromàtiques més harmonioses.
A partir d’un disseny amb el mateix color, podràs modificar la lluentor i la saturació per a aconseguir diferents tonalitats.

En definitiva, utilitzant el model HSL podràs estalviar temps i esforç en el treball amb colors a l’hora de treballar amb sistemes de disseny. Comprendràs d’una manera més profunda el funcionament dels colors, i milloraràs tant la teva eficiència com l’experiència d’usuari en els teus projectes de disseny i desenvolupament.

Registra't a la nostra newsletter​

    En què et podem ajudar?