Comment convertir une couleur HEX en RGB ?

Une couleur HEX est composée de 6 caractères hexadécimaux représentant les canaux Rouge, Vert et Bleu . Par exemple, #FF5733 se décompose en R=255 (FF) , G=87 (57) , B=51 (33) . Chaque paire de caractères hexadécimaux se convertit en décimal pour obtenir la valeur du canal (0-255).

Quelle est la différence entre RGB et HSL ?

RGB (Rouge, Vert, Bleu) est un espace colorimétrique additif qui décrit la couleur par l'intensité de chaque canal lumineux (0-255). HSL (Teinte, Saturation, Luminosité) est plus intuitif : la teinte va de 0° à 360° (rouge=0°, vert=120°, bleu=240°), la saturation de 0% (gris) à 100% (couleur vive), et la luminosité de 0% (noir) à 100% (blanc).

Qu'est-ce qu'une couleur complémentaire ?

Une couleur complémentaire est la couleur opposée sur le cercle chromatique , soit une teinte décalée de 180° . Par exemple, le complémentaire du rouge (0°) est le cyan (180°). Les paires complémentaires créent un contraste maximal et sont très utilisées en design pour attirer l'attention.

Comment utiliser les couleurs analogues en design ?

Les couleurs analogues sont des teintes adjacentes sur le cercle chromatique , généralement à ±30° de la couleur principale. Elles créent une harmonie douce et cohérente, idéale pour des interfaces apaisantes. Par exemple, un bleu (240°) sera harmonieux avec un bleu-violet (210°) et un bleu-vert (270°).

Qu'est-ce qu'une harmonie triadique ?

Une harmonie triadique utilise trois couleurs équidistantes sur le cercle chromatique , séparées de 120° chacune. C'est une palette très équilibrée et vibrante. Par exemple, rouge (0°), vert (120°) et bleu (240°) forment une triade primaire dans l' espace colorimétrique HSL. Cette approche offre beaucoup de contraste tout en restant harmonieuse.

Convertisseur Couleurs HEX RGB HSL

Convertisseur de couleurs HEX, RGB et HSL : comprendre les espaces colorimétriques

Pourquoi plusieurs formats de couleur existent en CSS

Le web utilise principalement trois formats de couleur : HEX, RGB et HSL. Chacun représente la même couleur, mais sous un angle différent. Le format HEX est un raccourci hexadécimal compact, le RGB décrit l'intensité de chaque canal lumineux, et le HSL modélise la couleur telle que l'oeil humain la perçoit (teinte, saturation, luminosité).

Comprendre ces espaces colorimétriques est essentiel pour tout développeur ou designer web. Le choix du bon format simplifie la manipulation des couleurs dans vos feuilles de style et améliore la maintenabilité de votre code.

HEX : le format historique du web

Le format HEX (hexadécimal) est la notation de couleur la plus ancienne et la plus répandue en CSS. Il encode chaque canal Rouge, Vert et Bleu sur deux caractères hexadécimaux (00 à FF), soit 256 valeurs par canal et un total de 16,7 millions de couleurs possibles.

Structure d'une couleur HEX

Le format #RRGGBB se décompose en trois paires : #FF5733 donne R=FF (255), G=57 (87), B=33 (51). La notation courte #RGB est un raccourci où chaque caractère est doublé : #F53 = #FF5533.

