Qu'est-ce qu'un code hexadécimal ? Le langage de la couleur numérique

Chaque couleur sur chaque site web, application et interface numérique possède une adresse numérique précise. Pour la majeure partie de l'histoire du web, cette adresse a pris une forme spécifique : un symbole dièse suivi de six caractères, comme #3B82F6 ou #FF5733. Ce sont des codes hexadécimaux — la lingua franca de la couleur numérique.

Si vous concevez pour des écrans, développez des applications web, ou travaillez avec n'importe quel outil de design, vous rencontrez des codes hexadécimaux en permanence. Cet article explique exactement ce qu'ils sont, comment le système de numération hexadécimal les fait fonctionner, et tout ce que vous devez savoir sur la notation abrégée, la transparence alpha et la façon de trouver les codes hexadécimaux de n'importe quelle couleur.

Le système de numération hexadécimal

Le mot « hex » vient du grec hexas, signifiant six, et « décimal » du latin pour dix. L'hexadécimal est un système de numération en base 16 — par opposition au système décimal en base 10 que nous utilisons dans la vie quotidienne.

En base 10, on compte : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — puis on ajoute un chiffre : 10, 11, 12...

En base 16, on compte : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — puis on utilise des lettres pour continuer : A, B, C, D, E, F — avant d'ajouter un chiffre : 10 (qui équivaut à 16 en décimal), 11 (17), ... FF (255).

Hexadécimal	Décimal
0–9	0–9
A	10
B	11
C	12
D	13
E	14
F	15
10	16
1A	26
FF	255

Pourquoi la base 16 pour les couleurs ?

La raison est élégamment pratique. Un octet informatique contient 8 bits binaires et peut stocker des valeurs de 0 à 255. En hexadécimal, toute cette plage tient en exactement deux chiffres : 00 (0) à FF (255). Cela fait de l'hexadécimal un encodage compact et lisible pour les valeurs d'un octet — ce qui correspond exactement à chaque canal de couleur.

Dans le modèle de couleur RGB, chacun des trois canaux — Rouge, Vert, Bleu — est une valeur de 0 à 255. En hexadécimal, cela fait de 00 à FF. Trois canaux, deux chiffres hexadécimaux chacun, donnent six caractères au total. Ajoutez le préfixe # pour signaler « ceci est une couleur », et vous obtenez le code couleur hexadécimal standard.

