Vous êtes en train de personnaliser votre site web ou votre document et on vous demande une « couleur HEX ». Vous voyez un code comme #FF5733 et vous ne savez pas ce que cela signifie. Ou bien un designer vous envoie une couleur en HSL et vous devez la convertir en RGB pour votre logiciel. Les formats de couleur du web sont partout, mais peu de gens comprennent réellement ce que les chiffres représentent.
Comment un écran affiche les couleurs
Avant de parler de codes, il faut comprendre le mécanisme de base. Chaque pixel de votre écran est composé de trois sous-pixels : un rouge (Red), un vert (Green) et un bleu (Blue). En variant l'intensité de chacun de ces trois composants, l'écran peut reproduire environ 16,7 millions de couleurs.
C'est le principe du mélange additif de lumière :
- Rouge + Vert = Jaune
- Rouge + Bleu = Magenta
- Vert + Bleu = Cyan
- Rouge + Vert + Bleu = Blanc
- Aucune lumière = Noir
Tous les formats de couleur du web décrivent la même réalité, mais avec des notations différentes.
Le format HEX (hexadécimal)
Comment ça marche
Le format HEX est le plus courant sur le web. Il commence par un # suivi de six caractères hexadécimaux (0-9 et A-F) :
#FF5733
Ces six caractères se décomposent en trois paires :
FF= rouge (255 en décimal, intensité maximale)57= vert (87 en décimal, intensité moyenne-basse)33= bleu (51 en décimal, intensité faible)
Chaque paire va de 00 (0, éteint) à FF (255, intensité maximale).
Les raccourcis
Si chaque paire est composée de deux caractères identiques, on peut raccourcir :
#FF0000→#F00(rouge pur)#336699→#369#FFFFFF→#FFF(blanc)
Le saviez-vous ? Le système hexadécimal utilise 16 symboles (0-9 puis A-F) au lieu de 10. Chaque paire de caractères hexadécimaux représente un nombre entre 0 et 255, ce qui correspond exactement aux 256 niveaux d'intensité par canal de couleur.
Quelques couleurs HEX courantes
| Couleur | Code HEX |
|---|---|
| Noir | #000000 |
| Blanc | #FFFFFF |
| Rouge pur | #FF0000 |
| Vert pur | #00FF00 |
| Bleu pur | #0000FF |
| Gris moyen | #808080 |
| Orange | #FFA500 |
Le format RGB
Comment ça marche
Le format RGB exprime la même information en décimal, de manière plus lisible pour un humain :
rgb(255, 87, 51)
Les trois valeurs correspondent au rouge, vert et bleu, chacune entre 0 et 255. C'est exactement le même système que le HEX, mais en base 10 au lieu de base 16.
Le RGBA pour la transparence
Le format RGBA ajoute un quatrième paramètre : l'opacité (alpha), entre 0 (transparent) et 1 (opaque) :
rgba(255, 87, 51, 0.5)
Cette couleur est la même orange-rouge, mais à 50 % de transparence. C'est très utilisé pour les superpositions, les ombres et les arrière-plans semi-transparents.
Astuce Le format HEX supporte aussi la transparence avec deux caractères supplémentaires : #FF573380 (le 80 final correspond à 50 % d'opacité en hexadécimal). Mais le RGBA reste plus lisible pour gérer la transparence.
Le format HSL
Comment ça marche
HSL signifie Hue (teinte), Saturation, Lightness (luminosité). C'est un format plus intuitif pour les designers car il correspond à la façon dont on pense naturellement aux couleurs :
hsl(11, 100%, 60%)
- Teinte (H) : un angle de 0° à 360° sur le cercle chromatique (0° = rouge, 120° = vert, 240° = bleu)
- Saturation (S) : de 0 % (gris) à 100 % (couleur pure)
- Luminosité (L) : de 0 % (noir) à 100 % (blanc), 50 % étant la couleur pure
Pourquoi le HSL est utile
Le HSL facilite les ajustements de couleur :
- Vous voulez une version plus claire ? Augmentez la luminosité
- Vous voulez une version plus pâle ? Réduisez la saturation
- Vous voulez une couleur complémentaire ? Ajoutez 180° à la teinte
En HEX ou RGB, ces ajustements nécessitent de recalculer les trois composants, ce qui est beaucoup moins intuitif.
Attention Tous les logiciels ne supportent pas le HSL. Photoshop utilise HSB (Hue, Saturation, Brightness), qui est similaire mais pas identique. La « Brightness » en HSB diffère de la « Lightness » en HSL. Vérifiez quel modèle utilise votre outil avant de saisir les valeurs.
Comparaison des trois formats
| Aspect | HEX | RGB | HSL |
|---|---|---|---|
| Lisibilité | Moyenne | Bonne | Excellente |
| Ajustement de couleur | Difficile | Moyen | Facile |
| Support CSS | Oui | Oui | Oui |
| Transparence | Oui (#RRGGBBAA) | Oui (RGBA) | Oui (HSLA) |
| Usage principal | Web, design | Code, API | Design, thèmes |
Quand utiliser quel format
- HEX : pour copier-coller une couleur spécifique (chartes graphiques, maquettes)
- RGB/RGBA : pour le code, surtout quand vous manipulez la transparence
- HSL/HSLA : pour créer des palettes de couleurs et des systèmes de thèmes
Convertir entre les formats
Les trois formats décrivent la même couleur, juste avec des notations différentes. La même couleur orange-rouge s'écrit :
- HEX :
#FF5733 - RGB :
rgb(255, 87, 51) - HSL :
hsl(11, 100%, 60%)
La conversion est mathématique et parfaitement réversible. Pour convertir instantanément entre ces formats : Convertir des couleurs.
Le saviez-vous ? Le CSS moderne accepte aussi le format oklch(), un nouveau modèle de couleur perceptuellement uniforme. Contrairement au HSL, les couleurs oklch de même luminosité sont effectivement perçues comme ayant la même luminosité par l'œil humain.
En résumé
Les codes couleur du web ne sont pas aussi cryptiques qu'ils en ont l'air. HEX, RGB et HSL sont trois façons de décrire la même chose : un mélange de rouge, vert et bleu. Le HEX est le plus courant, le RGB le plus explicite, et le HSL le plus intuitif pour les ajustements.
Gardez un outil de conversion de couleurs sous la main et vous ne serez plus jamais perdu face à un code couleur.