Utiliser les couleurs HSL dans CSS —

À propos de l'auteur

Ahmad Shadeed est un designer UX et développeur front-end de Palestine. Il aime travailler sur des projets de conception et de développement front-end stimulants. Il a écrit un…

En savoir plus sur

Ahmad
↬

D'après mon expérience, la plupart des couleurs que je vois utiliser dans CSS sont hexadécimales et RVB. Récemment, j'ai commencé à voir plus d'utilisation des couleurs HSL. Cependant, je pense toujours que HSL est négligé, et lorsqu'il est utilisé à son plein potentiel, il peut nous aider à mieux travailler avec les couleurs en CSS.

Introduction

Habituellement, nous utilisons des codes de couleur hexadécimaux (couleurs hexadécimales) qui sont bien, mais ils ont quelques problèmes :

• Ils sont limitatifs ;
• Ils sont difficiles à comprendre en les lisant.

Par « limité », je veux dire qu'il n'est pas facile de modifier la couleur sans ouvrir une roue chromatique et choisir une couleur vous-même. En plus de cela, il n'est pas facile de deviner de quelle couleur est la couleur en regardant le code hexadécimal.

Considérez la figure suivante :

J'ai choisi une couleur hexagonale pour un bleu ciel et une plus foncée. Notez que les couleurs hexadécimales ne sont pas liées les unes aux autres. Il est difficile de dire qu'ils sont tous les deux bleus mais avec des nuances différentes.

Dans un scénario réel, vous devrez peut-être créer une nuance plus claire ou plus foncée d'une couleur pour tester ou valider rapidement quelque chose. Avec les couleurs hexadécimales, cela n'est pas possible tant que vous n'ouvrez pas le sélecteur de couleurs.

Heureusement, les couleurs HSL peuvent nous aider à résoudre ce problème spécifique, et cela nous ouvre de nombreuses possibilités.

Qu'est-ce que le HSL ?[19659007]HSL signifie teinte, saturation et luminosité. Il est basé sur la roue chromatique RVB. Chaque couleur a un angle et une valeur en pourcentage pour les valeurs de saturation et de luminosité.

Prenons un exemple de la couleur bleu ciel dont nous avons parlé précédemment. Tout d'abord, nous choisissons la couleur comme nous le faisons habituellement dans un sélecteur de couleurs, et nous nous assurons d'obtenir la valeur HSL correspondante.

Remarque : J'utilise l'application Sketch, mais vous utilisez l'outil de conception de votre choix.

Considérez la figure suivante :

Notez que les valeurs HSL y sont. Le premier est l'angle, qui représente l'angle de la couleur que nous avons. Dans ce cas, c'est bleu ciel. Une fois que nous avons l'angle, nous pouvons commencer à ajuster la saturation et la luminosité selon nos besoins.

Saturation

Saturation contrôle le degré de saturation de la couleur. 0% est complètement insaturé, tandis que 100% est complètement saturé.

Légèreté

Comme pour Luminositéelle contrôle la luminosité ou l'obscurité de la couleur. 0% est noir et 100% est blanc.

Considérez la figure suivante :

Avec cela, nous avons trois valeurs qui représentent la couleur, l'angle, la saturation et la luminosité. Voici comment nous pouvons utiliser la couleur dans CSS :

.element {
    couleur de fond : hsl (196, 73 %, 62 %);
}

En modifiant l'angle de couleur nous pouvons obtenir des couleurs similaires en saturation et en luminosité à celle de base. Ceci est très utile lorsque vous travaillez sur de nouvelles couleurs de marque car cela peut créer un ensemble cohérent de couleurs de marque secondaires.

Considérez la figure suivante :

Pensez-vous que les trois couleurs sont liées les unes aux autres en termes de saturation de la couleur et de luminosité ou de luminosité ? Cela a été réalisé en changeant uniquement l'angle de couleur. C'est ce qui est génial avec les couleurs HSL. Il est plus convivial à lire et à modifier que tout autre type de couleur.

Use Cases For HSL Colors

