Couleurs

HEX et RGB : deux écritures d'une même couleur

Sur le web, une couleur est composée de trois canaux : rouge, vert et bleu, chacun entre 0 et 255. Le format RGB les écrit en décimal — rgb(198, 113, 57) — tandis que le format HEX les écrit en hexadécimal précédés d'un dièse : #c67139. Les deux désignent exactement la même couleur.

Astuce

La pipette de cet outil utilise le sélecteur de couleur natif de votre navigateur : sur la plupart des navigateurs de bureau, il permet même de prélever une couleur n'importe où sur votre écran.

Décoder un code hexadécimal

Un code comme #c67139 paraît obscur tant qu'on ignore comment le découper. Il se lit en fait par paires, chacune correspondant à un canal de couleur.

Les deux premiers caractères, c6, donnent le rouge ; les deux suivants, 71, le vert ; les deux derniers, 39, le bleu. Chaque paire s'écrit en base 16, un système qui compte de 0 à 9 puis de A à F, ce qui permet de représenter 256 valeurs avec seulement deux caractères. c6 vaut ainsi 198 en décimal, 71 vaut 113 et 39 vaut 57 — soit exactement rgb(198, 113, 57).

Trois canaux de 256 valeurs chacun offrent 256³, soit 16 777 216 couleurs différentes. C'est ce qu'on appelle le « vrai couleur » ou 24 bits, une palette bien supérieure à ce que l'œil humain distingue dans la plupart des conditions.

Quelques repères se retiennent vite : #000000 est le noir (tous les canaux à zéro), #ffffff le blanc (tous au maximum), et toute valeur où les trois paires sont identiques donne un gris neutre, comme #808080.

Le format court à trois caractères

Vous croiserez souvent des codes à trois caractères comme #fff ou #c73. C'est une abréviation : chaque caractère est simplement doublé. #fff équivaut à #ffffff, et #c73 à #cc7733.

Cette notation ne permet d'atteindre que 4 096 couleurs, contre près de 17 millions pour le format long. Elle reste pratique pour les valeurs simples, mais toute couleur un peu subtile exige les six caractères. Cet outil accepte les deux écritures et vous renvoie systématiquement la forme complète.

La transparence : les codes à huit caractères

Les navigateurs modernes acceptent une quatrième paire, qui définit l'opacité. Dans #c67139cc, les deux derniers caractères indiquent le canal alpha : ff correspond à une couleur totalement opaque, 00 à une transparence totale, et 80 à environ 50 % d'opacité.

L'équivalent en notation fonctionnelle est rgba(198, 113, 57, 0.8), où le dernier nombre s'exprime entre 0 et 1. Les deux écritures sont interchangeables ; la seconde reste souvent plus lisible quand on ajuste une valeur à la main.

Contraste et lisibilité : ce que dit l'accessibilité

Choisir une couleur ne se résume pas à une question de goût. Un texte doit rester lisible pour tout le monde, y compris pour les personnes malvoyantes ou sur un écran mal calibré en plein soleil.

Les règles internationales d'accessibilité définissent un rapport de contraste entre la couleur du texte et celle du fond, exprimé sous la forme d'un ratio allant de 1:1 à 21:1. Les seuils communément retenus sont les suivants :

L'indication de luminosité affichée par cet outil est un repère simplifié : elle estime la clarté perçue de la couleur et vous oriente vers un texte noir ou blanc. Elle ne remplace pas le calcul officiel d'un rapport de contraste, qui compare deux couleurs précises entre elles. Pour valider une charte graphique complète, appuyez-vous sur un outil dédié au contraste.

Un point souvent négligé : environ 8 % des hommes présentent une forme de déficience de la vision des couleurs. Ne faites donc jamais reposer une information sur la seule couleur — un message d'erreur doit être signalé par un texte ou une icône, pas uniquement par du rouge.

Et les autres formats ?

HEX et RGB décrivent une couleur par ses composants techniques, ce qui n'est pas très intuitif quand on cherche à l'ajuster. Le format HSL adopte une approche plus proche du raisonnement humain : une teinte exprimée en degrés sur un cercle chromatique, une saturation et une luminosité en pourcentages.

Son intérêt est pratique : pour obtenir une variante plus claire d'une couleur, il suffit d'augmenter la luminosité sans toucher au reste, alors qu'en RGB il faudrait modifier les trois canaux de façon coordonnée. C'est pourquoi les systèmes de design construisent volontiers leurs gammes de nuances en HSL.

Le CSS reconnaît par ailleurs près de 150 couleurs nommées — red, tomato, rebeccapurple — pratiques pour un prototype rapide, mais trop imprécises pour une charte graphique.

Questions fréquentes

Que signifie le code #fff ?

C'est la forme courte de #ffffff (blanc) : chaque caractère est doublé. L'outil accepte les deux écritures.

Comment savoir si un texte doit être noir ou blanc sur ma couleur ?

L'outil calcule la luminosité de la couleur et recommande la couleur de texte la plus lisible.

Pourquoi ma couleur s'affiche-t-elle différemment selon les écrans ?

Parce que chaque écran possède sa propre calibration et son propre espace colorimétrique. Un même code hexadécimal peut paraître plus chaud ou plus saturé d'un appareil à l'autre — raison pour laquelle les professionnels de l'impression travaillent avec des nuanciers physiques.

Peut-on convertir une couleur RVB en CMJN avec cet outil ?

Non. Le CMJN concerne l'impression et repose sur une synthèse soustractive, alors que le RVB est une synthèse additive propre aux écrans. La conversion dépend du papier et du profil d'impression, et ne peut pas être calculée de façon fiable sans ces paramètres.

Comment prélever une couleur sur une image ou une page web ?

Cliquez sur la pipette : la plupart des navigateurs de bureau ouvrent alors un sélecteur système permettant de capturer n'importe quel pixel affiché à l'écran, y compris hors du navigateur.

Quelle différence entre #FF0000 et #ff0000 ?

Aucune, la casse est sans effet en hexadécimal. Les deux notations désignent le même rouge pur, seule la convention d'écriture varie d'une équipe à l'autre.