Les modes de couleurs HSL et HSLA en CSS 3

07Oct

Les modes de couleurs HSL et HSLA en CSS 3

Grâce aux nouveaux modes définis dans CSS3, hsl() et hsla(), il devient possible de faire varier intuitivement les couleurs des objets sans logiciel de graphisme.

En effet, il était impossible avec les modes rgb() et rgba() de trouver directement des variations de teintes ou de luminosité, il fallait nécessairement passer par un logiciel de dessin pour faire la correspondance. Le mode hsl() - Teinte (h / hue), Saturation (s / saturation) et Luminance (l / lightness) - permet de se représenter très exactement l'effet qu'on va donner, sans utiliser de logiciel graphique.

 

Teinte

HSL n'ajoute pas de couleurs supplémentaires par rapport au RGB, mais on peut se représenter les couleurs, sous forme de cercle, avec le paramètre de teinte :

Zones Hue

  • 0 – rouge
  • 60 – jaune
  • 120 – vert
  • 180 – turquoise
  • 240 – bleu
  • 300 – rose
  • 360 – rouge

 

Exemples donnés par le W3C

* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */ 
* { color: hsl(120, 100%, 25%) } /* dark green */ 
* { color: hsl(120, 100%, 75%) } /* light green */ 
* { color: hsl(120, 75%, 75%) }  /* pastel green */

On le voit, il est très simple de concevoir des variations en ne faisant varier qu'un seul paramètre, ce qui était impossible avec le mode rgb(). Il devient donc possible de coder beaucoup plus naturellement nos animations, par exemple "mon rouge devient 20% plus clair au passage de la souris", ou encore "je prends la couleur complémentaire de mon fond", en quelques secondes.

 

Luminance et Saturation

Les deux autres paramètres du HSL sont également faciles à se représenter grâce au schéma suivant qui illustre la variation des 3 paramètres :

Zones HSL

La saturation est l'intensité de la couleur, à 0% elle est donc le niveau de gris défini par la luminance.

 

La luminance est l'éclat de la couleur, ce qui revient à ajouter du noir ou du blanc à la teinte : à 50% elle n'est pas altérée, tandis qu'à 100% elle est blanche et à 0% elle est noire.

 

Opacité

Le paramètre optionnel d'opacité, lui, a exactement le même fonctionnement en hsl qu'en rgb : le mode de couleur devient alors hsla() ou rgba(), ce dernier paramètre permettant de faire varier entre le totalement transparent (0) et le totalement opaque (1).

 

Application pratique

Prenons le cas d'un rouge, avec le code hexadécimal #7E100B.

  #7E100B
  rgb(126,16,11)
  hsl(3,83.9%,26.9%)
 

Faisons-le maintenant varier en le rendant 20% plus clair, c'est à dire en augmentant de 20% le paramètre de luminance :

  hsl(3,83.9%,46.9%)

 

Les correspondances rgb (219,29,19) ou hexa (#DB1D13) auraient été impossibles à deviner et il nous aurait fallu utiliser un logiciel, alors qu'on a pu faire la manipulation instantanément en mode hsl.

 

De la même façon, passons notre objet en vert en un clin d'oeil en faisant varier cette fois sa teinte :

 hsl(120,83.9%,46.9%)

 

Inconvénients majeurs

Malheureusement, le mode hsl() peut également prêter à confusion pour les utilisateurs de Photoshop, qui comprend son propre modèle hsl, différent de celui-ci. Il faut donc passer par un convertisseur, comme l'excellent Colorzilla ou, pour plus d'options, Kuler (édité par Adobe). De plus, la rétrocompatibilité ne s'étend qu'à IE9+, donc il peut s'avérer nécessaire d'utiliser une bibliothèque JavaScript comme Modernizer pour gérer les navigateurs les plus anciens.

 

Bref, à coup sûr un mode qui va très largement se répandre à l'avenir, mais le RGB a encore de beaux jours devant lui.

 

Coordonnées

A propos

Conception de sites internet professionnels

21 ans d'expérience :

- Chef de projet Web pendant 5 ans

- Puis Indépendant depuis 16 ans.


En savoir plus  

Newsletter

Inscrivez vous à ma lettre d'informations pour vous tenir au courant des infos récentes (mises à jour CMS, nouvelles références, opérations spéciales...)