Formation Apprendre le CSS : Les couleurs

Dans ce chapitre je vous propose de nous attarder sur les couleurs et nous allons voir les différentes manières de définir des couleurs en CSS.

Les noms de couleur

La première approche, c'est d'utiliser un nom prédéfini :

h1 {
  color: red;
}

CSS reconnaît un certain nombre de noms comme red, blue, black, white, tomato ou encore rebeccapurple.

Cette syntaxe est pratique pour faire des tests rapides, mais elle reste limitée. Dès que l'on veut être plus précis sur la teinte choisie, on utilise d'autres notations.

Le modèle rgb()

Une des représentations les plus connues en informatique, c'est le RGB pour Red, Green, Blue.

L'idée est simple : on construit une couleur en indiquant la quantité de rouge, de vert et de bleu. Chaque composante va de 0 à 255.

h1 {
  color: rgb(255, 0, 0);
}

Ici, on obtient du rouge pur :

• 255 de rouge
• 0 de vert
• 0 de bleu

Si on ajoute aussi du vert :

color: rgb(255, 255, 0);

On obtient du jaune.

Et si on combine du rouge avec du bleu :

color: rgb(255, 0, 255);

On obtient une teinte proche du magenta.

Le principe important à retenir, c'est qu'on est dans une synthèse additive :

• avec 0, 0, 0, on obtient du noir
• avec 255, 255, 255, on obtient du blanc

Selon l'éditeur utilisé, on peut souvent survoler une couleur pour ouvrir un color picker. C'est généralement lui qui se charge de calculer les valeurs exactes pour nous.

La notation hexadécimale

La notation que l'on croise probablement le plus souvent en CSS, c'est la notation hexadécimale :

h1 {
  color: #ff0000;
}

Cette écriture représente exactement la même idée que rgb(), mais sous une autre forme.

Les six caractères après le # sont regroupés par paires :

• ff pour le rouge
• 00 pour le vert
• 00 pour le bleu

Donc :

#ffffff /* Blanc */
#000000 /* Noir */
#FF0000 /* Rouge */

Pourquoi des lettres ?

La notation hexadécimale utilise une base 16. Au lieu de compter seulement de 0 à 9, on continue avec les lettres de a à f.

Cela permet de représenter les valeurs de 0 à 255 avec seulement deux caractères par composante.

En pratique, il n'est pas nécessaire de faire les conversions à la main, on utilisera un sélecteur de couleur qui va nous donner la valeur hexadécimale.

La forme courte

Quand chaque paire de chiffres est composée de deux caractères identiques, on peut utiliser une version abrégée :

#fff
#000
#f0f

Par exemple :

• #fff équivaut à #ffffff
• #000 équivaut à #000000
• #f0f équivaut à #ff00ff

C'est pratique pour le noir, le blanc ou quelques couleurs très simples, mais dans la majorité des cas on utilisera quand même la forme complète à six caractères.

La transparence avec rgba()

On peut ajouter une quatrième composante pour gérer l'opacité :

h1 {
  color: rgba(255, 0, 0, 0.5);
}

Les trois premières valeurs correspondent toujours au rouge, au vert et au bleu. La quatrième représente l'alpha, c'est-à-dire le niveau d'opacité :

• 1 : totalement opaque
• 0.5 : semi-transparent
• 0 : complètement transparent

Cette notation est très utile pour les ombres, les overlays ou les arrière-plans partiellement transparents.

.card {
  background: rgba(0, 0, 0, 0.2);
}

Le modèle hsl()

Une autre manière de représenter les couleurs consiste à utiliser hsl(), pour Hue, Saturation, Lightness.

h1 {
  color: hsl(122, 100%, 50%);
}

Les trois valeurs correspondent à :

• la teinte
• la saturation
• la luminosité

La teinte

La première valeur est un angle, généralement entre 0 et 360.

Elle permet de choisir la couleur sur le cercle chromatique.

La saturation

La deuxième valeur est un pourcentage :

• 0% donne une couleur complètement grise
• 100% donne une couleur très saturée

La luminosité

La troisième valeur contrôle la quantité de lumière :

• 0% donne du noir
• 100% donne du blanc
• autour de 50%, on obtient la couleur la plus "pure"

L'intérêt de hsl() est qu'il est souvent plus simple à manipuler mentalement que rgb(). Une fois qu'on a trouvé une saturation et une luminosité qui nous conviennent, on peut faire varier seulement la teinte pour explorer différentes couleurs.

oklch(), une approche plus moderne

Les navigateurs modernes supportent aussi un modèle plus récent : oklch().

L'idée reste proche de hsl(), mais avec une meilleure prise en compte de la perception visuelle. En pratique, cela signifie qu'à luminosité égale, deux teintes différentes auront un rendu plus cohérent à l'œil.

h1 {
  color: oklch(62% 0.18 145);
}

Sans entrer trop dans les détails, ce modèle repose sur trois valeurs :

• la luminosité
• le chroma, proche de la saturation
• la teinte

L'intérêt principal de oklch() apparaît surtout quand on commence à construire un vrai système de couleurs ou un thème complet. Il devient alors plus simple de changer une teinte sans casser les contrastes perçus.