Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Le lch() La fonction de couleur vous permet de choisir des couleurs dans l’espace colorimétrique CIELAB, qui est indépendant de l’appareil et couvre toute la gamme (gamme) de la perception humaine des couleurs.
Actuellement, les couleurs CSS que nous pouvons définir sont dans l’espace colorimétrique sRGB. Pendant très longtemps, les moniteurs professionnels n’ont pas été en mesure d’afficher toutes les couleurs possibles dans cette gamme. Donc, utiliser des couleurs sRGB était tout à fait suffisant, mais ce n’est plus vrai. De nos jours, les moniteurs peuvent afficher beaucoup plus de couleurs qu’il n’en existe dans l’espace colorimétrique sRGB. Avec lch() nous avons accès à ces couleurs (actuellement Safari 15+ uniquement).
La fonction prend 3 valeurs séparées par des espaces.
div {
background-color: lch(78% 172.33 248.2);
}l – légèreté
La première valeur définit la luminosité. Il s’agit généralement d’un nombre compris entre 0 % (représentant le noir) et 100 % (représentant le blanc). C’est typiquement un nombre compris entre 0% et 100% car la valeur peut dépasser 100% jusqu’à 400% représentant des blancs extra-lumineux sur certains systèmes. C’est la même légèreté que dans le lab() fonction couleur.
div {
background-color: lch(0% 0 0);
}c – chrominance
Le deuxième argument est la chrominance (représentant approximativement la “quantité de couleur”). C’est une valeur comprise entre 0 et 230.
div {
background-color: lch(100% 180 0)
}h – teinte
Le troisième argument est l’angle de teinte. 0deg pointe le long de l’axe “a” positif (vers le rouge violacé). Points à 90 degrés le long de l’axe “b” positif (vers le jaune moutarde), points à 180 degrés le long de l’axe “a” négatif (vers le cyan verdâtre) et points à 270 degrés le long de l’axe “b” négatif (vers le bleu ciel).
div {
background-color: lch(100% 180 90);
}Voir sur CodePen.