Notation CSS · sRGB · transparence
Comment fonctionnent les codes couleur HEX
Lisez une valeur à six chiffres comme trois paires rouge, verte et bleue, comprenez le raccourci à trois chiffres et l’alpha à huit chiffres, puis testez le résultat dans son contexte réel.
codes couleur HEX
Que signifient les codes couleur HEX ?
Les codes couleur HEX sont des instructions sRGB compactes. Dans #RRGGBB, RR règle le rouge, GG le vert et BB le bleu ; chaque paire va de 00 à FF, soit de 0 à 255 en décimal. CSS accepte également #RGB en raccourci, #RGBA avec transparence et #RRGGBBAA avec une paire alpha complète. Ces formes décrivent des canaux numériques, pas un nom de peinture universel, une apparence calibrée ni un résultat d’accessibilité automatique. Il faut savoir décoder les codes couleur HEX, conserver exactement la valeur, puis la tester sur le fond et dans l’état où elle sera réellement utilisée.
Les quatre règles à retenir
- codes couleur HEX: six chiffres forment trois paires rouge, verte et bleue dans l’espace sRGB
- codes couleur HEX: trois chiffres se développent par duplication, donc #3A7 vaut exactement #33AA77
- codes couleur HEX: les formes à quatre et huit chiffres placent l’alpha en dernier ; 00 est transparent et FF opaque
- codes couleur HEX: une même valeur peut changer d’apparence selon l’écran et le fond, car la notation ne suffit pas à la décision
Comparer les quatre formes HEX de CSS
CSS Color Module Level 4 définit quatre longueurs valides. Le tableau sépare l’ordre des canaux, la précision et la transparence afin de ne pas traiter des codes couleur HEX similaires comme des chaînes interchangeables.
| Forme | Ordre des canaux | Exemple | Équivalent | États disponibles |
|---|---|---|---|---|
| #RGB · codes couleur HEX | rouge, vert, bleu | #3A7 | #33AA77 | 4 096 couleurs |
| #RGBA · codes couleur HEX | rouge, vert, bleu, alpha | #3A7C | #33AA77CC | 4 096 couleurs × 16 niveaux alpha |
| #RRGGBB · codes couleur HEX | rouge, vert, bleu | #33AA77 | rgb(51 170 119) | 16 777 216 couleurs |
| #RRGGBBAA · codes couleur HEX | rouge, vert, bleu, alpha | #33AA77CC | rgb(51 170 119 / 80%) | 16 777 216 couleurs × 256 niveaux alpha |
codes couleur HEX: Lire chaque canal comme un nombre en base 16
L’hexadécimal emploie seize symboles : 0 à 9, puis A à F pour les valeurs décimales 10 à 15. Deux symboles encodent donc 16 × 16, soit 256 états. Dans les codes couleur HEX à six chiffres, la première paire appartient au rouge, la deuxième au vert et la troisième au bleu. 00 est le minimum et FF le maximum décimal 255. Pour #2468AC, le rouge vaut 0x24 ou 36, le vert 0x68 ou 104, et le bleu 0xAC ou 172. La forme rgb(36 104 172) décrit exactement les mêmes coordonnées sRGB.
codes couleur HEX: Comprendre le raccourci avant de réduire une valeur
Les codes couleur HEX à trois chiffres ne sont pas des valeurs à six chiffres auxquelles on retire librement du détail : chaque chiffre est dupliqué. #F09 devient #FF0099, #ABC devient #AABBCC et #123 devient #112233. Une valeur à six chiffres n’est raccourcissable que si les deux caractères de chacune des trois paires sont identiques. #33AA77 peut devenir #3A7, mais #32AA77 ne le peut pas. Cette règle explique la précision : trois chiffres offrent 16 choix par canal, donc 16³ ou 4 096 couleurs ; six chiffres offrent 256 choix par canal, donc 256³ ou 16 777 216 couleurs.
codes couleur HEX: Placer l’alpha après le bleu
Les codes couleur HEX à huit chiffres suivent l’ordre #RRGGBBAA. La dernière paire est l’alpha : 00 signifie entièrement transparent, FF entièrement opaque et les valeurs intermédiaires une opacité partielle. #0000FFCC est par exemple un bleu doté de l’alpha CC, que l’exemple du W3C assimile à 80 % d’opacité. #RGBA se développe comme la forme à trois chiffres, donc #05AC devient #0055AACC. Certains systèmes graphiques et d’anciennes API affichent les octets dans un ordre différent ; dans un code CSS moderne, gardez l’alpha à la fin.
codes couleur HEX: Savoir ce que HEX conserve et ce qu’il perd
Les codes couleur HEX de CSS spécifient directement le sRGB. Ils sont courts et compris partout, mais ils ne décrivent ni une couleur Display P3 à large gamut, ni une valeur Lab indépendante du périphérique, ni une recette CMJN d’impression, ni un échantillon matériel mesuré. Convertir une source à large gamut vers des codes couleur HEX à six chiffres peut mapper ou écrêter des couleurs dans le sRGB. Une capture, une pipette de navigateur et un fichier de design peuvent aussi diverger selon les profils, les capacités d’écran et l’export. Préservez l’espace source lorsqu’il est important et livrez HEX lorsque sRGB est bien la cible.
Checklist pour une transmission HEX fiable
Avant d’insérer une valeur dans CSS, une palette ou un jeton, contrôlez la notation et la décision qui l’accompagne.
- codes couleur HEX: confirmez la présence exacte de 3, 4, 6 ou 8 chiffres hexadécimaux après le dièse
- codes couleur HEX: développez le raccourci lors d’une revue précise afin de rendre visibles tous les canaux
- codes couleur HEX: notez si la paire alpha est intentionnelle et identifiez le fond utilisé pour l’évaluation
- codes couleur HEX: conservez sRGB comme espace supposé au lieu de présenter la valeur comme universelle
- codes couleur HEX: testez contraste, nom et apparence avec l’outil distinct prévu pour chaque tâche
Utiliser une valeur HEX en trois étapes
Un flux court conserve la traçabilité du code tout en séparant décodage, description et validation.
codes couleur HEX: 1. Décoder et normaliser
codes couleur HEX: collez la valeur complète, vérifiez sa longueur, développez le raccourci si nécessaire et gardez l’alpha. Confirmez les nombres RGB avant de modifier un canal.
codes couleur HEX: 2. Décrire ou prélever
codes couleur HEX: utilisez le chercheur de noms quand une étiquette lisible facilite l’échange, ou la pipette d’image lorsque la source est un pixel local. Un nom reste un voisin descriptif, pas une identité officielle.
codes couleur HEX: 3. Tester la vraie paire
codes couleur HEX: placez le premier plan sur son fond prévu, appliquez la transparence puis calculez le contraste. Enregistrez les deux valeurs, l’état d’usage et la justification dans le jeton ou la note d’implémentation.
Ce que les sources officielles établissent
Les spécifications publiques ont été vérifiées le 31 juillet 2026. Ces nombres décrivent la syntaxe et les règles de test, sans promettre un classement ni une apparence identique.
- codes couleur HEX: CSS Color Module Level 4 définit 3, 4, 6 et 8 chiffres, documente l’ordre des canaux et indique 4 096 couleurs en trois chiffres contre environ 17 millions en six. Lire la section HEX du W3C
- codes couleur HEX: MDN documente les quatre syntaxes, la plage 0 à FF, la duplication, l’insensibilité à la casse et les extrêmes alpha, de transparent à opaque. Lire la référence <hex-color> de MDN
- codes couleur HEX: L’explication WCAG 2.2 présente notamment 4,5:1 pour le texte normal et 3:1 pour le grand texte ; une valeur isolée ne peut produire aucun de ces rapports. Lire les conseils de contraste WCAG
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
Questions sur les codes couleur HEX
HEX et RGB produisent-ils des couleurs différentes ?
codes couleur HEX: Non lorsque les coordonnées et l’espace correspondent. Les codes couleur HEX à six chiffres et rgb() peuvent exprimer les mêmes canaux sRGB : #33AA77 équivaut à rgb(51 170 119). Seule la notation change. Des fonctions CSS récentes représentent aussi d’autres espaces ; vérifiez donc l’espace avant d’exiger un équivalent direct à six chiffres.
Dans #RGBA, la transparence est-elle au début ou à la fin ?
codes couleur HEX: À la fin. Les codes couleur HEX à quatre et huit chiffres de CSS utilisent #RGBA et #RRGGBBAA, donc A suit le bleu. #3A7C devient #33AA77CC. D’autres logiciels peuvent afficher un entier compacté dans un autre ordre d’octets ; contrôlez toute valeur issue d’une API non CSS avant de la coller dans une feuille de style.
Pourquoi deux valeurs HEX identiques semblent-elles différentes ?
codes couleur HEX: Des codes couleur HEX identiques peuvent être entourés d’autres couleurs, composités sur des fonds différents ou rendus sur des écrans aux profils distincts. Le code fixe des coordonnées sRGB et éventuellement un alpha, pas l’ensemble du système d’observation. Comparez dans l’interface visée et conservez le contexte.
Une valeur HEX prouve-t-elle le contraste WCAG ?
codes couleur HEX: Non. Un rapport exige au moins un premier plan et un fond, ainsi que la bonne composition de la transparence et des états. Les codes couleur HEX fournissent des entrées ; le résultat vient de la comparaison des luminances relatives. Testez les paires réelles pour les états normal, survolé, désactivé et focus lorsqu’ils existent.