Il existe plusieurs façons de représenter les couleurs en CSS. L'un d'eux est le système HSL. Dans cet article, je vais vous montrer quelles possibilités cela ouvre à un concepteur de mise en page.Qu'est-ce que HSL?
Le nom du format HSL est dérivé d'une combinaison des premières lettres Hue (teinte), Saturate (saturation) et Lightness (légèreté ou luminosité).La teinte est la valeur de couleur sur la roue chromatique et est définie en degrés. 0 ° correspond au rouge, 120 ° au vert et 240 ° au bleu. La valeur de la teinte peut varier de 0 à 359.
La saturation est l'intensité de la couleur, mesurée en pourcentage de 0% à 100%. Détermine la distance entre la couleur et le gris de la même luminosité.La luminosité caractérise la luminosité de la couleur et est indiquée en pourcentage de 0% à 100%. Les petites valeurs rendent la couleur plus foncée et les valeurs élevées plus claires, les valeurs extrêmes 0% et 100% correspondent au noir et blanc.
Avantages HSL ()
Le principal avantage de HSL est la possibilité de spécifier les caractéristiques de couleur indépendamment les unes des autres . Cela vous ouvre de grandes opportunités. Vous pouvez facilement rendre la couleur plus lumineuse, plus sombre, plus saturée ou décolorer. Et tout en conservant son ombre. Ou vice versa - changez les nuances sans changer leur saturation ou leur luminosité. Les préprocesseurs sont souvent utilisés pour utiliser ces fonctionnalités, mais vous pouvez également vous en passer.Quelques exemples
Couleurs dérivées de la même teinte
L'une des tâches les plus courantes: fabriquer un composant qui prendra une seule teinte de base, mais qui consiste en plusieurs variantes. Dans mon exemple, il s'agit d'une alerte typique dans laquelle la couleur du texte, de l'arrière-plan et du trait ont la même teinte et la même saturation mais une luminosité différente:.success {
border-color: hsl(120, 50%, 40%);
color: hsl(120, 50%, 20%);
background-color: hsl(120, 50%, 90%);
}
Voyez comme c'est beau et clair? Il est immédiatement évident qu'il s'agit d'une «famille» de fleurs. Dans d'autres formats, cela ressemblerait à ceci:
.alert {
border-color: rgb(51, 153, 51);
color: rgb(25, 77, 25);
background-color: rgb(217, 242, 217);
}
.alert {
border-color: #339933;
color: #194d19;
background-color: #d9f2d9;
}
Je ne sais pas pour vous, mais il m'est difficile de regarder un tel code pour dire si ces couleurs sont en quelque sorte connectées ou non.Mais ce sont des bagatelles. La véritable puissance est révélée lors de l'utilisation des propriétés personnalisées CSS.Comme on dit, surveillez vos mains. Si nous faisons n'importe quel composant de la couleur, par exemple une teinte, une variable, alors nous pouvons facilement créer un nombre infini de variations de notre composant en ne changeant que la teinte de base. Et tous les dérivés en seront repoussés..alert {
border-color: hsl(var(--hue), 50%, 40%);
color: hsl(var(--hue), 50%, 20%);
background-color: hsl(var(--hue), 50%, 90%);
}
Décoloration
Dans cet exemple, le bouton d'arrêt a une saturation réduite. Il a toujours une teinte bleue subtile, mais il est presque gris. Et lorsque vous survolez, le bouton conserve la teinte et la saturation, mais il devient plus sombre.Pour résoudre ce problème, il suffit de modifier un seul des trois paramètres pour obtenir une couleur dérivée mais similaire. Ce qui lors de l'utilisation de RVB ou hex n'est pas si facile à faire.Comme dans le premier exemple, vous pouvez facilement modifier la teinte sans affecter toutes les autres caractéristiques de couleur de votre composant.Héritage des couleurs
L'une des techniques les plus cool: créer une teinte à partir d'une autre. Ceci est réalisé par simple addition dans calc ().:root{
--hue: 120;
}
header {
background-color: hsl(var(--hue), 30%, 20%)
}
header button {
background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}
Dans cet exemple, la teinte du bouton dépend (+ 130 ° de la roue chromatique) de la teinte du conteneur.Ainsi, de manière simple, vous pouvez créer des palettes de couleurs flexibles à part entière pour vos sites, en définissant une seule teinte de base et en partant de celle-ci.Et tous vos composants conserveront la saturation et la luminosité, comme démontré dans les exemples précédents.
Avenir
Dans la spécification CSS Color Module Level 4 , de nouvelles fonctions ont été décrites: lab () et lch () pour spécifier des couleurs dans les formats du même nom. LCH a la même flexibilité que hsl, mais apporte un certain nombre d'améliorations, avec un œil sur les appareils modernes. Vous pouvez en savoir plus à ce sujet dans l'article « Couleurs LCH en CSS: quoi, pourquoi et comment? ".Total
À mon avis, le format hsl a une flexibilité fantastique par rapport aux alternatives. En combinaison avec des variables, vous apportez pratiquement toutes les possibilités de travailler avec des couleurs des préprocesseurs au CSS natif.PS Désolé pour le titre bruyant :)