Codes couleurs pour HTML/CSS

LE HTML permet de colorer les textes avec color et les fonds avec background, suivis d’une formule de la composition de la couleur. Celle-ci peut se faire de différentes manières, le plus souvent en se basant sur la composition additive des lumières fondamentales : le rouge, vert et bleu (RVB) avec 255 pour valeur maximale (#FF en notation hexadécimale).

2025.01.24 – canal alpha et hsl() ajoutés

1. rgb() ― 2. hexadécimal ― 3. hsl() ― 4. noms

Le graphique suivant offre les compositions possibles avec les lumières fondamentale (synthèse additive utilisée dans en vidéo) :

1. rgb()

Au centre de ces trois taches se trouve le blanc, au maximum des trois lumières. Il se code rgb(255,255,255). Le jaune est la résultante des deux lumières fondamentales rouge et vert rgb(255,255,0), le magenta se code rgb(255,0,255) et le cyan (bleu clair) rgb(0,255,255). Cest trois couleurs, appelées primaires, sont utilisées en imprimerie. La synthèse est soustractive : l'addition des trois donne le noir. Comme la dernière encre domine toujours, on ajoute une encre noire : on parle alors de quadrichromie.

Pour des nombres inféreurs à 255, les teintes paraîtront plus sombres. Les 256 nuances (de 0 à 255) par lumière fondamentale permettent 256³, soit 16 777 216 nuances.

rgb(255,255,255) peut également s’écrire rgb(100%,100%,100%), mais il n’est pas possible de mélanger les deux façons dans une même formule rgb(). Exemple :

<p style="color:rgb(150,0,0); background:rgb(100%,100%,50%)">
RVB en nombres entiers

RVB en nombres entiers

<span style="color:rgb(0%,0%,50%); background:rgb(255,128,255)">
RVB en pourcentages

RVB en pourcentages

Il est possible d'ajouter un canal alpha, c'est-à-dire une valeur entre la transparence (0) et la couverture totale (1) ou l'équivalent en pourcentage.

<p style="color:rgb(0,0,128,70%); background:rgb(100%,50%,100%,0.4)">
RVB avec canal alpha

RVB avec canal alpha

Cette technique a un intérêt lorsque des couleurs se superposent.

2. Hexadécimal

Il est possible de simplifier l’écriture de la formule en utilisant une notation hexadécimale de six «chiffres» : les deux premiers représentent la proportion de rouge, les deux suivants le vert, et les deux derniers le bleu.

L’ensemble de chiffres doit être précédé du croisillon #, les seize valeurs sont codées de 0 à 9 et de A à F pour 10 à 15.

<p style="color:#B00040; background:#FFEEC7">
RVB en notation hexadécimale

RVB en notation hexadécimale

Le canal alpha consiste en l'ajout de deux «chiffres» hexadécimaux après les canaux RVB :

<p style="color:#B0004080; background:#FFEEC7">
Notation hexadécimale avec canal alpha

Notation hexadécimale avec canal alpha

Il est possible de réduire la définition en 3 chiffres hexadécimaux, avec seulement 4096 nuances de couleur (16³) :

<p style="color:#080; background:#FEC">
Notation hexadécimale réduite

Notation hexadécimale réduite

Le canal alpha est alors réduit à seul quatrième chiffre :

<p style="color:#080A; background:#FEC">
Notation réduite avec canal alpha

Notation réduite avec canal alpha

Notes :

• Les chiffres A, B, C, D, E et F pevent être écrits en minuscules.
• Trois pages permettant de composer les couleurs en agissant sur les proportions de rouge, vert ou de bleu.

3. hsl()

Une façon alternative est d’utiliser la roue des couleurs, la saturation et la luminosité avec une formule hsl(60 56% 65%), le premier nombre définissant l’angle dans la roue des couleurs, le deuxième la saturation et le troisième la luminosité :

• 0 pour le rouge, 60 pour le jaune, 120 pour le vert, 180 pour le cyan, 240 pour le bleu, 300 pour le mauve, avec tous les intermédiaires
• 100% pour la couleur la plus intense (0% pour l'absence de couleur: gris)
• 50% pour la couleur la plus nette, assombrissement vers 0% (noir), éclaircissement vers 100% (blanc)

La luminosité de la couronne extérieure est à 70% (plus claire), la deuxième à 50% (saturation maximale), l'intérieure est de 30% (plus sombre) ; la luminosité à 0% de n'importe quelle couleur est le noir.

<p style="color:hsl(60,100%,50%); background:hsl(240,100%,75%)">Notation HSL

Notation HSL

Il est possible d'ajouter un canal Alpha, c'est-à-dire un degré de transparence, avec 0 pour la transparence totale (ce qui peut avoir son utilité) et 1 qui couvre entièrement le fond:

<p style="color:hsl(60,100%,50%,0.5); background:hsl(240,100%,75%)">Notation HSL (alpha 0.5)

Notation HSL (alpha 0.5)

4. Noms

Il est possible d’utiliser certains noms pour coder les couleurs. Pour obtenir du texte magenta :

<span style="color:magenta">texte</span>

Voici un tableau des noms officiels :