Codes couleurs : HEX, RGB, HSL
ffffff, rgb(255,255,255), hsl(0,0%,100%) : comprendre les principaux systèmes de codes couleurs utilisés en design et sur le web.
HEX (hexadécimal)
#RRGGBB #FF5733 → rouge=FF, vert=57, bleu=33
Chaque paire de caractères (00 à FF, soit 0 à 255 en décimal) code l'intensité d'une composante rouge/vert/bleu. Le format le plus courant en CSS et en design.
RGB (rouge, vert, bleu)
rgb(255, 87, 51) rgba(255, 87, 51, 0.8) → avec transparence (alpha)
Même principe que le HEX, mais en valeurs décimales de 0 à 255 — plus lisible pour ajuster une composante précise.
HSL (teinte, saturation, luminosité)
hsl(11, 100%, 60%)
| Composante | Plage | Signification |
|---|---|---|
| Teinte (Hue) | 0-360° | Position sur le cercle chromatique |
| Saturation | 0-100% | Intensité de la couleur (0% = gris) |
| Luminosité (Lightness) | 0-100% | Clarté (0% = noir, 100% = blanc) |
HSL est souvent plus intuitif pour créer des variantes d'une couleur : garder la même teinte et ne faire varier que la luminosité donne des nuances cohérentes — idéal pour un thème clair/sombre.
Couleurs nommées courantes en CSS
| Nom | HEX |
|---|---|
| black | #000000 |
| white | #FFFFFF |
| red | #FF0000 |
| tomato | #FF6347 |
| steelblue | #4682B4 |
| gold | #FFD700 |
Contraste et accessibilité
Le ratio de contraste entre le texte et son arrière-plan doit atteindre au moins 4,5:1 (WCAG AA) pour un texte standard lisible par le plus grand nombre, 3:1 pour un grand texte (18pt+, ou 14pt en gras).
CMJN : le système de l'impression
cmyk(0%, 66%, 80%, 0%) " cyan, magenta, jaune, noir
Contrairement au RGB (couleurs additives, pour un écran qui émet de la lumière), le CMJN est un système soustractif utilisé en impression : on part du blanc du papier et on soustrait de la lumière en superposant des encres. Une couleur RGB vive à l'écran ne se reproduit pas toujours fidèlement en CMJN — c'est pourquoi un fichier destiné à l'impression doit être préparé en CMJN dès le départ, pas simplement converti à la fin.
HEX court et alpha
#FFF équivaut à #FFFFFF (notation courte, 1 caractère par composante) #FF5733CC HEX avec canal alpha (transparence), les 2 derniers caractères = opacité
Convertir mentalement HEX ↔ décimal
Chaque chiffre hexadécimal va de 0 à F (0-9 puis A-F pour 10-15). FF = 15×16 + 15 = 255 (le maximum), 00 = 0 (le minimum), 80 ≈ 128 (à peu près la moitié).
Merci pour votre retour !