Lire les codes hexadécimaux à 6 chiffres (#RRGGBB)

Un code couleur hexadécimal standard a la structure #RRGGBB :

# — préfixe qui signale une valeur de couleur hexadécimale
RR — deux chiffres hexadécimaux encodant le canal Rouge (00–FF)
GG — deux chiffres hexadécimaux encodant le canal Vert (00–FF)
BB — deux chiffres hexadécimaux encodant le canal Bleu (00–FF)

Décoder un exemple

Prenons #FF5733 — un rouge-corail chaud :

Paire	Canal	Hex	Décimal	Signification
`FF`	Rouge	FF	255	Rouge maximum
`57`	Vert	57	87	Vert modéré — ajoute de la chaleur orangée
`33`	Bleu	33	51	Bleu faible — maintient la chaleur

Le canal rouge maximum avec un vert modéré et un bleu faible produit un orange-rouge vif. Le bleu faible empêche la couleur de tendre vers le neutre.

Prenons maintenant #3B82F6 — un bleu ciel :

Paire	Canal	Hex	Décimal	Signification
`3B`	Rouge	3B	59	Rouge faible — froid
`82`	Vert	82	130	Vert modéré — pousse légèrement vers le cyan
`F6`	Bleu	F6	246	Bleu très élevé — canal dominant

Le bleu dominant avec un vert modéré produit un bleu moyen vif avec une légère qualité cyan. Le rouge faible maintient la fraîcheur.

Heuristiques de lecture rapide

Une fois que vous comprenez la structure, vous pouvez lire les codes hexadécimaux approximativement en un coup d'oeil :

00 dans un canal = aucune de cette primaire (totalement sombre dans ce canal)
FF dans un canal = intensité maximale de cette primaire
80 ≈ demi-intensité (128 sur 255)

Cela vous permet de décoder rapidement les codes courants :

Code	Interprétation
#FF0000	Rouge plein, sans vert, sans bleu → rouge pur
#00FF00	Sans rouge, vert plein, sans bleu → vert pur
#0000FF	Sans rouge, sans vert, bleu plein → bleu pur
#FFFF00	Rouge plein + vert plein, sans bleu → jaune
#FF00FF	Rouge plein + bleu plein → magenta
#00FFFF	Vert plein + bleu plein → cyan
#FFFFFF	Tous les canaux au maximum → blanc
#000000	Tous les canaux à zéro → noir
#808080	Tous les canaux à ~moitié → gris moyen

Des valeurs égales sur les trois canaux produisent toujours un neutre — gris, noir ou blanc selon le niveau. Des valeurs inégales produisent toujours une couleur. Les valeurs les plus élevées indiquent quelle couleur primaire domine.

Repérer les codes hexadécimaux clairs vs sombres

Si tous les six caractères sont des valeurs hexadécimales élevées (C, D, E, F), la couleur sera claire. Si tous sont bas (0, 1, 2, 3), elle sera sombre. Cela vous donne une lecture instantanée de la luminosité :

#F0E6D3 — toutes valeurs élevées → beige chaud clair
#1A1A2E — toutes valeurs basses → bleu marine très sombre
#7C3AED — valeurs mixtes, bleu élevé → violet moyen

Notation abrégée à 3 chiffres

CSS permet une notation abrégée à trois caractères lorsque chaque paire de chiffres dans le code complet à six caractères est constituée de deux caractères identiques. #AABBCC devient #ABC. Chaque chiffre abrégé est simplement doublé pour produire la version complète.

Abréviation	Code complet	Couleur
`#F00`	`#FF0000`	Rouge pur
`#0F0`	`#00FF00`	Vert pur
`#00F`	`#0000FF`	Bleu pur
`#FFF`	`#FFFFFF`	Blanc
`#000`	`#000000`	Noir
`#369`	`#336699`	Bleu acier
`#FC0`	`#FFCC00`	Jaune doré

Quand l'abréviation est valide

L'abréviation ne fonctionne que lorsque chaque paire est un chiffre répété. #3B82F6 ne peut pas être abrégé parce que 3B, 82 et F6 ne sont pas des paires doublées. Mais #336699 se qualifie comme #369 parce que 33, 66 et 99 répètent chacun un seul chiffre.

En pratique, l'abréviation est une fonctionnalité CSS valide mais de nombreuses équipes standardisent sur le format complet à six caractères pour la clarté. La version à six caractères rend immédiatement évidente la valeur de chaque canal. De nombreux linters et guides de style imposent l'hexadécimal complet pour la cohérence.

Hexadécimal à 8 chiffres avec transparence alpha

Le code hexadécimal standard à six caractères encode uniquement le RGB — il n'y a pas d'information d'opacité. Pour ajouter la transparence alpha (contrôle de l'opacité ou de la transparence d'une couleur), CSS prend en charge un format hexadécimal à huit caractères :

#RRGGBBAA

La paire AA finale encode le canal alpha, utilisant la même plage 0-255 que les canaux de couleur, mappée à l'opacité :

Alpha Hex	Décimal	Opacité
`FF`	255	100% (entièrement opaque)
`E6`	230	90%
`CC`	204	80%
`99`	153	60%
`80`	128	~50%
`66`	102	40%
`33`	51	20%
`1A`	26	10%
`00`	0	0% (entièrement transparent)

Exemples pratiques d'hexadécimal à 8 chiffres

Un calque sombre pour les fonds de modales : #000000 à 70% d'opacité → #000000B3

Un bleu de marque #3B82F6 à 50% d'opacité → #3B82F680

Un blanc pur #FFFFFF à 10% d'opacité (surbrillance subtile) → #FFFFFF1A

/* Fond de modale */
.modal-overlay {
  background-color: #000000B3;
}

/* Panneau verre dépoli */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

Abréviation alpha à 4 chiffres

Tout comme la notation abrégée #RGB existe pour #RRGGBB, une notation abrégée #RGBA existe pour #RRGGBBAA :

#F00F = #FF0000FF (rouge pur, entièrement opaque)
#0008 = #00000088 (noir à ~53% d'opacité)
#FFF0 = #FFFFFF00 (blanc entièrement transparent)

Alpha hexadécimal vs rgba()

Avant que l'hexadécimal à huit caractères soit largement supporté, la façon standard d'ajouter de la transparence était la fonction CSS rgba() :

/* Ces deux déclarations sont équivalentes */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Les deux sont bien supportés dans tous les navigateurs modernes. La forme rgba() est souvent plus lisible en CSS car l'opacité est exprimée comme un décimal de 0 à 1, ce qui est immédiatement compréhensible. La forme hexadécimale à huit caractères est plus compacte mais nécessite une conversion mentale de l'hexadécimal au pourcentage d'opacité.

Trouver et convertir les codes hexadécimaux

Dans les outils de design

Chaque outil de design majeur expose les valeurs hexadécimales :

Figma — Cliquez sur n'importe quel remplissage ou contour de couleur ; le code hexadécimal apparaît dans le panneau Remplissage à droite. Cliquez sur « HEX » pour copier.
Adobe Illustrator / Photoshop — Le sélecteur de couleur et le panneau de nuanciers affichent les codes hexadécimaux. Fenêtre > Couleur si le panneau n'est pas visible.
Sketch — Le champ de remplissage affiche les codes hexadécimaux avec un bouton de copie.
Canva — Cliquez sur n'importe quel élément, puis sur la puce de couleur de remplissage pour voir et copier le code hexadécimal.

Dans les navigateurs web

Faites un clic droit sur n'importe quel élément d'une page web et choisissez « Inspecter » ou « Inspecter l'élément ». Dans les DevTools du navigateur, trouvez l'élément dans le panneau CSS. Cliquez sur n'importe quelle valeur de couleur — elle alterne souvent entre les formats (hex, rgb, hsl, oklch) à chaque clic. Chrome DevTools affiche également un sélecteur de couleur superposé.

Pour un prélèvement rapide de couleur sans DevTools, les extensions de navigateur comme ColorZilla (Chrome/Firefox) vous permettent d'échantillonner n'importe quel pixel à l'écran et de copier son code hexadécimal.

Sur ColorFYI

Chaque page de détail de couleur sur ColorFYI — comme /color/FF5733/ ou /color/3B82F6/ — affiche le code hexadécimal complet aux côtés des valeurs RGB, HSL, CMJN et OKLCH. Si vous avez une couleur dans un autre format, utilisez le Convertisseur de couleurs pour la convertir instantanément en hexadécimal :

RGB vers hexadécimal : entrez rgb(255, 87, 51) → obtenez #FF5733
HSL vers hexadécimal : entrez hsl(11, 100%, 60%) → obtenez l'équivalent hexadécimal
CMJN vers hexadécimal : entrez les pourcentages CMJN → obtenez l'hexadécimal sRGB approximatif

Table de conversion hexadécimale courante

Nom de couleur	Hex	RGB	HSL
Tomate	#FF6347	rgb(255, 99, 71)	hsl(9, 100%, 64%)
Bleu ciel	#87CEEB	rgb(135, 206, 235)	hsl(197, 71%, 73%)
Olive	#808000	rgb(128, 128, 0)	hsl(60, 100%, 25%)
Orchidée	#DA70D6	rgb(218, 112, 214)	hsl(302, 59%, 65%)
Gris ardoise	#708090	rgb(112, 128, 144)	hsl(210, 13%, 50%)

L'hexadécimal en CSS : utilisation pratique

Les codes hexadécimaux fonctionnent dans toute propriété CSS qui accepte une valeur de couleur :

/* Texte */
color: #1E293B;

/* Fond */
background-color: #F8FAFC;

/* Bordure */
border: 1px solid #E2E8F0;

/* Ombre avec alpha */
box-shadow: 0 4px 16px #0000001A;

/* Propriétés personnalisées CSS */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

Sensibilité à la casse

Les codes hexadécimaux sont insensibles à la casse en CSS. #3B82F6, #3b82f6 et #3B82f6 sont identiques. La plupart des équipes standardisent sur tout en majuscules ou tout en minuscules pour la cohérence. Les majuscules sont traditionnelles dans les outils de design ; les minuscules sont populaires dans les bases de code modernes et sont préférées par de nombreux linters.

Points clés à retenir

Un code hexadécimal est un nombre hexadécimal à six caractères qui encode les valeurs de couleur RGB. La structure est #RRGGBB — deux chiffres hexadécimaux chacun pour le rouge, le vert et le bleu.
L'hexadécimal est en base 16, utilisant les chiffres 0-9 et les lettres A-F. Chaque paire de deux chiffres hexadécimaux encode une valeur de 0 (00) à 255 (FF), correspondant à la plage complète d'un canal RGB.
Lire un code hexadécimal : les valeurs élevées dans une paire signifient une intensité élevée du canal. Des valeurs égales sur les trois paires produisent un neutre (gris, noir ou blanc). Des valeurs inégales produisent une couleur biaisée vers le canal le plus élevé.
La notation abrégée à 3 chiffres (#RGB) est valide lorsque chaque paire répète un seul chiffre — #336699 s'abrège en #369.
L'hexadécimal à 8 chiffres (#RRGGBBAA) ajoute un canal de transparence alpha. Les deux derniers chiffres vont de 00 (transparent) à FF (opaque).
Trouvez les codes hexadécimaux dans le sélecteur de couleur de n'importe quel outil de design, dans les DevTools du navigateur en inspectant les éléments, ou sur n'importe quelle page de couleur ColorFYI.
Utilisez le Convertisseur de couleurs pour traduire instantanément entre hexadécimal, RGB, HSL, CMJN et OKLCH.