Couleurs

Encodage des couleurs

En informatique, les couleurs fonctionne en mélangeant une valeur de rouge, de vert et de bleu. Ces valeurs, que nous appelerons "canaux", sont généralement un nombre entier qui doit être entre 0 et 255 inclusivement. Si nous spécifions une couleur ayant 0 dans tous ces canaux, la couleur résultante sera noir. Si la valeur dans tous les canaux est de 255, alors nous avons la couleur blanche. Si nous mettons 255 dans le canal rouge, mais 0 dans le canal vert et bleu, nous aurons une couleur rouge. En donnant des valeurs à nos 3 canaux, nous sommes en mesure d'utiliser plus de 16 millions de couleurs.

Il existe de nombreux standard pour spécifier les 3 canaux d'une couleur. En CSS, nous avons l'embarras du choix. Voici une liste non exhaustive de façons de définir une couleur en CSS:

Hexadécimal

Vous avez probablement déjà vu ce genre de code en ligne. Chaque canal de couleur est représenté un nombre hexadécimal à 2 chiffres. Puisqu'il y a 3 canaux, nous avons donc 6 chiffres hexadécimal.

Ex: #F78F20

Hexadécimal court

C'est une façon plus courte de définir une couleur hexdécimal. Essentiellement, nous utilisons uniquement des valeurs de 0 à 16 pour chaque canal. Bien que cela nous permette de raccourcir notre code, cela diminue de beaucoup les possibilités de couleurs. En effet, en utilisant cette méthode, nous avons accès à seulement 4096 couleurs différentes au lieu des 16 millions disponibles pour votre ordinateur.

Ex: #000

RGB

C'est une façon facile de définir la valeur des canaux rouge, vert et bleu respectivement avec une valeur entre 0 et 255.

Ex: rgb(255, 90, 130)

RGBA

C'est le même principe que le RGB, mais en ajoutant un quatrième canal que nous appelerons le canal "alpha". Ce canal représente la transparence de la couleur. La valeur du canal alpha est un nombre à virgule entre 0 et 1. À 0, la couleur est complètement transparente et à 1 la couleur est complètement opaque.

Ex: rgba(123, 25, 242, 0.7), rgba(30, 30, 30, .4)

Nom de couleur

Certaines couleurs ont un nom. Pour ces couleurs, il est possible de spécifier le nom de la couleur directement.

Ex: crimson, mediumspringgreen

Vous pouvez trouver la liste des couleurs ayant un nom au lien suivant:

W3School - Named Colors by HEX Value

Parmis tous ces choix, lequel est le meilleur? En général, pour des raisons de performance, le meilleur choix est généralement le plus petit. Nous allons donc favoriser le format hexadécimal et hexadécimal court.

Couleur de texte

Pour modifier la couleur du texte, nous devons changer la valeur de la propriété color d'un élément pour y mettre la couleur de notre choix. Pour changer la couleur du texte de tous les paragraphes d'une page Web en bleu, nous utiliserons une feuille de style similaire à celle-ci.

Couleur de fond

Pour modifier la couleur du fond d'un élément HTML, nous utiliserons la propriété background‑color. Cette propriété s'utilise de la même façon que pour la couleur du texte.