Les codes couleur hexadécimaux expliqués : comment fonctionne #RRGGBB

Comment fonctionne un code couleur hexadécimal

Toute couleur à l’écran est un mélange de lumière rouge, verte et bleue. Un code hex écrit l’intensité de chaque lumière avec deux caractères après le signe # : d’abord le rouge, puis le vert, puis le bleu. C’est le schéma #RRGGBB.

Ces caractères sont hexadécimaux, une façon de compter avec 16 chiffres : de 0 à 9, puis a (10), b (11), c (12), d (13), e (14) et f (15). Une paire couvre 256 valeurs, de 00 (0) à ff (255), exactement la plage de rgb().

Pour convertir une paire en nombre ordinaire, multipliez le premier chiffre par 16 et ajoutez le second. Voici #1e90ff, la couleur CSS dodgerblue, dans quatre formats, puis décomposée paire par paire.

Ainsi, #1e90ff correspond à rgb(30, 144, 255) : un peu de rouge, pas mal de vert et le bleu au maximum, ce qui donne un bleu ciel lumineux. Trois paires de 256 valeurs offrent 16 777 216 couleurs possibles.

Forme courte du hex à 3 et 4 chiffres

Quand les deux chiffres de chaque paire sont identiques, vous pouvez n’écrire chaque paire qu’une fois. #ffcc00 devient #fc0, et le navigateur redouble chaque chiffre. #1e90ff n’a pas de forme courte, car 1e et 90 ne sont pas des paires doublées.

La forme courte ne couvre que 4 096 des 16,7 millions de couleurs. Une version à quatre chiffres ajoute l’opacité de la même façon : #f008 signifie #ff000088.

Opacité en hex : le hex à 8 chiffres avec alpha

Un code à huit chiffres ajoute une quatrième paire pour l’alpha, c’est-à-dire l’opacité : #RRGGBBAA. 00 est totalement transparent et ff totalement opaque. Tous les navigateurs actuels le prennent en charge en CSS, tout comme la forme courte à quatre chiffres #RGBA.

Pour obtenir la paire, multipliez l’opacité par 255, arrondissez à l’entier et convertissez en hex. 50 % donne 127,5, arrondi à 128, qui s’écrit 80. Voici le tableau complet, appliqué à #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Deux pièges. D’abord, 80 vaut 128 sur 255, soit 50,2 % et pas exactement 50 % : l’alpha hex n’a que 256 niveaux, donc la plupart des pourcentages ronds ne sont que des approximations. Ensuite, Android place l’alpha en premier. Dans une ressource de couleur Android, #801e90ff équivaut à #1e90ff80 en CSS.

Comment lire un code hex à l’œil

Vous pouvez deviner une couleur sans rien convertir. Regardez le premier chiffre de chaque paire : il porte presque toute l’information.

• Le premier chiffre le plus élevé désigne la lumière dominante. #d2691e a d pour le rouge, 6 pour le vert et 1 pour le bleu : c’est un brun orangé.
• Deux canaux élevés se mélangent : rouge et vert donnent du jaune, vert et bleu du cyan, rouge et bleu du magenta ou du violet.
• Trois paires identiques donnent un gris. #333333 est un gris foncé, #999999 un gris clair. Des paires presque égales, comme #708090, donnent une couleur sourde et grisée.
• Des chiffres globalement élevés indiquent une couleur claire, des chiffres bas une couleur foncée. Quand les trois paires valent c0 ou plus, la couleur est pâle. Quand elles valent toutes 30 ou moins, elle est très foncée.
• À valeur égale, le vert paraît bien plus lumineux que le bleu. #00ff00 a une luminosité OKLCH de 0,866, #0000ff de seulement 0,452.

Pourquoi #808080 n’est pas le gris moyen

#808080 se trouve exactement à mi-chemin en chiffres : 128 sur 255 dans chaque canal. Pourtant, il ne paraît pas à mi-chemin entre le noir et le blanc. Sa luminosité OKLCH est de 0,600 : il se lit comme situé à 60 % du chemin vers le blanc.

Les valeurs hex sont déjà encodées avec la courbe sRGB, qui suit à peu près l’œil, mais pas exactement. #808080 émet environ 21,6 % de la lumière du blanc, et les modèles perceptuels placent le milieu visuel plus bas : #636363 pour OKLCH, #777777 pour CIELAB.

C’est important pour le texte. Un gris #808080 sur blanc donne 3,95:1 et échoue au niveau WCAG AA pour le texte courant. #767676 est le gris le plus clair qui atteint 4,5:1, et #777777, un cran plus clair, échoue déjà à 4,48:1.

Majuscules ou minuscules, avec ou sans #

Les codes hex ne sont pas sensibles à la casse. #1E90FF, #1e90ff et #1E90ff sont la même couleur en CSS, en SVG et dans les outils de design. Choisissez un style et gardez-le partout, pour qu’une recherche dans votre code trouve chaque occurrence. En CSS, les minuscules sont le choix le plus courant.

Le signe # fait partie de la syntaxe CSS, pas de la couleur. Figma et beaucoup d’outils de design affichent le code sans lui, et les langages de programmation l’écrivent souvent comme un nombre avec le préfixe 0x, comme Flutter, où Color(0xFF1E90FF) commence par la paire alpha.

Comment trouver le code hex d’une couleur à l’écran

Utilisez une pipette : un outil qui lit la couleur sous votre curseur et affiche son code. Ces outils sont gratuits et le plus souvent déjà installés.

• Chrome et Edge : ouvrez les DevTools avec F12, cliquez sur un carré de couleur dans le panneau Styles et utilisez l’icône pipette pour prélever une couleur sur la page.
• PickShade : dans Chrome et Edge, le sélecteur de couleur de la page d’accueil propose un bouton pipette qui prélève une couleur n’importe où à l’écran.
• Windows : installez Microsoft PowerToys et appuyez sur Win + Maj + C pour ouvrir Color Picker.
• macOS : ouvrez Colorimètre numérique dans Applications, Utilitaires. Passez-le en sRGB, puis choisissez l’affichage des valeurs en hexadécimal dans le menu Présentation.
• Figma, Photoshop et la plupart des applis de design : appuyez sur I pour la pipette.
• Dans une photo ou une capture d’écran : ouvrez-la dans l’outil de prélèvement de couleurs sur image et cliquez sur n’importe quel pixel. L’image reste sur votre appareil.

Une valeur prélevée peut différer de quelques unités de l’originale, car les écrans appliquent des profils colorimétriques et les images sont compressées. Quand vous avez besoin de la valeur exacte, copiez-la depuis le fichier de design ou le CSS, pas depuis une capture d’écran.

Questions et réponses