Formats de couleur CSS : hex, RGB, HSL, OKLCH — lequel utiliser et quand

Le CSS moderne prend en charge quatre notations de couleur principales : hex (#FF6600), rgb(),hsl(), et le plus récent oklch(). Toutes décrivent le même gamut de couleurs (sRGB par défaut, plus large pour OKLCH). Elles diffèrent en lisibilité humaine, en facilité de manipulation, et dans le type de changement de couleur qui semble naturel.

Les quatre formats en un coup d’œil

Hex : le format de stockage

Hex encode chaque canal RGB sous forme de valeur hexadécimale à deux chiffres. #FF6600signifie rouge 255, vert 102, bleu 0 — c’est un orange vif.

Avantages : court, universellement compris, facile à copier-coller, fonctionne dans tout contexte CSS.

Inconvénients : opaque à lire (“#7E4F2Best-il un ton chaud ou froid ?”), on ne peut pas facilement ajuster la luminosité ou la saturation sans convertir d’abord.

Le CSS moderne prend en charge le hex à 8 chiffres pour la transparence :#FF6600AAest l’orange ci-dessus à 67% d’opacité.

rgb() : le format de canal explicite

Mêmes canaux que hex, nombres décimaux, alpha optionnel. Deux syntaxes coexistent :

• Forme avec virgules (legacy) : rgb(255, 102, 0) ou avec alpha rgba(255, 102, 0, 0.67)
• Forme moderne avec espaces : rgb(255 102 0) ou avec alpha rgb(255 102 0 / 0.67)

Idéal pour la génération programmatique : construire une couleur à partir de la sortie d’un algorithme, mélanger deux couleurs, calculer le contraste d’accessibilité.

hsl() : le format ajustable manuellement

Trois valeurs : teinte (0-360°), saturation(0-100%), luminosité (0-100%). Ajuster chacune indépendamment semble plus naturel que modifier les canaux RGB.

• Teinte : la couleur elle-même. 0 = rouge, 60 = jaune, 120 = vert, 180 = cyan, 240 = bleu, 300 = magenta.
• Saturation : 0% = gris, 100% = couleur pure.
• Luminosité : 0% = noir, 50% = teinte pure, 100% = blanc.

Idéal pour les tokens de design où vous voulez une variante “même couleur, plus sombre” — diminuez la luminosité de 10%, gardez teinte et saturation. Les états de survol, les variantes de thème et les dégradés en bénéficient.

Le piège : la luminosité HSL ne suit pas la luminosité perçue de façon uniforme. Le jaune HSL à 50% de luminosité semble beaucoup plus clair que le bleu HSL à 50% de luminosité. Pour un design de couleurs perceptuellement uniforme, OKLCH est le meilleur choix.

oklch() : le format perceptuel

Trois valeurs : L (luminosité, 0-1),C (chroma, 0-~0.4 pour sRGB),H(teinte, 0-360°). Basé sur l’espace colorimétrique perceptuel OKLab (Björn Ottosson, 2020).

La propriété clé : des valeurs de luminosité égales semblent également lumineuses. oklch(0.6 0.2 0) (rouge) etoklch(0.6 0.2 120) (vert) etoklch(0.6 0.2 240) (bleu) ont tous la même luminosité perçue, contrairement à HSL où ils varieraient dramatiquement.

Idéal pour : concevoir des échelles de couleurs, des thèmes sombres, s’assurer que le contraste du texte reste constant lors d’une rotation de teinte. Pris en charge dans tous les navigateurs evergreen depuis 2023.

Choisir le bon

• Pour les couleurs de marque et les tokens de design :définissez en HSL ou OKLCH. Stockez hex comme fallback dans les fichiers legacy.
• Pour les rampes de couleurs UI (50/100/200/.../900) :OKLCH avec une chroma fixe et une luminosité variable produit des échelles perceptuellement uniformes.
• Pour copier depuis une spec Figma/Photoshop :collez hex. Convertissez via notre outil hex vers RGB quand vous avez besoin de manipuler.
• Pour les choix axés sur l’accessibilité :calculez le contraste WCAG sur la forme rgb. La formule de contraste fonctionne sur RGB linéaire, pas directement sur hex ou HSL.

La conclusion

Hex pour le stockage et le copier-coller. RGB pour le programmatique. HSL pour les ajustements du designer. OKLCH pour les rampes perceptuellement uniformes. La spec CSS permet de mélanger librement ; choisissez le format qui correspond à ce que vous faites avec la couleur.

Sources : CSS Color Module Level 4 (W3C) ; Björn Ottosson,A perceptual colour space (2020) ; documentation MDN sur les fonctions CSS de couleur modernes.

Exemple travaillé : construire une rampe de couleurs UI en 10 étapes

Une rampe de système de design va généralement de 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 — du plus clair au plus sombre — avec 500 comme couleur de marque “vraie”.

Avec HSL à teinte et saturation constantes, luminosité de 95% (étape 50) à 15% (étape 900) :

--brand-50:  hsl(24 100% 95%);
--brand-500: hsl(24 100% 50%);  /* base */
--brand-900: hsl(24 100% 18%);

Problème : la luminosité HSL est mathématiquement uniforme mais pas perceptuellement. Le saut de brand-400 à brand-500 semble dramatique ; le saut de brand-800 à brand-900 est à peine visible.

OKLCH avec chroma constante, luminosité de 0,97 à 0,20 :

--brand-50:  oklch(0.97 0.04 47);
--brand-500: oklch(0.64 0.21 47);  /* base */
--brand-900: oklch(0.26 0.09 47);

Chaque étape ressemble à une étape perceptuellement uniforme par rapport à la précédente. Tailwind v4, Radix Colors v3 et la plupart des systèmes de design modernes ont basculé vers les rampes OKLCH après 2023.

Prise en charge des navigateurs et stratégie de fallback

Pour le web moderne, OKLCH est entièrement utilisable. Pour les emails et les contextes legacy, la cible sûre est le hex à 6 chiffres.

Pour les détails complets de la spec, le CSS Color Module Level 4 couvre toutes les notations, et l’article original OKLab de Björn Ottosson (2020) est la référence canonique pour le modèle perceptuel sous OKLCH. Pour la conversion interactive de formats, le convertisseur de couleur gère hex ↔ rgb ↔ hsl ↔ oklch avec rapport de contraste WCAG.