Unités de couleur
L'un des éléments de base d'une mise en page CSS réussie est la sélection de couleurs. Pour notre convenance, le langage CSS met à notre disposition plusieurs façons d'exprimer les couleurs désirées.
En voici quelques unes.
Mot-clé
Il est possible de spécifier certaines couleurs en CSS en utilisant leur nom (en anglais) directement.
Par exemple, yellow pour du jaune 🟨, orange pour du orange 🟧 et ainsi de suite. Malheureusement, il est difficile de retenir la majorité de ces noms et de se limiter à 147 couleurs. L'usage des mots-clés est donc peu fréquent à l'exception de classiques tels que: black, white, etc.
Hexadécimal
Un code hexadécimal est constitué d'un dièse # suivi de 6 caractères compris entre 0 et F. Les chiffres couvrent les valeurs de 0 à 9 et les lettres de 10 à 15 (a=10, b=11 … f=15).
Les 2 premiers caractères représentent le rouge 🟥
Les 2 du milieu le vert 🟩
Les 2 derniers le bleu 🟦
Plus une valeur est élevée, plus la couleur est présente. À l'opposée, plus une valeur est basse, plus la couleur est absente.
Par exemple, le code suivant #ff0000 indique un maximum de rouge 💯🟥 et une absence totale de vert 🚫🟩 et de bleu 🚫🟦, donnant ainsi un rouge pur.
Hex 3 caractères
Lorsque chaque couleur d'un code hexadécimal est constituée de deux caractères identiques, il est possible d'inscrire chaque caractère de façon unique.
Dans l'exemple précédent #ff0000 se déconstruit ainsi:
🟥 =
ff🟩 =
00🟦 =
00
Puisque chaque valeur est un doublé, il est possible d'abréger le code #f00.
Hex 8 caractères
Il est possible d'ajouter deux caractères supplémentaires à la fin d'un code hexadécimal régulier afin de spécifier son alpha.
00= complètement transparent.ff= complètement opaque.Toute valeur comprise entre ces deux extrêmes représente un niveau d'alpha allant de faible à fort.
rgb et rgba
RGB est l'acronyme des couleurs red 🟥, green 🟩 et blue 🟦. Pour définir une couleur rgb()il suffit de spécifier ces 3 couleurs avec une valeur comprise entre 0 et 255. Plus la valeur est élevée plus la couleur est présente.
Par exemple, le rouge pur de l'exemple précédent s'écrirait ainsi rgb(255, 0, 0) dans ce format.
Les couleurs rgba() fonctionnent sur le même principe, mais une 4e valeur comprise entre 0 et 1 permet de spécifier l'alpha de la couleur.
Par exemple, pour obtenir un rouge pur semi-transparent, il est possible d'écrire rgba(255, 0, 0, 0.5).
hsl et hsla
HSL est l'acronyme de hue, saturation et lightness (teinte, saturation et luminosité). Pour définir une couleur hsl() il faut spécifier:
Une teinte entre 0 et 255
0 = 🟥
255 = 🟦
Une saturation entre 0 et 100%
0 = La couleur est désaturée comme sur une photo noir et blanc.
100% = Couleur pure
Une luminosité entre 0 et 100%
0 = Absence de lumière, tout est noir.
50% = Lumière normale.
100% = Lumière au maximum, tout est blanc.
Par exemple, le rouge pur de l'exemple précédent s'écrirait ainsi hsl(0, 100%, 50%) dans ce format.
Les couleurs hsla() fonctionnent sur le même principe, mais une 4e valeur comprise entre 0 et 1 permet de spécifier l'alpha de la couleur.
Par exemple, pour obtenir un rouge pur semi-transparent, il est possible d'écrire hsla(0, 100%, 50%, 0.5).