Qu'est-ce qu'un code couleur hexadécimal, et comment lire #2F6FED ?

Un graphiste, une charte graphique ou le panneau de réglages d'un site vous a transmis quelque chose comme #2F6FED. Cela commence par un dièse, six lettres et chiffres mêlés suivent, et il en sort une couleur. Ce guide explique ce que disent ces six caractères.

Savoir les lire sert concrètement : mettez deux codes côte à côte et vous saurez lequel est le plus sombre et lequel tire davantage vers le bleu, sans regarder d'échantillon. Pousser une couleur un peu plus claire ou un peu plus foncée à la main devient possible aussi.

Pourquoi décrire une couleur avec un nombre

Chaque point de votre écran est fait de trois minuscules lumières : rouge, verte et bleue. En réglant séparément l'intensité de chacune, on obtient des millions de couleurs. « Bleu marine » veut dire quelque chose d'un peu différent pour chacun, mais donnez l'intensité des trois lumières sous forme de nombres et tous les écrans produiront la même couleur.

Un code hexadécimal comprime ces trois nombres en une seule écriture. Le dièse placé devant annonce simplement qu'un code couleur suit ; il ne porte aucune valeur par lui-même. Les six caractères qui viennent ensuite se découpent en trois paires, et chaque paire donne l'intensité d'une lumière, dans cet ordre : rouge, vert, bleu.

Autrement dit, #2F6FED n'est pas un nom mais une consigne : monte le rouge jusque-là, le vert jusque-là, le bleu jusque-là. C'est pour cette raison que le même code désigne la même couleur dans tous les logiciels et sur tous les écrans.

Démonter #2F6FED

Découpez le code en trois morceaux : 2F, 6F et ED. Chacun représente une intensité comprise entre 0 et 255, où 0 signifie que cette lumière est complètement éteinte et 255 qu'elle est poussée à fond.

Écrite de l'autre manière courante, la même couleur donne rgb(47, 111, 237) — exactement la même consigne, dans un autre habit. Le rouge est bas, le vert moyen, le bleu presque au maximum : le résultat est un bleu vif. C'est aussi la façon rapide de juger un code d'un coup d'œil, en regardant quelle paire est la plus grande.

Pourquoi des lettres ? Compter par seize

Dans la vie courante nous comptons avec dix chiffres : de 0 à 9, puis on change de colonne. Les codes hexadécimaux comptent avec seize symboles ; après le 9, au lieu de changer de colonne, ils continuent avec A. Donc A vaut dix, B onze, C douze, D treize, E quatorze et F quinze.

Le premier caractère d'une paire compte les seizaines, le second compte les unités. Démontons ED : E vaut quatorze, et quatorze seizaines font 224 ; ajoutez les 13 que représente le D et vous arrivez à 237. Vous n'aurez jamais à faire ce calcul à la main — collez le code dans le Convertisseur de code couleur et les trois canaux sortent tout prêts.

La plus petite valeur qu'une paire puisse porter est 00 et la plus grande FF, ce qui laisse 256 crans entre les deux. Le tableau ci-dessous relit quelques couleurs familières avec cette même logique.

Codes à trois caractères et transparence à huit

Vous croiserez parfois des codes de trois caractères comme #F00. C'est un raccourci dans lequel chaque caractère se double lui-même : #F00 est donc réellement #FF0000. Par la même règle, #2F6 signifie #22FF66 — attention, c'est une couleur entièrement différente de #2F6FED, pas une abréviation de celle-ci.

Les codes à huit caractères ajoutent une paire de plus à la fin, et cette paire règle la transparence de la couleur : 00 est totalement invisible, FF totalement opaque. Une valeur intermédiaire laisse passer une partie de ce qui se trouve dessous.

Majuscules ou minuscules ne changent rien : #2f6fed et #2F6FED sont la même couleur. Certains logiciels ne veulent pas du dièse en tête, d'autres l'ajoutent à votre place.

Comment retrouver le code d'une couleur que je vois ?

La situation la plus fréquente est de ne pas avoir le code du tout : la couleur qui vous plaît est dans une photo, dans un logo ou quelque part à l'écran. La voie à suivre n'est pas de deviner à l'œil, mais de faire prélever la valeur par un outil qui, lui, ne se trompe pas.

