3 raisons d'utiliser HSL pour vos couleurs

Maintenant que nous connaissons mieux HSL, Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie. Designer devient plus simple, plus facile et plus rapide.

Par

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.

image

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 en fin d’article. 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 :

See the Pen Animated Radio Inputs by simurai (@simurai) on 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% );
}
image
Lumière témoin rouge, inspirée de simurai

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% );
}
image
Lumière témoin bleue, vite fait !

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 !


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

Article Color du Dico CSS.

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 :

Utiliser HSL pour vos couleurs
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.