Cours comprendre les couleurs en CSS, tutoriel & guide de travaux pratiques en pdf.

Couleur HSL

Le CSS3 inclut maintenant dans la norme, la notion de teinte, de saturation et de luminosité (Hue, Saturation, Luminosity).
Le Hue permet de modifier la teinte donc la couleur, c’est une valeur numérique.
Par exemple, 0 (ou 360) représente le rouge, 120 le vert et 240 le bleu ; c’est une mesure sur la roue chromatique. Entre ces 3 valeurs, ce sont les nuances.
• entre 0 et 119 (nuance de rouge) ; • entre 120 et 239 (nuance de vert) ; • entre 240 et 359 (nuance de bleu).
La saturation est une valeur de pourcentage, 100% équivalent à la couleur.
La luminosité est une valeur en pourcentage:
• 0% est le sombre (noir) ; • 50% est la moyenne ; • 100% est la lumière (blanc).
Exemple :
CSS
p.hsl{ background-color:hsl(100, 100%, 50%); color:hsl(250, 100%, 50%); } p.hslAutre{ background-color:hsl(100, 100%, 50%); color:hsl(250, 100%, 25%);/* couleur plus sombre que la précédente */ }
HTML
<p class= »hsl »> couleurs gérées en hsl </p> <p class= »hslAutre »> couleurs gérées en hsl </p>