Nous avons vu dans l’article précédent tout l’intérêt qu’il y avait à utiliser HSL pour créer et manipuler les couleurs, mais il est des domaines où cela présente tellement d’avantages qu’il est presque surprenant que les développeurs n’en profitent pas plus.

Créer des prototypes rapides de schémas de couleurs

HSL est idéal pour la création rapide de schémas de couleurs, en particulier pour les développeurs qui ne maîtrisent pas parfaitement le design ou la théorie des couleurs. (NdT : si c’est votre cas, pas d’inquiétude ! Vous retrouverez dans la Cascade tout un tas d’articles et de ressources pour maîtriser les couleurs comme un pro, voyez la liste dans la page du tag "couleur"). L’utilisation de quelques règles simples permet de créer des choix de couleurs harmonieux qui fonctionnent en toute situation.

Prenons un exemple, disons que vous avez une couleur principale et que vous voulez l’utiliser pour générer rapidement le schéma de couleurs d’un site. Admettons, par exemple, que vous ayez une couleur orange dérivée du logo du client, qui correspond à hsl(30, 90%, 29%).

Pour générer instantanément une couleur complémentaire, il suffit d’ajouter 180 degrés à la valeur de la couleur : dans notre exemple, cela donne hsl(210, 90%, 29%). Facile, non ? Et si votre première couleur a une valeur supérieure à 180 degrés, pas de souci, votre navigateur saura “faire le tour du cadran de l’horloge” et convertir les valeurs supérieures à 360 degrés. Il sait même gérer les valeurs négatives.

Pour créer en un tournemain un schéma de couleurs monochromatique : prenez la valeur de saturation et soustrayez un tiers. Notre base de couleur est hsl(30, 90%, 29%), les couleurs additionnelles seront donc hsl(30, 60%, 29%) et hsl(30, 30%, 29%).

Pour un schéma de couleurs neutre : soustrayez et/ou ajoutez à la couleur un nombre de degrés identiques à chaque fois, mais jamais supérieur à 90°. Par exemple, à partir d’une couleur de 30°, on obtiendra hsl(0,90%,29%) et hsl(60,90%,29%).

Pour un schéma de couleurs triadique, ajoutez 120° à la valeur de la couleur principale.

Bien utilisé, ceci élimine le débat sur la question de savoir “ce qui irait bien avec ça ?” et vous aide à générer le design d’un site très rapidement.

Ajustement rapide de couleurs

Combien de fois un client vous a-t-il demandé “pourriez-vous éclaircir un peu le background ?” Si vous avez spécifié les couleurs en RGB ou en Hexadécimal, il vous faudra ajuster trois composants simultanément, en faisant attention que l’un ne prenne pas plus d’importance que l’autre. Si votre schéma de couleurs est en HSL, rien de plus facile et sûr. Le background orange doit être plus sombre ? Vous prenez votre background :

body { background: hsl(60,100%,50%); }

...et vous réduisez la dernière composante (luminosité) :

body { background: hsl(60,100%,40%); }

Et voilà ! Et si vous avez utilisé les techniques de schémas de couleurs dont nous avons parlé ci-dessus, il suffit d’ajuster les autres couleurs — tout aussi facilement.

Créer rapidement des variantes de couleurs

J’ai travaillé sur un article qui utilise un dégradé radial pour créer une lumière témoin sur le bouton que vous voyez ici (le rendu est meilleur sur Webkit au moment où j’écris ceci), basé sur ce travail de simurai :

voir Animated Radio Inputs de simurai dans CodePen

Si l’on fait abstraction des préfixes constructeurs, le code CSS3 ressemble à ceci :

//CSS
input {
  background-image:
    radial-gradient( hsla(0,100%,90%,1) 0%,
    hsla(0,100%,70%,1) 15%,
    hsla(0,100%,60%,.3) 28%,
    hsla(0,100%,30%,0) 70% );
}

Si je veux une lumière bleue, tout ce que j’ai à faire c’est de faire tourner la composante couleur du code HSL :

//CSS
input {
  background-image:
    radial-gradient( hsla(200,100%,90%,1) 0%,
    hsla(200,100%,70%,1) 15%,
    hsla(200,100%,60%,.3) 28%,
    hsla(200,100%,30%,0) 70% );
}

La nouvelle lumière a la même intensité et la même brillance, dans une couleur différente. Pas besoin de bricoler entre les rouges, les verts et les bleus.

Quand ne faut-il  pas  utiliser HSL ?

Réponse courte : quand votre site doit être visible sur IE8 et avant. Si vous avez besoin de la compatibilité IE, Sass peut automatiquement transférer les couleurs HSL en hexadécimal... Donc vous pouvez commencer dès aujourd’hui à profiter de tout ce qu’HSL peut vous apporter !