HEX vs RGB vs HSL vs OKLCH — Quand chaque format de couleur CSS a un sens réel

Ouvrez n'importe quelle base de code écrite par quelqu'un qui a appris le CSS sur W3Schools en 2011, et vous verrez une muraille de #rrggbb valeurs. HEX est partout — pas parce qu'il est le meilleur format pour le travail, mais parce qu'il était le format utilisé dans tous les tutoriels et les sélectionneurs de couleur quand la plupart d'entre nous ont commencé à apprendre le CSS. Il fonctionne encore. Il ne disparaît pas. Mais en 2026, utiliser HEX pour tout est comme écrire du JavaScript sans const car vous avez appris à partir d'un article de blog de 2009.

Il existe quatre formats de couleur à connaître : HEX, RGB, HSL et OKLCH. Chaque format est le bon choix dans certaines situations — et le mauvais choix dans d'autres. Voici quand utiliser lequel.

HEX (#rrggbb / #rrggbbaa)

HEX encode le couleur sous forme de paires de chiffres hexadécimaux : deux pour le rouge, deux pour le vert, deux pour le bleu. #ff5733 se traduit en rgb(255, 87, 51) — un orange rouge. Sans un sélectionneur de couleur ouvert, vous ne pouvez pas lire cette valeur ; vous devez simplement la connaître.

Il existe une forme raccourcie : #f53 se développe en #ff5533. Elle ne fonctionne que lorsque les deux chiffres de chaque paire sont identiques. La transparence est la quatrième paire : #ff5733cc — où cc est le canal alpha. Cela correspond approximativement à 80% de transparence pour ceux qui suivent le score à la maison (0xCC / 0xFF ≈ 0.8). Complètement valide, totalement illisible.

Quand HEX est approprié

• Les tokens de conception provenant de Figma ou Sketch. Les concepteurs exportent HEX. Vous collez HEX. C'est le flux de travail. Ne le combattez pas.
• Dans tous les cas où la valeur est statique et contrôlée par un outil visuel. Si un sélectionneur de couleur dans VS Code ou les outils de développement du navigateur produit la valeur, HEX est acceptable.
• Les intégrations tierces qui ne prennent que des entrées en HEX.

Quand HEX est une mauvaise décision

• Lors de la modification des couleurs de manière programmée — vous ne pouvez pas raisonnablement effectuer des calculs sur #ff5733
• L'expression de relations de tonalité — il n'existe pas de méthode intuitive pour dériver une variation plus claire ou plus sombre
• La création d'un système de conception avec des tokens sémantiques

RGB / RGBA

RGB indique les mêmes canaux rouge, vert, bleu sous forme de décimaux simples. rgb(255, 87, 51) est le même orange rouge que #ff5733, mais les valeurs des canaux sont au moins des nombres lisibles par l'homme. La syntaxe moderne du CSS Color Level 4 élimine les virgules : rgb(255 87 51). La transparence est exprimée par un slash : rgb(255 87 51 / 50%). L'ancien rgba(255, 87, 51, 0.5) fonctionne encore — les navigateurs n'ont pas abandonné ce format et ne le feront pas.

Quand RGB est approprié

• La manipulation des couleurs en JavaScript. Lorsque vous devez ajuster l'intensité en mélangeant avec le blanc : vous pouvez effectuer directement des opérations arithmétiques sur les valeurs des canaux.
• Canvas et WebGL. Les API fonctionnent avec des entiers de 0 à 255 ou des flottants de 0 à 1. RGB correspond directement à ce que l'infrastructure de pixel attend.
• Lorsque vous obtenez des valeurs des canaux à partir d'un capteur ou d'une bibliothèque d'images et que vous n'avez pas besoin de conversion.

Quand RGB est une mauvaise décision

• La conception de schémas de couleurs — il n'existe pas de modèle mental visuel pour ce que des ajustements minimes de RGB semblent
• Le thème de mode sombre — vous devriez recalculer les trois canaux pour modifier l'intensité

HSL (Hue / Saturation / Lightness)

HSL est le premier format de couleur qui correspond à la manière dont les humains pensent à la couleur. Le ton est un angle sur la roue des couleurs (0–360°), la saturation contrôle la vivacité de la couleur (0% = gris, 100% = pur), et la luminosité contrôle l'intensité (0% = noir, 100% = blanc). hsl(14 100% 60%) est ce même orange rouge.

Avantage pratique : si vous voulez une version plus sombre d'une couleur, réduisez la valeur de luminosité. Une version atténuée ? Réduisez la saturation. Vous pouvez dériver un ensemble complet de tons à partir d'une seule valeur de ton. C'est pourquoi les systèmes de propriétés CSS basés sur HSL sont si courants :

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

La transparence fonctionne de la même manière que les autres : hsl(14 100% 60% / 50%).

Il existe une limitation réelle avec HSL : son échelle de luminosité n'est pas uniforme perceptive. Deux couleurs avec la même valeur L peuvent paraître très différentes en intensité — essayez hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (bleu) côte à côte. Le jaune semble beaucoup plus intense, même s'ils partagent L=50%. Cela importe pour la conception accessible et en particulier pour les gradients.

Quand HSL est approprié

• Les systèmes de couleurs et les tokens de conception. Le modèle de palette à ton unique décrit ci-dessus est ergonomique et lisible.
• Le thème de mode sombre. Échangez les valeurs de L, tout le reste reste inchangé. Cela fonctionne proprement.
• Les tons et les teintes dans les propriétés CSS personnalisées — l'usage pour lequel elle a été conçue.

OKLCH — La Remplacement Moderne

OKLCH est ce que HSL devrait être. Il décrit la couleur à l'aide de trois valeurs : luminosité (0–1), chroma (comme la saturation, environ 0–0.4), et ton (0–360°). oklch(0.65 0.18 28) est approximativement le même orange rouge.

La différence clé par rapport à HSL est la uniformité perceptive. Dans OKLCH, deux couleurs à la même valeur de luminosité apparaissent effectivement de la même intensité à l'œil humain. Le jaune à L=0.65 et le bleu à L=0.65 apparaissent de luminosité similaire — contrairement à HSL où le jaune domine. Cela importe de deux manières spécifiques :

• La conception accessible. Lorsque vous calculez les rapports de contraste basés sur les valeurs de L, ils reflètent ce que les utilisateurs perçoivent — et non seulement ce que le calcul indique.
• Les gradients. Un gradient HSL allant du bleu au jaune passe par une bande grise mouillée au milieu. Le même gradient en OKLCH reste vivant tout au long parce que les étapes intermédiaires restent à une luminosité perçue constante.

Soutien des navigateurs en 2023 : tous les navigateurs modernes (Chrome 111+, Firefox 113+, Safari 15.4+). Aucun support pour IE11 — et personne ne développe de nouveaux codes en 2026 en ciblant IE11.

Tailwind v4 a déplacé son ensemble de couleurs entier vers OKLCH. Ce n'est pas un détail mineur d'implémentation — c'est un signal du framework le plus utilisé en CSS qui indique la bonne direction pour les systèmes de couleurs.

Si vous concevez ou expérimentez avec des gradients HSL ou OKLCH, le Générateur de dégradé CSS sur IO Tools prend en charge directement les deux formats — utile pour comparer la qualité des gradients de côté à côté.

Quand OKLCH est approprié

• Des systèmes de conception construits de zéro. Si vous définissez vos tokens de couleur aujourd'hui, OKLCH vous donne une uniformité perceptive que HSL ne possède pas.
• Des interfaces avec de nombreux gradients. La différence de qualité des gradients est visible et significative.
• Des palettes de couleurs accessibles où vous avez besoin de rapports de contraste reflétant la perception visuelle réelle.

La Même Couleur dans les Quatre Formats

Voici rgb(255, 87, 51) — un orange rouge chaud — exprimé dans tous les formats, avec des variantes de transparence 50% :

Format	Couleur unie	50% Transparent
HEX	#ff5733	#ff573380
RVB	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Remarquez lequel vous voudriez modifier manuellement si vous deviez rendre la couleur 20% plus sombre. HEX : vous ouvrez un sélectionneur de couleur. RGB : vous faites des calculs sur trois valeurs. HSL : vous changez la valeur de L de 60% à 40%. OKLCH : vous changez la valeur de L de 0.65 à 0.45. Les versions HSL et OKLCH expriment directement l'intention.

Le Chemin Pratique de Migration

Ne réécrivez pas vos valeurs HEX existantes. Elles fonctionnent, elles ne sont pas cassées, et le retour sur investissement de ce changement est essentiellement nul. Les laisser.

Pour les nouveaux projets, appliquez ces règles :

• Des couleurs statiques provenant d'un concepteur ou d'un outil de conception → HEX. Collez ce que Figma vous donne. Aucune conversion n'est nécessaire.
• Des couleurs que vous manipulez en JavaScript ou que vous passez à Canvas/WebGL → RGB. Les calculs basés sur les canaux s'adaptent parfaitement.
• Les propriétés CSS personnalisées et les tokens de conception nouveaux → HSL ou OKLCH. Vous souhaitez la capacité de dériver des tons et des teintes sans recalculer trois valeurs séparées.
• Des systèmes de conception construits de zéro, ou des interfaces avec de nombreux gradients → OKLCH. L'uniformité perceptive vaut la légère pente d'apprentissage pour les valeurs de Chroma.

Un modèle concret pour les propriétés CSS personnalisées dans un nouveau projet :

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

Cela est lisible, éditable sans outil, et produit des gradients meilleurs que l'approche équivalente en HSL.

Pour conclure

HEX n'est pas faux — il est simplement spécialisé. Il est optimisé pour les valeurs que vous obtenez à partir d'outils visuels et que vous collez dans le code, et non pour les valeurs que vous pensez ou que vous modifiez. RGB est utile lorsque vous devez interagir avec des API JavaScript ou Canvas. HSL reste une bonne option pour les tokens de conception si vous travaillez dans un code existant qui l'utilise. OKLCH est là où vous souhaitez vous diriger pour les nouveaux systèmes de conception.

La barrière à l'adoption de HSL ou OKLCH est plus faible qu'elle ne semble. Vous n'avez pas besoin de migrer quoi que ce soit — commencez simplement à les utiliser pour les prochaines tokens que vous écrivez. Le Sélecteur de couleurs sur IO Tools montre une couleur à travers tous les quatre formats simultanément, ce qui est un référentiel utile lorsque vous convertissez des valeurs HEX existantes en HSL ou OKLCH pour un nouveau token.

Vous aimerez peut-être aussi