Module 5 : Les couleurs

Trois écritures, une même couleur

Au module 4, tu as écrit color: green et le titre a verdi. Magique — mais limité : et si tu veux exactement le vert du maillot de ton club, pas celui que le CSS a décidé d'appeler green ?

Le CSS sait écrire une couleur de trois façons :

h1 { color: green; }             /* le nom */
h1 { color: #226347; }           /* l'hexadécimal */
h1 { color: rgb(34, 99, 71); }   /* le rgb */

• le nom — environ 150 couleurs que le CSS connaît par cœur, toujours en anglais
• l'hexadécimal — un dièse et six caractères, la notation la plus courante du web
• le rgb — trois nombres, un par canal : rouge, vert, bleu

Les trois écritures désignent des couleurs parmi les 16 millions que ton écran sait afficher. Le nom est le plus simple, mais il ne couvre qu'une poignée d'entre elles. L'hexadécimal et le rgb, eux, les couvrent toutes.

Toute couleur est un mélange

Retiens l'idée clé du module : une couleur d'écran, c'est un mélange de trois lumières — rouge, verte, bleue. Ce n'est pas une image : chaque pixel de ton écran est réellement fait de trois mini-lampes, une par couleur, et c'est leur dosage qui fabrique tout ce que tu vois. Approche une loupe d'un vieil écran, tu les verras.

Regarde bien les chevauchements : beaucoup de rouge et de vert sans bleu ? Du jaune. Les trois à fond ? Du blanc. Les trois à zéro ? L'écran reste éteint : du noir.

L'hexadécimal et le rgb ne font qu'écrire ce dosage, chacun à sa manière. Une fois ce principe compris, aucune notation ne pourra plus te surprendre.

Mais choisir, c'est aussi renoncer

Savoir écrire une couleur ne suffit pas : encore faut-il qu'on puisse lire ce qu'il y a dessus. Un texte gris clair sur fond blanc, c'est joli sur ton écran... et illisible dehors au soleil, ou pour une vue qui fatigue. Tu apprendras à mesurer le contraste — et la règle d'or : au moins 4,5:1 entre un texte et son fond.

Au programme

1. Les noms de couleurs — la boîte de crayons de base
2. L'hexadécimal — le dosage précis, canal par canal
3. Le rgb — les mêmes dosages, en nombres de tous les jours
4. Le contraste — réparer un texte illisible
5. La transparence — le quatrième nombre qui change tout
6. Le défi : l'affiche du tournoi, colorée de haut en bas

Prêt ?

Sors les pinceaux : ta palette passe de 150 couleurs à 16 millions. C'est parti !