Changing Colors On Hover

Quand un la couleur d'un composant spécifique doit apparaître plus foncée au survol, les couleurs HSL peuvent être parfaites pour cela. Cela peut être utile pour les composants tels que les boutons et les cartes.

:racine {
  --primaire-h: 221;
  --primary-s : 72 % ;
  --primaire-l : 62 % ;
}

.bouton {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.button:hover {
  --primaire-l : 54 % ;
}

Remarquez comment j'ai combiné des variables CSS avec des couleurs HSL. Au survol, il me suffit de modifier la valeur de luminosité. N'oubliez pas que plus la valeur est élevée, plus le briquet. Pour une teinte plus foncée, nous devons réduire la valeur.

Une combinaison de couleurs teintées

HSL peut être pratique lorsque nous avons un design qui utilise la même couleur mais avec des nuances différentes. Considérez la conception suivante :

La navigation d'en-tête principale a la couleur principale, tandis que la navigation secondaire a une teinte plus claire. Avec HSL, nous pouvons facilement obtenir la teinte la plus claire en modifiant la valeur de la luminosité.

Cela peut être extrêmement utile tout en ayant une interface utilisateur avec plusieurs thèmes. J'ai créé deux thèmes et le passage de l'un à l'autre ne nécessite que de modifier le degré de teinte.

Premier thème :

Deuxième thème :

Palettes de couleurs

En modifiant la luminosité, nous pouvons créer un ensemble de nuances pour une couleur qui peut être utilisé dans toute l'interface utilisateur si possible.

Ceci est utile pour les systèmes de conception où les concepteurs fournissent aux développeurs les nuances pour chaque couleur de la marque.

Voici une démo interactive qui le montre. Le curseur d'entrée ne modifie que la valeur de la teinte et le reste des nuances change en fonction de cela.

Couleur blanche personnalisée

Souvent, nous devons colorer un texte en blanc pour le faire ressortir. Cette couleur blanche est ennuyeuse, et nous pouvons la remplacer par une nuance très claire de la couleur que nous avons.

Considérez l'exemple suivant :

Remarquez que le blanc à droite est trop. Nous pouvons le remplacer par un blanc personnalisé dérivé d'une nuance très claire de la couleur que nous avons. À mon avis, c'est bien mieux.

Variations d'un bouton

Un autre cas d'utilisation utile pour les couleurs HSL est lorsque nous avons des options primaires et secondaires de la même couleur mais avec des nuances différentes. Dans cet exemple, le bouton secondaire a une teinte très claire de la couleur principale. Les couleurs HSL sont parfaites pour cela.

:racine {
  --primaire-h: 221;
  --primary-s : 72 % ;
  --primaire-l : 62 % ;
}

.bouton {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

.bouton--secondaire {
    --primaire-l : 90 % ;
    couleur : #222 ;
}

.bouton--fantôme {
    --primaire-l : 90 % ;
    couleur d'arrière-plan : transparent ;
    bordure : 3px solide hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

Ajuster les variations du bouton principal est rapide et peut être étendu davantage pour une utilisation plus large. Changer la valeur hue changera tous les thèmes des boutons.

Effets dynamiques délavés

Dans certains cas, nous pourrions avoir besoin d'un dégradé pour avoir une nuance très claire de l'autre couleur. Avec HSL, nous pouvons utiliser la même couleur mais avec une valeur de luminosité différente pour la seconde.

.section {
  background: linear-gradient(à gauche, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primaire-s), 95%));
}

.section 2 {
  --primary-h: 167;
}

Le dégradé commence par la droite avec une couleur unie, puis s'estompe vers la teinte plus claire. Cela peut être utilisé pour une section de héros décoratif, par exemple.

C'est tout avec les cas d'utilisation. J'espère que vous avez appris quelque chose de nouveau et d'utile.

Conclusion

Les couleurs HSL sont très puissantes lorsque nous les utilisons correctement. Ils peuvent nous faire gagner du temps et des efforts et même nous aider à explorer les options d'application de la couleur au design.

(vf, il)