Utiliser HSL pour vos couleurs

La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dans cet article en deux parties, Dudley Storey nous montre tout son intérêt.

Par

La méthode HSL de création de couleurs en CSS3 est très bien supportée par les navigateurs modernes mais quelque peu négligée par les codeurs, en raison sans doute de sa différence avec les autres modèles :

  • Il est facile de traduire d’hexadécimal en RGB, mais plus difficile de traduire de ces modèles vers HSL.
  • Les valeurs Hex et RGB de Photoshop peuvent être transférée directement dans votre CSS, ce qui n’est pas le cas de HSB qui n’est pas la même chose que HSL.
  • HSL ne vous offre pas une plus grande palette de couleurs que Hex et RGB, on reste sur la même étendue.

Et pourtant, malgré ces quelques restrictions, HSL est la méthode préférée des designers, voici pourquoi.

image

Tout d’abord, il vous faut un nouveau modèle mental pour la couleur, focalisez-vous sur le cercle chromatique. Vous voyez le rouge, le vert et le bleu : au sommet, le rouge est à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés, ensemble ils partagent le cercle en trois parties égales. À distance égale entre eux se trouvent le jaune, le cyan et le magenta (du système de couleurs CMYK) respectivement à 60, 180 et 300 degrés.

NdT : HSL signifie Hue, Saturation, Luminosity, c’est à dire Teinte, Saturation, Luminosité. Ce sont les trois composantes que nous retrouverons dans le code hsl. Pour une solide intro à la terminologie de la théorie des couleurs, vous pouvez consulter l’excellent article de Cameron Chapman. Voyez également la liste de ressources en fin d’article.

En partant du sommet et en tournant dans le sens des aiguilles d’une montre, nous passons par toutes les couleurs de l’arc en ciel.

La première composante de HSL est donc très facile : c’est la position de la couleur (la “teinte”) sur le cercle chromatique, exprimée en degrés.

Pour prendre un exemple, le violet se trouve à mi-chemin du bleu (240°) et du magenta (300°), son code serait donc hsl(270, 100%, 50%) (ne vous inquiétez pas pour les autres composantes du code, nous allons voir ça tout de suite). Pour obtenir un violet “plus bleu”, il suffit de revenir en arrière vers le bleu, par exemple en faisant hsl(255, 100%, 50%).

La deuxième composante est la saturation, également décrite comme l’intensité. Plus on s’éloigne du centre, plus l’intensité de la couleur augmente, atteignant le maximum de saturation sur le bord extérieur du cercle. Au contraire, plus on va vers le centre, plus la couleur tend vers le gris. En d’autres termes, le degré de saturation dépend de la distance à laquelle on se trouve du gris. Toutes les couleurs HSL ayant une saturation de 0% ont la même ombre (shade) de gris, toutes choses étant égales par ailleurs.

Valeurs de saturation hsl(45, x%, 50%)

hsl(45,0%,50%)
hsl(45,25%,50%)
hsl(45,50%,50%)
hsl(45,75%,50%)
hsl(45,100%,50%)

Note : Pour la saturation et la luminosité, le signe % doit toujours être inclus, même si la valeur est égale à 0.

La luminosité, ou “brillance”, spécifie la distance à laquelle la couleur se trouve du blanc et du noir. Un niveau de luminosité de 50% signifie que la couleur est en équilibre parfait entre le clair et le sombre, et demeure inchangée. Si l’on réduit la luminosité, la couleur s’assombrit : toute couleur ayant un niveau de luminosité de 0 est un noir pur. Si l’on augmente la luminosité, la couleur s’éclaircit et à l’extrême (100%) elle est blanche. Entre les deux, vous avez de nombreuses possibilités, comme illustré ci-dessous :

Valeurs de luminosité hsl(90, 100%, x%)

hsl(90, 100%, 0%)
hsl(90, 100%, 25%)
hsl(90, 100%, 50%)
hsl(90, 100%, 75%)
hsl(90, 100%, 100%)

Avec un peu de pratique, cette carte mentale de la couleur deviendra instinctive et vous trouverez probablement qu’il est bien plus facile de créer et de manipuler les couleurs spécifiées en HSL. Même si vous choisissez de ne pas toujours l’utiliser, HSL présente quelques avantages spécifiques dans certaines circonstances — nous verrons cela dans le prochain article.

Note :

Eric Meyer propose un diagramme utile permettant de traduire les mots-clés de couleurs habituels en valeurs HSL, et Lars Gunther a construit un outil pédagogique intéressant pour utiliser le cercle chromatique.


Intéressé par le design ? Retrouvez une liste des meilleurs articles et ressources du web.

Article Color du Dico CSS.
3 raisons d'utiliser HSL, par Dudley Storey

Articles sur les mêmes thèmes dans la Cascade :

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils

  • Color Template, pour tout savoir sur les couleurs, un très joli site, très complet et instructif.
  • Adobe Kuler, outil en ligne pour choisir ses couleurs, très complet et inspirant.
  • Color Scheme Designer, comme Kuler, avec un fonctionnement différent, très bien fait.
  • WebColorData, avec cet outil les couleurs n’auront plus aucun secret pour vous. Entrez l’url d’un site internet et WebColorData référence en un panel les couleurs dominantes trouvées. Vraiment pratique.
  • Color.io, autre outil très pratique pour choisir une couleur et toute la palette complémentaire.
  • Pictaculous, quel schéma de couleurs utiliser avec une image ? Uploadez votre image sur Pictaculous, il vous donnera une belle palette de couleurs.
  • Mudcube colour sphere vous permet de créer des schémas de couleurs et de vérifier leur accessibilité aux personnes souffrant de déficiences visuelles.
  • 0 to 255, un outil simple pour trouver des variations sur une couleur.
  • Hex.colorrrs, un convertisseur de Hex en RGB, simple, bien fait, visualisation de la couleur en cours de frappe.
  • Brand Colors, une collection de palettes de couleurs des grandes marques.
  • The colors of motion, un site créatif par Charlie Clark qui explore l’utilisation des couleurs dans les films. Pas de mots, juste des couleurs. Choisissez un film, cliquez sur une bande de couleur, regardez les images et l’harmonie des couleurs.
  • Spectrum, une superbe application (Mac) pour créer vos palettes, les triturer, les exporter, intégrer directement une couleur dans CSS, etc.

    Du même auteur dans La Cascade :

Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.