Convertir un code HEX en RGB
Réponse rapide : un code HEX du type #RRGGBB se lit par blocs de deux caractères hexadécimaux, chacun converti en base 10 pour donner un canal de 0 à 255. #7C3AED devient rgb(124, 58, 237).
Le HEX est simplement une autre façon d'écrire du RGB. Chaque paire de caractères après le # représente un nombre en base 16 (hexadécimal), où les chiffres vont de 0 à 9 puis de A à F. Pour convertir, on transforme chaque paire en base 10 : la première paire donne le rouge, la deuxième le vert, la troisième le bleu.
Prenons l'exemple #7C3AED, une teinte violette courante en design d'interface :
| Bloc HEX | Valeur base 16 | Canal RGB | Valeur décimale |
|---|
7C | 7×16 + 12 | Rouge (R) | 124 |
3A | 3×16 + 10 | Vert (G) | 58 |
ED | 14×16 + 13 | Bleu (B) | 237 |
Ce qui donne rgb(124, 58, 237). La forme abrégée à trois caractères (#RGB) fonctionne en doublant chaque caractère : #F0A se développe en #FF00AA avant la même conversion. Pour la transparence, on ajoute deux caractères de plus (#RRGGBBAA) ou on utilise la notation rgba(r, g, b, alpha) avec un alpha entre 0 et 1.
HSL et HSV : deux façons de penser la couleur autrement
Réponse rapide : HSL (Teinte, Saturation, Luminosité) et HSV/HSB (Teinte, Saturation, Valeur) décrivent la même couleur RGB de façon plus intuitive pour un humain — utile pour éclaircir ou assombrir une teinte sans changer sa nature.
RGB décrit une couleur par la quantité de lumière rouge, verte et bleue mélangée ; c'est parfait pour un écran mais peu intuitif pour un humain qui veut « la même couleur, mais un peu plus claire ». C'est là qu'interviennent HSL et HSV.
HSL — Teinte (0-360° sur la roue chromatique), Saturation (%), Luminosité (%). À Luminosité 50%, on obtient la couleur pure ; à 100%, du blanc ; à 0%, du noir. Garder la teinte fixe et faire varier la luminosité permet de produire facilement une échelle de nuances cohérente pour une charte graphique.
HSV/HSB — Teinte, Saturation, Valeur/Brightness. À Valeur 100%, la couleur est la plus vive possible ; pour obtenir du blanc, il faut aussi réduire la saturation. C'est le modèle que la plupart des sélecteurs de couleur de logiciels de design (type roue + carré) utilisent en interne, car « vif et éclatant » y est plus intuitif à manipuler à la souris.
Notre couleur d'exemple #7C3AED donne hsl(262, 83%, 58%) et hsv(262, 76%, 93%) — même couleur, deux systèmes de coordonnées différents.
Vérifier le contraste WCAG et RGAA d'une combinaison de couleurs
Réponse rapide : le texte de taille normale doit atteindre un ratio de contraste d'au moins 4,5:1 (niveau AA) sur son arrière-plan ; le texte large peut descendre à 3:1. Le RGAA français applique exactement les mêmes seuils.
Le ratio de contraste WCAG se calcule à partir de la luminance relative de chaque couleur (une mesure de la « clarté perçue » qui prend en compte le fait que l'œil humain perçoit le vert plus intensément que le bleu, par exemple). Le ratio final va de 1:1 (aucun contraste, comme du blanc sur blanc) à 21:1 (noir pur sur blanc pur).
| Type de texte | Niveau AA | Niveau AAA |
|---|
| Texte normal (< 18pt) | 4,5:1 | 7:1 |
| Texte large (≥ 18pt, ou 14pt gras) | 3:1 | 4,5:1 |
| Composants d'interface / icônes | 3:1 | — |
Exemple (illustratif) : un texte gris #767676 sur fond blanc #FFFFFF atteint environ un ratio de 4,54:1 — tout juste conforme AA pour du texte normal, mais insuffisant pour viser AAA. Un texte violet clair #A855F7 sur fond blanc, lui, retombe souvent sous 3:1 et échoue même au niveau AA : les couleurs vives et claires sont un piège classique en design d'interface.
En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est obligatoire pour les sites publics et de nombreux organismes ; son critère 3.2 sur le contraste de couleur reprend mot pour mot les seuils WCAG 2.1. Vérifier la conformité WCAG AA revient donc à vérifier la conformité RGAA correspondante.
Générer une palette de couleurs assortie
Réponse rapide : à partir d'une seule couleur de base, on peut dériver des palettes complémentaires (H+180°), analogues (H±30°) ou triadiques (H, H+120°, H+240°) en faisant simplement pivoter la teinte sur la roue chromatique.
Une fois une couleur de marque choisie, il est rare qu'elle suffise seule : la plupart des interfaces ont besoin d'une couleur d'accent, d'une couleur de succès, d'une couleur d'alerte, et d'une échelle de nuances plus claires/plus foncées pour les états au survol, les fonds de carte, les bordures, etc.
- Complémentaire — teinte opposée exacte (+180°) ; fort contraste visuel, utile pour un bouton d'action qui doit ressortir.
- Analogue — teintes voisines (±30°) ; rendu harmonieux et calme, souvent utilisé pour des dégradés de fond.
- Triadique — trois teintes équidistantes (120° d'écart) ; palette vive mais équilibrée, courante en illustration et en branding ludique.
- Échelle de nuances 50-900 — même teinte, luminosité variable ; la base de tout système de couleurs pour une charte d'interface (à la manière des échelles Tailwind).
Générer ces variations à la main demande de refaire le calcul de conversion RGB↔HSL à chaque étape ; un outil qui affiche les formats en direct pendant qu'on ajuste la teinte évite les erreurs d'arrondi et fait gagner du temps sur une session de design.
🎨 À retenir : HEX, RGB, HSL et HSV décrivent tous exactement la même couleur dans le même espace colorimétrique sRGB — ce ne sont que des systèmes de coordonnées différents. La conversion est toujours réversible sans perte.
Convertissez votre couleur en un instant
HEX, RGB, HSL, HSV, CMJN, OKLCH — plus contraste WCAG/RGAA et palettes, gratuit et dans votre navigateur.
Essayer l'outil →
Questions fréquentes
Comment convertit-on un code couleur HEX en RGB ?
Un code HEX s'écrit #RRGGBB, et chaque bloc de deux caractères représente un canal de couleur en base 16. On convertit chaque bloc en base 10 : RR est le rouge, GG le vert, BB le bleu, chacun de 0 à 255. Par exemple, #7C3AED donne 7C=124, 3A=58, ED=237, soit rgb(124, 58, 237). La forme courte à trois caractères (#RGB) se développe en doublant chaque caractère : #F0A devient #FF00AA.
Quel ratio de contraste est requis pour un texte accessible ?
Selon WCAG 2.1, le texte de taille normale nécessite un ratio AA minimum de 4,5:1, et AAA au moins 7:1. Pour le texte large (environ 18pt, ou 14pt gras et plus), les seuils baissent à 3:1 (AA) et 4,5:1 (AAA). Le RGAA français applique exactement les mêmes seuils dans son critère 3.2.
Quelle est la différence entre HSL et HSV/HSB ?
Les deux utilisent Teinte et Saturation, mais leur troisième composant diffère. En HSL, la Luminosité à 50% donne la couleur pure, 100% donne blanc, 0% donne noir. En HSV/HSB, la Valeur à 100% donne la couleur la plus vive ; pour atteindre le blanc il faut aussi réduire la saturation. Les sélecteurs de couleur des logiciels de design utilisent souvent HSV, tandis que CSS prend en charge nativement hsl().
Comment construire une palette de couleurs harmonieuse à partir d'une seule couleur ?
Les méthodes les plus courantes reposent sur des relations angulaires de la roue chromatique. Une palette complémentaire prend la teinte opposée (H+180°) pour un fort contraste. Une palette analogue utilise des teintes voisines (H±30°) pour un rendu harmonieux. Une palette triadique combine trois teintes réparties uniformément (H, H+120°, H+240°). Une échelle de nuances 50-900 garde la teinte fixe et fait varier la luminosité.
Pourquoi le CMJN affiché diffère-t-il du HEX à l'écran ?
HEX/RGB est un modèle additif conçu pour les écrans, qui ajoutent de la lumière ; CMJN est un modèle soustractif conçu pour l'impression, qui ajoute de l'encre. Certaines couleurs vives affichables à l'écran ne sont pas reproductibles exactement en encre, donc la conversion CMJN reste une approximation mathématique. Pour des résultats d'impression exacts, utilisez le profil ICC pertinent ou une référence Pantone.
Méthodologie : les conversions et exemples de ce guide suivent les formules standards de l'espace colorimétrique sRGB et les seuils officiels WCAG 2.1 / RGAA. Les valeurs de contraste citées en exemple sont fournies à titre illustratif pour expliquer la méthode ; vérifiez toujours vos propres couleurs avec l'outil avant de valider un design. Ce contenu est informatif et ne remplace pas un audit d'accessibilité professionnel.