Si la couleur est à l'écran, commencez par une capture. Sous Windows, maintenez la touche Windows avec Maj et S pour délimiter une zone ; sur un Mac, utilisez Commande, Maj et 4. Sur un téléphone, la capture part directement dans votre galerie. Ouvrez ensuite l'image dans un logiciel de dessin : dans Paint, l'outil pipette prélève la couleur d'un point, puis le bouton « Modifier les couleurs » affiche ses trois valeurs Rouge, Vert et Bleu. Sur un Mac, l'utilitaire livré avec le système et appelé Numériseur de couleur fait la même chose sans rien installer : il se trouve dans le dossier Applications, sous-dossier Utilitaires.

Vous vous retrouvez alors avec trois nombres plutôt qu'un code. C'est exactement l'entrée du Convertisseur de code couleur : donnez-lui rgb(47, 111, 237) et il vous rend #2F6FED, prêt à coller dans une charte ou un formulaire.

Une précaution : dans une photo, la couleur d'une surface n'est jamais une valeur unique, la lumière et l'ombre la déplacent. Prélevez plusieurs points de la même zone et gardez celui du milieu, ou recadrez l'image sur la seule tache qui vous intéresse avant de prélever.

Vous avez le code — et ensuite ?

Une seule couleur suffit rarement. La version plus sombre que prend un bouton au survol, le fond pâle derrière une carte, le trait fané d'une bordure : tous appartiennent à la même famille. Pour les fabriquer à la main, passez par l'écriture HSL, que le Convertisseur de code couleur affiche à côté du hex : les deux premiers nombres y fixent la teinte et la saturation, et le troisième la clarté. Gardez les deux premiers, faites monter ou descendre le troisième de dix points à chaque marche, et vous obtenez une échelle cohérente au lieu de tâtonner sur six caractères.

Le deuxième sujet est la lisibilité, et celui-là ne se règle pas à l'œil. L'écart entre une couleur de texte et son fond se mesure par un seul nombre, le rapport de contraste ; les règles d'accessibilité WCAG demandent au moins 4,5:1 pour un texte de taille normale et au moins 3:1 pour les grands titres. Un repère utile en attendant la mesure : si vos deux couleurs ont des clartés HSL proches, le rapport sera mauvais quelles que soient leurs teintes.

Le troisième sujet est la traduction entre notations. Un endroit veut du hex, un autre du RGB, un troisième du HSL ; le convertisseur donne les trois d'un coup. C'est utile bien au-delà du web : les tableurs, les logiciels de traitement de texte et les outils de présentation demandent souvent les trois valeurs R, V et B séparément, alors que la charte graphique qu'on vous a envoyée ne contient que des codes hexadécimaux.

Règles WCAG 2.2 sur le contraste (W3C, texte de référence) →

Questions fréquentes

Qu'est-ce qu'un code couleur hexadécimal ?

C'est une écriture en six caractères qui donne les parts de rouge, de vert et de bleu d'une couleur en base seize. Après le dièse, les deux premiers caractères valent pour le rouge, les deux du milieu pour le vert et les deux derniers pour le bleu ; chaque paire correspond à une intensité comprise entre 0 et 255.

Comment retrouver le code hexadécimal d'une couleur affichée à l'écran ?

Faites une capture d'écran, ouvrez-la dans un logiciel de dessin et prélevez le point voulu à la pipette : la fenêtre des couleurs affiche alors ses trois valeurs Rouge, Vert et Bleu. Donnez ces trois nombres au Convertisseur de code couleur et vous récupérez le code hexadécimal correspondant.

#2F6 et #2F6FED sont-ils la même couleur ?

Non. Dans le raccourci à trois caractères, chaque caractère se double lui-même, donc #2F6 signifie en réalité #22FF66. Ce raccourci ne fonctionne que pour les codes dont les paires sont déjà identiques : #F00 est bien #FF0000.

Faut-il écrire les codes en majuscules ou en minuscules ?

Cela ne change rien : #2f6fed et #2F6FED définissent la même couleur. Rester cohérent à l'intérieur d'un même document rend simplement la lecture plus facile.

Comment savoir si ma couleur reste lisible en texte ?

Mesurez le rapport de contraste entre la couleur du texte et celle du fond ; les règles WCAG demandent au moins 4,5:1 pour un texte de taille normale et 3:1 pour les grands titres. Juger à l'œil est trompeur : la luminosité de votre écran suffit à renverser le verdict.

Dernière mise à jour : 27 août 2026