Comment lire un code couleur HEX à six chiffres

Commencez par séparer #RRGGBB en trois paires

Ignorez un instant le croisillon et regroupez les six chiffres de gauche à droite : RR, GG et BB. La première paire contrôle le canal rouge sRGB, la deuxième le vert et la troisième le bleu. Chaque paire correspond à un octet ; sa valeur décimale va donc de 0 à 255.

#4F46E5
  4F  → red
  46  → green
  E5  → blue

Lire une paire hexadécimale

Le système hexadécimal utilise seize symboles au lieu de dix. Les chiffres de 0 à 9 conservent leur valeur habituelle, puis A, B, C, D, E et F représentent les valeurs de 10 à 15. La casse ne change rien : ff, Ff et FF désignent tous le même nombre.

• Le chiffre de gauche compte les groupes de seize.
• Le chiffre de droite compte les unités individuelles.
• Multipliez la valeur de gauche par 16, puis ajoutez celle de droite.
• 00 vaut 0 ; FF vaut 15 × 16 + 15, soit 255.

4F = 4 × 16 + 15 = 79
46 = 4 × 16 + 6  = 70
E5 = 14 × 16 + 5 = 229

Décoder #4F46E5 du début à la fin

Appliquez trois fois le calcul d’une paire. Le rouge est 4F, soit 79. Le vert est 46, soit 70. Le bleu est E5, soit 229. La même couleur CSS peut donc s’écrire rgb(79 70 229). Le canal bleu est nettement supérieur aux deux autres, ce qui contribue à expliquer la direction bleu-violet de cette couleur précise.

.sample {
  color: #4F46E5;
  background-color: rgb(79 70 229);
}

La valeur des canaux fournit un indice utile, mais elle ne décrit pas entièrement l’apparence. Les valeurs sRGB sont encodées et ne constituent pas des mesures de lumière linéaire ; les écrans diffèrent, les couleurs environnantes modifient la perception et la luminosité perçue n’est pas la moyenne arithmétique de R, G et B.

Reconnaître des motifs utiles sans tout calculer

Plusieurs motifs de canaux se lisent d’un coup d’œil. Une paire proche de 00 contribue peu à ce canal ; une paire proche de FF y contribue beaucoup. Des paires rouge, verte et bleue identiques produisent un gris sRGB achromatique. Deux canaux élevés et un canal faible indiquent souvent une direction secondaire familière, mais l’apparence exacte dépend toujours des trois valeurs.

• #000000 place tous les canaux à 0 et représente le noir.
• #FFFFFF place tous les canaux à 255 et représente le blanc.
• #808080 possède trois canaux égaux et représente un gris de code moyen.
• #FF0000, #00FF00 et #0000FF maximisent chacun un canal sRGB.
• #FFFF00 combine le maximum de rouge et de vert sans bleu.

Savoir quand le raccourci à trois chiffres est exact

CSS accepte également le HEX à trois chiffres. Il ne complète pas un chiffre manquant par zéro. Chaque chiffre est au contraire dupliqué : #4AE devient #44AAEE. Le raccourci n’est exact que lorsque chaque paire de la valeur à six chiffres contient deux chiffres identiques.

• #FFFFFF peut devenir #FFF.
• #00FF00 peut devenir #0F0.
• #44AAEE peut devenir #4AE.
• #4F46E5 ne peut pas être raccourci, car 4F, 46 et E5 ne sont pas des paires répétées.

Trois chiffres peuvent exprimer 16 × 16 × 16, soit 4 096 couleurs. Six chiffres peuvent exprimer 256 × 256 × 256, soit 16 777 216 combinaisons de canaux. Le raccourci est donc une écriture compacte réservée à un sous-ensemble, et non une forme arrondie de chaque couleur.

Lire le HEX à huit chiffres et sa paire alpha

Une valeur HEX CSS à huit chiffres utilise #RRGGBBAA. Les six premiers chiffres se lisent exactement comme auparavant ; la dernière paire AA contrôle l’alpha. 00 est entièrement transparent et FF entièrement opaque. Par exemple, 80 représente 128 sur 255, soit environ 50,2 % d’alpha.

.overlay {
  /* Same sRGB channels, about 50% alpha */
  background: #4F46E580;
  background: rgb(79 70 229 / 50.2%);
}

Une liste de contrôle fiable

• Vérifiez que la valeur commence par # et contient exactement 3, 4, 6 ou 8 chiffres hexadécimaux pour CSS.
• Pour six chiffres, séparez-la en RR, GG et BB avant toute conversion.
• Convertissez une paire avec gauche × 16 + droite ; rappelez-vous que A à F valent 10 à 15.
• Considérez la casse comme une simple question de mise en forme.
• Développez un raccourci en dupliquant chaque chiffre, jamais en ajoutant des zéros.
• Pour huit chiffres, lisez la dernière paire comme l’alpha placé après RGB.
• Utilisez la luminance et le contraste calculés au lieu de déduire l’accessibilité de la valeur des canaux.

Color Atlas effectue ces conversions de manière déterministe à partir de la valeur HEX canonique révisée. Une page de couleur permet de vérifier RGB, HSL, HWB, les variantes alpha, la luminance relative, le contraste et les valeurs associées sans remplacer le code source par de la prose générée.