Le HEX est idéal pour les constantes de couleur dans les design tokens et les variables CSS. Sa compacité (7 caractères avec le #) en fait le format le plus pratique pour le copier-coller entre Figma, le code et les outils de design.

RGB : le modèle additif de la lumière

Le modèle RGB (Rouge, Vert, Bleu) est un espace colorimétrique additif : mélanger les trois canaux à leur intensité maximale produit du blanc. Chaque canal va de 0 (éteint) à 255 (intensité maximale). La syntaxe CSS moderne est rgb(255 87 51) (sans virgules, norme CSS Color Level 4).

Comparaison des formats de couleur CSS

HEX

#RRGGBB : compact, historique, pas d'alpha natif

RGB

rgb(R, G, B) : intuitif pour les dev, canal alpha facile

HSL

hsl(H, S%, L%) : intuitif pour les designers, teinte lisible

OKLCH

oklch(L C H) : perceptuellement uniforme, gamut P3

HWB

hwb(H W B) : teinte + blanc + noir, rare en production

Source : W3C CSS Color Level 4, MDN Web Docs

HSL : penser la couleur comme un humain

Le modèle HSL (Hue, Saturation, Lightness) est le plus intuitif pour manipuler les couleurs. La teinte (H) est un angle sur le cercle chromatique (0-360 degrés), la saturation (S) va de 0 % (gris) à 100 % (couleur vive), et la luminosité (L) de 0 % (noir) à 100 % (blanc).

Le HSL excelle pour créer des palettes cohérentes : il suffit de fixer la teinte et de varier la saturation et la luminosité pour obtenir des nuances harmonieuses. C'est aussi le format le plus pratique pour créer un mode sombre : réduisez la luminosité et augmentez légèrement la saturation.

16,7 M

Nombre de couleurs possibles avec les formats HEX et RGB (256 x 256 x 256)

OKLCH : le futur des couleurs en CSS

Le format OKLCH (Oklab Lightness Chroma Hue) est le nouveau standard recommandé par la spécification CSS Color Level 4. Contrairement au HSL, il est perceptuellement uniforme : un changement de 10 unités de luminosité parait identique, quelle que soit la teinte. Le HSL, lui, présente des biais perceptuels (le jaune parait plus clair que le bleu à luminosité égale).

HSL

Non uniforme

Le jaune à L=50% parait plus clair que le bleu à L=50%

OKLCH

Uniforme

Luminosité perçue identique à valeurs égales

OKLCH est supporté par Chrome 111+, Firefox 113+ et Safari 15.4+, soit environ 93 % des navigateurs en 2026. Il est particulièrement utile pour les design tokens et les palettes de couleurs accessibles.

Exemple concret : convertir #FF5733 dans tous les formats

Prenons la couleur #FF5733 (un orange vif) et convertissons-la étape par étape :

Extraire les canaux HEX

#FF5733

FF = 255, 57 = 87, 33 = 51 (conversion hexadécimal vers décimal)

Obtenir le RGB

rgb(255,87,51)

Directement : rgb(255, 87, 51)

Calculer le HSL

hsl(11,100%,60%)

H = (87-51)/(255-51) x 60 = 11 deg, S = 100%, L = 60%

Convertir en OKLCH

oklch(66% .22 41)

L = 0,66, C = 0,22, H = 41 (calcul via matrice Oklab)

Quand utiliser quel format

Utilisez HEX pour les design tokens et variables CSS (compact, copier-coller facile). Utilisez HSL pour créer des palettes et varier teinte/saturation/luminosité dynamiquement. Utilisez OKLCH pour les palettes perceptuellement uniformes et le gamut étendu P3.

Erreurs fréquentes à éviter

Confondre luminosité HSL et luminance WCAG : la luminosité HSL (L) n'est pas la même que la luminance relative utilisée pour le calcul du contraste WCAG. Deux couleurs à L=50% peuvent avoir des contrastes très différents.
Utiliser la transparence HEX sans vérifier le support : la notation #RRGGBBAA (8 caractères) n'est pas supportée par IE11 et les anciens navigateurs. Préférez rgba() pour la compatibilité.
Créer des palettes en RGB : interpoler entre deux couleurs en RGB produit des teintes intermédiaires ternes. Utilisez HSL ou OKLCH pour des dégradés et palettes visuellement cohérents.
Ignorer le gamut : les couleurs OKLCH peuvent dépasser le gamut sRGB standard. Vérifiez que vos couleurs s'affichent correctement sur tous les écrans.
Oublier l'accessibilité : une couleur visuellement attrayante n'est pas forcément accessible. Testez toujours le contraste avec un vérificateur WCAG avant de valider votre palette.

Sources et références

W3C, CSS Color Level 4 : spécification des espaces colorimétriques CSS.
MDN Web Docs, CSS color values : documentation complète des formats de couleur.
Google Developers, web.dev : guide sur OKLCH en CSS.
CSS-Tricks : l'expansion du gamut de couleurs sur le web.

Convertisseur Couleurs HEX / RGB / HSL

Harmonies de couleurs

Questions fréquentes