4.7 Unités de couleur CSS

Noms de couleur

CSS donne un nom à 145 couleurs, des plus basiques (noir, blanc, orange, jaune, bleu…) aux plus spécifiques (lawngreen, orchid, crimson…).

body { color: black;}
a { color: orange;}

Comme les noms de couleurs sont difficiles à retenir et que vous souhaitez probablement des couleurs très spécifiques, les noms de couleurs ne sont pas souvent utilisés.

rgb

Les écrans d’ordinateur, les téléviseurs et les téléphones mobiles utilisent tous le modèle de couleurs RVB pour afficher les couleurs. Fondamentalement, chaque couleur est définie par une combinaison de rouge, vert et bleu. Il y a 256 valeurs possibles pour le rouge, le vert ou le bleu. Étant donné que les ordinateurs commencent à compter à 0 (zéro), la valeur maximale est de 255.

Étant donné qu’une couleur est le résultat d’une combinaison de rouge, de vert et de bleu, chacune de ces 3 couleurs ayant 256 valeurs possibles, il existe 256 * 256 * 256 = 16,777,216 couleurs disponibles.

Le modèle RVB étant directement lié à la manière dont les couleurs sont rendues physiquement, il est devenu une unité de couleur CSS.

Par exemple, la couleur rouge de ce site Web est 219 quantités de rouge, 78 de vert et 68 de bleu :

a { color: rgb(219, 78, 68);}

La couleur noire ne contient ni rouge, ni vert, ni bleu :

body{ color: rgb(0, 0, 0);}

De l’autre côté du spectre, le blanc correspond à la quantité totale de chaque rouge, vert et bleu :

body { color: rgb(255, 255, 255);}

rgba

L’unité de couleur rgba est rgb à laquelle nous ajoutons une valeur alpha (comprise entre 0 et 1, en valeurs décimales), qui définit le degré de transparence de la couleur :

body{ color: rgba(0, 0, 0, 0.8);}

Une couleur noire légèrement transparente.

Le but d’une couleur transparente est de se fondre dans l’arrière-plan et, par conséquent, de paraître légèrement différent en fonction du contexte. C’est particulièrement utile pour les couleurs de fond.

hsl et hsla

HSL est un autre moyen de définir une couleur. Pensez-y comme une roue de couleur.

Au lieu d’une couleur combinant le rouge, le vert et le bleu, vous définissez :

• Hue – la teinte, une valeur comprise entre 0 et 360, définit la couleur souhaitée.
• Saturation, le pourcentage compris entre 0% et 100%, définit la quantité de couleur désirée.
• Lightness – la luminosité, le pourcentage compris entre 0% et 100%, définit le niveau de luminosité souhaité.

Encore une fois, la couleur rouge de ce site Web est définie de cette manière dans HSL :

a{ color: hsl(4, 68%, 56%);}

4 indique que c’est rouge 68% indique que le rouge est assez important 56% indique qu’il est à mi-chemin entre le noir et le blanc

L’unité couleur hsl est plus facile à comprendre que rgb car le résultat attendu est plus clair. Vous définissez une couleur en 3 étapes distinctes et vous pouvez jouer avec chaque valeur pour obtenir la couleur souhaitée. Si vous voulez une nuance jaune, vous pouvez commencer avec une valeur telle que hsl(50, 68%, 56%), et modifier les valeurs Saturation et Luminosité pour trouver la nuance que vous recherchez.

hsla est identique à hsl, avec la valeur ajoutée de pouvoir définir une valeur alpha :

body { color: hsla(4, 68%, 56%, 0.5);}

Une couleur rouge transparente

Hexadécimal

Les couleurs en CSS peuvent également être définies avec des valeurs hexadécimales, comme #db4e44.

Pour comprendre ce que sont les valeurs hexadécimales, examinons le fonctionnement des opérations binaire et décimale :

Considérez les chiffres de 0 à 9 et les lettres AB comme des symboles.

Les humains utilisent le système décimal. Nous avons 10 symboles pour former des nombres.

En hexadécimal, nous avons 16 symboles pour former des nombres. Parce que 0-9 ne sont pas assez de symboles, nous utilisons également A-F. Et ça commence à zéro. Alors:

• le nombre4 en hexadecimal est 4
• le nombre 12 en hexadecimal est C
• le nombre 16 en hexadecimal est 10 car après avoir épuisé les symboles (le dernier étant F), car après avoir épuisé les symboles (le dernier étant F), vous ajoutez un deuxième symbole à gauche et vous incrémentez (0 devient 1) et le droit recommence (de F à 0)

Dois-je m’en souvenir ?

Pas du tout ! C’est ici pour expliquer le fonctionnement des valeurs hexadécimales. La chose la plus importante à retenir est qu’il existe 16 symboles hexadécimaux.

Tout comme RGB, une valeur de couleur hexadécimale est une combinaison de rouge, de vert et de bleu, chacune d’entre elles représentant une valeur hexadécimale, comme DB pour le rouge, 4E pour le vert et 44 pour le bleu.

Comme le rouge, le vert ou le bleu ne peuvent avoir que 2 symboles, leurs valeurs possibles sont 16 * 16 = 256, ce qui correspond à l’unité de couleur RVB !

Pourquoi ne pas utiliser RVB alors ?

Habituellement, lors du choix des couleurs, vous ne les écrivez pas directement. Vous pouvez soit utiliser un sélecteur de couleur, soit le copier / coller à partir de Photoshop, ou choisir une palette de couleurs quelque part.

Les valeurs hexadécimales sont plus faciles à copier et à coller car elles ne comportent que 6 caractères.

Il est plus facile de copier-coller un seul champ que 3 champs distincts.

En CSS, vous devez uniquement ajouter une valeur de couleur hexadécimale avec un dièse – hash #.

Lequel choisir ?

Si vous n’avez pas l’intention d’utiliser une couleur transparente, respectez les valeurs hexadécimales, car elles sont plus faciles à copier / coller et ne prennent pas beaucoup de place dans votre code.

Si vous voulez un peu de transparence, convertissez votre couleur de hex en rgba et utilisez l’unité de couleur rgba.

Si vous voulez jouer avec votre couleur directement dans le navigateur, essayez hsl.