Un code couleur hexadécimal (ou couleurs HEX) , c’est cette suite de caractères précédée d’un dièse que vous croisez dans tout fichier CSS, toute charte graphique, tout outil de design. #FF0000#FFFFFF#1A1A2E
Ce guide explique comment ce système fonctionne, comment lire et convertir un code HEX, et fournit un tableau de référence des couleurs les plus utilisées. Si vous cherchez à convertir une couleur rapidement, le convertisseur de couleur OsmoTools fait la conversion HEX, RGB, HSL, CMJN et HSV en temps réel dans votre navigateur.
Qu’est-ce qu’un code couleur hexadécimal ?
Un code hexadécimal est une représentation d’une couleur en base 16. Le système décimal compte de 0 à 9, puis passe à 10. Le système hexadécimal compte de 0 à 9, puis continue avec les lettres A à F, ce qui donne seize valeurs possibles par position : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Un code couleur HEX complet s’écrit #RRGGBB où :
- RR représente la composante rouge (de 00 à FF, soit de 0 à 255 en décimal)
- GG représente la composante verte (même échelle)
- BB représente la composante bleue (même échelle)
#FF0000#0000FF#808080
La notation courte est possible quand chaque paire est identique : #FFF#FFFFFF#F00#FF0000
Une variante existe avec transparence : le format à 8 caractères #RRGGBBAA ajoute un canal alpha pour gérer l’opacité. #FF000080
Comment lire un code couleur HEX en 10 secondes
Pour déchiffrer #3B82F63B / 82 / F6, puis de les lire en ordre de grandeur : 3B est faible, 82 est moyen, F6 est très élevé. Peu de rouge, un peu de vert, beaucoup de bleu. Résultat : un bleu vif, tendance bleu roi.
Vous n’avez pas besoin de maîtriser la conversion hexadécimale pour travailler avec les codes couleur. Ce qu’il faut retenir : plus une paire est proche de FF, plus cette composante est saturée. FF0000 est rouge maximal. FFFF00 cumule rouge et vert au maximum avec un bleu nul, ce qui donne le jaune primaire. 000000 est le noir absolu, toutes les composantes à zéro.
Pour tout ce qui dépasse cette lecture rapide, un convertisseur est plus fiable qu’un calcul mental.
Convertir un code HEX : l’outil le plus rapide
Le convertisseur de couleur OsmoTools accepte n’importe quel format en entrée : HEX, RGB, RGBA, HSL, HSLA, HSV, CMJN, nom CSS, valeur décimale. Il affiche instantanément les équivalences dans les dix autres formats, sans bouton à cliquer. La conversion se met à jour à chaque frappe.
Trois fonctionnalités utiles en pratique :
Aperçu en temps réel. La couleur saisie s’affiche simultanément sur fond clair et fond sombre. Utile pour évaluer le rendu d’une couleur de texte sur les deux thèmes d’une interface avant de la valider.
Ratio de contraste WCAG. Pour chaque couleur, le ratio de contraste avec le blanc et avec le noir est calculé selon la formule de luminance relative WCAG 2.1. En France, les services en ligne soumis au RGAA doivent respecter un ratio minimum de 4,5:1 pour le texte courant (niveau AA). Ce calcul évite d’ouvrir un outil d’accessibilité séparé.
Aucune donnée transmise. Toutes les conversions sont effectuées localement en JavaScript dans votre navigateur. Aucun code couleur, aucune donnée n’est envoyée à un serveur.
Tableau de référence : codes HEX des couleurs courantes
Ce tableau couvre les couleurs les plus fréquemment utilisées en design web et graphique, avec leur équivalence RGB et leur nom CSS standardisé quand il existe.
Noir, blanc et gris
| Couleur | HEX | RGB | Nom CSS |
|---|---|---|---|
| Noir | | rgb(0, 0, 0) | black |
| Blanc | | rgb(255, 255, 255) | white |
| Blanc cassé | | rgb(245, 245, 245) | whitesmoke |
| Blanc cassé chaud | | rgb(255, 250, 240) | floralwhite |
| Gris très clair | | rgb(240, 240, 240) | — |
| Gris clair | | rgb(211, 211, 211) | lightgray |
| Gris moyen | | rgb(128, 128, 128) | gray |
| Gris foncé | | rgb(64, 64, 64) | — |
| Noir doux | | rgb(26, 26, 26) | — |
Couleurs primaires et secondaires
| Couleur | HEX | RGB | Nom CSS |
|---|---|---|---|
| Rouge pur | | rgb(255, 0, 0) | red |
| Rouge vif | | rgb(229, 57, 53) | — |
| Rouge foncé | | rgb(198, 40, 40) | — |
| Vert pur | | rgb(0, 255, 0) | lime |
| Vert naturel | | rgb(76, 175, 80) | — |
| Vert foncé | | rgb(27, 94, 32) | darkgreen |
| Bleu pur | | rgb(0, 0, 255) | blue |
| Bleu roi | | rgb(21, 101, 192) | — |
| Bleu ciel | | rgb(66, 165, 245) | — |
| Jaune pur | | rgb(255, 255, 0) | yellow |
| Jaune or | | rgb(255, 193, 7) | — |
| Cyan | | rgb(0, 255, 255) | cyan |
| Magenta | | rgb(255, 0, 255) | magenta |
Couleurs web courantes
| Couleur | HEX | RGB | Usage courant |
|---|---|---|---|
| Orange vif | | rgb(255, 102, 0) | CTA, alertes |
| Orange doux | | rgb(255, 152, 0) | UI Material |
| Rose vif | | rgb(233, 30, 99) | Accents design |
| Rose pâle | | rgb(252, 228, 236) | Fonds |
| Violet | | rgb(156, 39, 176) | Branding créatif |
| Indigo | | rgb(63, 81, 181) | Interfaces pro |
| Teal | | rgb(0, 150, 136) | Santé, tech |
| Marron | | rgb(121, 85, 72) | Restauration, artisanat |
| Beige | | rgb(245, 240, 232) | Fonds chaleureux |
Teintes de rouge fréquemment recherchées
| Couleur | HEX | RGB |
|---|---|---|
| Rouge tomate | | rgb(255, 99, 71) |
| Rouge cramoisi | | rgb(220, 20, 60) |
| Rouge bordeaux | | rgb(128, 0, 32) |
| Rouge corail | | rgb(255, 64, 64) |
Teintes de vert fréquemment recherchées
| Couleur | HEX | RGB |
|---|---|---|
| Vert olive | | rgb(128, 128, 0) |
| Vert sauge | | rgb(135, 174, 115) |
| Vert menthe | | rgb(152, 255, 152) |
| Vert forêt | | rgb(34, 139, 34) |
HEX, RGB, HSL : quel format utiliser selon le contexte
Le format HEX est le standard du web. Tous les navigateurs, tous les CMS, tous les outils de design l’acceptent. C’est le format par défaut dans les fichiers CSS, les thèmes WordPress, les chartes graphiques livrées par une agence. Sans raison particulière d’utiliser un autre format, HEX est le bon choix.
Le format RGB devient utile dès que vous manipulez les couleurs dynamiquement en JavaScript : interpolation de couleurs, transitions calculées, transparence variable. La syntaxe rgba(255, 0, 0, 0.5) pour gérer l’opacité directement dans la valeur de couleur est plus lisible qu’un HEX à 8 caractères.
Le format HSL est le plus efficace pour construire un système de couleurs cohérent. La teinte (H) est un angle de 0 à 360 degrés sur le cercle chromatique, la saturation (S) et la luminosité (L) sont des pourcentages. Pour créer des variantes claires et sombres d’une même couleur, il suffit de modifier uniquement le paramètre L sans toucher à H ni S. La même opération en HEX demande un recalcul complet à chaque étape.
Le format HSV est celui qu’affichent nativement Photoshop, Illustrator et Figma dans leurs sélecteurs de couleur. Si vous relevez une valeur dans l’un de ces outils et devez l’intégrer dans un CSS, la conversion HSV vers HEX se fait en une saisie dans le convertisseur OsmoTools.
Le format CMJN est le standard de l’impression quadrichromique. La conversion depuis RVB est une approximation mathématique car les deux espaces couleur ne couvrent pas le même gamut : certaines couleurs vives affichables sur écran ne sont pas reproductibles en quadrichromie standard. Pour aller plus loin sur ce sujet, l’article sur le CMJN détaille les différences entre les deux espaces couleur et leurs implications concrètes pour l’impression.
Construire une palette cohérente avec les codes HEX
Une palette de marque dépasse rarement quatre à six couleurs : une couleur principale, une ou deux couleurs d’accentuation, un neutre clair et un neutre foncé. Les définir en HEX dès le départ évite les dérives d’une utilisation à l’autre.
La pratique la plus simple pour maintenir la cohérence : documenter les valeurs HEX dans un fichier de référence partagé, avec pour chaque couleur son HEX, son RGB, son HSL et son CMJN pour les besoins print. Quand toutes les personnes qui touchent à la communication d’une même marque travaillent depuis ce fichier, les écarts de teinte entre le site, les réseaux sociaux et les supports imprimés disparaissent.
Pour construire des variantes d’une couleur (clair, foncé, hover, fond désactivé), le format HSL est plus efficace que HEX. Partir d’une teinte hsl(220, 70%, 50%) et n’ajuster que la luminosité garantit que toutes les variantes restent dans la même famille de teinte : hsl(220, 70%, 90%) pour un fond très clair, hsl(220, 70%, 25%) pour un état actif sombre. La même opération en HEX demande un recalcul complet à chaque étape.
Les noms de couleur CSS : 148 valeurs, pas plus
La spécification W3C définit 148 couleurs CSS nommées, de aliceblue à yellowgreen. Ces noms fonctionnent partout où un code HEX est accepté : color: red est strictement équivalent à color: .#FF0000
Ces noms sont utiles pour les prototypes rapides et les démonstrations. En production, la quasi-totalité des chartes graphiques utilise des codes HEX car aucune couleur de marque ne tombe exactement sur l’une des 148 valeurs standardisées.
Quelques valeurs spéciales à connaître, qui se comportent comme des couleurs dans les propriétés color, background-color et border-color : transparent pour une opacité nulle, currentColor pour hériter la couleur du texte du parent, inherit et unset. Ces valeurs ne sont pas des couleurs hexadécimales mais des instructions CSS que tous les navigateurs interprètent nativement.
Questions fréquentes
sur les codes couleur HEX
Ce sont deux façons d’exprimer exactement la même information. RGB écrit les trois composantes rouge, vert, bleu en valeurs décimales de 0 à 255 : rgb(255, 0, 0). HEX écrit les mêmes valeurs en base 16 : #FF0000. Le résultat affiché à l’écran est identique. HEX est plus compact et plus lisible dans un fichier CSS, RGB est plus pratique quand vous manipulez les valeurs par calcul en JavaScript.
Sur un site, l’inspecteur de votre navigateur (clic droit, Inspecter) affiche les valeurs HEX de toutes les couleurs définies dans le CSS. Pour une image, Photoshop, Figma et la plupart des outils de design intègrent un pipette qui restitue le code HEX au clic. Si vous n’avez accès à aucun de ces outils, une capture d’écran chargée dans le convertisseur OsmoTools ne suffit pas car l’outil travaille avec des valeurs saisies, pas des images. Dans ce cas, une extension navigateur de type pipette (ColorZilla sur Chrome et Firefox) est la solution la plus rapide.
Chaque écran a son propre profil colorimétrique. Un même #E53935 peut tirer légèrement sur l’orange sur un écran non calibré et rester un rouge vif sur un écran calibré sRGB. Ce n’est pas un bug du code HEX : la valeur est identique, c’est l’interprétation matérielle qui varie. Pour les usages professionnels (impression, identité visuelle), un écran calibré avec un profil sRGB ou Display P3 selon la destination est indispensable.
Oui, avec le format à 8 caractères #RRGGBBAA. Les deux derniers caractères représentent le canal alpha en hexadécimal : FF pour une opacité totale, 80 pour 50 %, 00 pour transparent. #FF000080 est donc un rouge à 50 % d’opacité. Cette notation est supportée par tous les navigateurs modernes. Si vous devez gérer l’opacité de façon lisible dans un CSS ou en JavaScript, le format rgba(255, 0, 0, 0.5) reste plus courant car la valeur alpha y est directement exprimée entre 0 et 1.
Les deux modèles utilisent la teinte (H) et la saturation (S) mais définissent le troisième axe différemment. HSL utilise la luminosité (Lightness) : 50 % correspond à la couleur pure, 0 % est noir, 100 % est blanc. HSV utilise la valeur (Value) : 100 % correspond à la couleur pure ou blanche selon la saturation, 0 % est toujours noir. HSV est plus proche du fonctionnement des sélecteurs de couleur de Photoshop et Figma. HSL est plus pratique en CSS pour construire des systèmes de couleurs car modifier uniquement L crée des variantes cohérentes sans toucher à la teinte.
