Fonctions de couleur CSS : rgb(), hsl(), oklch() comparées

CSS offre plus de façons d'écrire une couleur que la plupart des développeurs ne le réalisent. Au-delà du code hex omniprésent, il existe au moins huit fonctions de couleur distinctes — et chacune possède un modèle différent, des forces différentes et des raisons différentes de l'utiliser. Choisir la bonne n'est pas seulement une question de préférence syntaxique ; cela peut déterminer si vos couleurs sont accessibles, si elles s'interpolent correctement dans les animations, et si vous pouvez générer des gammes chromatiques programmatiques qui semblent visuellement cohérentes.

Ce guide couvre toutes les grandes fonctions de couleur CSS, les situations où chacune excelle, et l'état du support navigateur en 2026.

rgb() et rgba()

La fonction rgb() est l'expression CSS directe du modèle colorimétrique RGB : trois nombres de 0 à 255, un pour chaque composante Rouge, Vert et Bleu.

color: rgb(59, 130, 246);     /* Un bleu vif */
color: rgb(255, 87, 51);      /* Un rouge corail chaud */
color: rgb(0, 0, 0);          /* Noir */
color: rgb(255, 255, 255);    /* Blanc */

rgba() est la forme historique pour ajouter l'opacité, avec un quatrième argument de 0 (transparent) à 1 (opaque) :

color: rgba(59, 130, 246, 0.5);   /* Même bleu à 50% d'opacité */

Syntaxe moderne de rgb()

Dans CSS Color Level 4 (entièrement supporté par tous les navigateurs modernes depuis 2023), rgb() a été mis à jour pour accepter le canal alpha directement, rendant rgba() redondant :

/* Ces deux formes sont désormais équivalentes */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

La nouvelle syntaxe séparée par des espaces avec une barre oblique avant la valeur alpha fonctionne avec rgb(), hsl() et d'autres fonctions. Les deux formes fonctionnent — vous verrez les deux dans les bases de code existantes.

Quand utiliser rgb()

rgb() est le plus utile quand : - Vous travaillez à partir d'un code hex et souhaitez que les valeurs brutes des canaux soient visibles - Vous avez besoin d'animer des canaux R, G ou B individuels via des propriétés personnalisées CSS - Vous générez des couleurs de façon programmatique et les données sources sont déjà en RGB

Sa faiblesse est que l'intuition humaine ne correspond pas bien au RGB. Il est difficile de regarder rgb(107, 142, 35) et savoir que vous obtiendrez du vert olive. Pour le travail de design, HSL ou OKLCH sont plus intuitifs.

hsl() et hsla()

HSL signifie Teinte, Saturation, Luminosité (Hue, Saturation, Lightness). Il mappe les couleurs sur un cylindre plutôt que sur un cube, ce qui est beaucoup plus proche de la façon dont les designers pensent réellement la couleur.

• Teinte : un degré sur la roue des couleurs de 0 à 360 (0 = rouge, 120 = vert, 240 = bleu)
• Saturation : 0% (gris, sans couleur) à 100% (pleinement vif)
• Luminosité : 0% (noir) à 100% (blanc), avec 50% étant la couleur « pure »

color: hsl(217, 91%, 60%);    /* Un bleu vif */
color: hsl(9, 100%, 60%);     /* Un rouge corail chaud */
color: hsl(80, 60%, 35%);     /* Vert olive */
color: hsl(0, 0%, 50%);       /* Gris moyen pur */

hsla() ajoute le canal alpha, identique au schéma rgb() / rgba() :

color: hsla(217, 91%, 60%, 0.5);  /* Bleu à 50% d'opacité */
color: hsl(217 91% 60% / 0.5);   /* Idem, avec la syntaxe moderne */

Pourquoi hsl() a transformé le développement web

Avant l'arrivée de hsl() dans CSS 2.1 (2011), modifier la luminosité ou la saturation d'une couleur en CSS nécessitait de revenir à un code hex ou à des valeurs RGB et de recalculer depuis le début. Avec hsl(), vous pouvez créer des variations cohérentes d'une couleur de façon triviale :

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Base */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Plus sombre au survol */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Encore plus sombre */
}

Le problème avec hsl()

Malgré son attrait intuitif, HSL présente un défaut fondamental : il n'est pas perceptuellement uniforme. Des pas numériques égaux en HSL ne produisent pas des couleurs qui semblent également différentes à l'œil humain.

Le symptôme le plus évident est le jaune. Un jaune HSL pur (hsl(60, 100%, 50%)) apparaît beaucoup plus lumineux et intense qu'un bleu HSL pur (hsl(240, 100%, 50%)), même si les deux ont les mêmes valeurs de saturation et de luminosité. Cela rend difficile la construction de gammes chromatiques où différentes teintes semblent visuellement équilibrées.

Pour cette raison, le travail moderne sur les couleurs CSS se dirige de plus en plus vers OKLCH.

lab() et lch()

CSS Color Level 4 a introduit lab() et lch() basés sur l'espace colorimétrique CIE L*a*b*, conçu par des scientifiques de la couleur pour être perceptuellement uniforme — des différences numériques égales correspondent à des différences perçues égales en couleur.

lab()

lab() utilise trois axes : - L : Luminosité de 0 (noir) à 100 (blanc) - a : Position sur l'axe vert-rouge (négatif = vert, positif = rouge) - b : Position sur l'axe bleu-jaune (négatif = bleu, positif = jaune)

color: lab(53 -5 -60);    /* Un bleu vif */
color: lab(55 60 40);     /* Un rouge-orange chaud */
color: lab(80 -15 20);    /* Olive/vert citron doux */

Les axes a et b sont moins intuitifs que les degrés de teinte, ce qui rend lab() un peu difficile à écrire à la main. C'est surtout utile de façon programmatique — par exemple, pour calculer des dégradés perceptuellement uniformes ou des ratios de contraste.

lch()

lch() est une réinterprétation cylindrique de Lab utilisant Luminosité, Chroma (similaire à la saturation) et Teinte :

color: lch(53 60 265);    /* Bleu vif (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Orange-rouge chaud */

La teinte dans lch() correspond approximativement (mais pas identiquement) à la teinte dans hsl(). La différence clé est que la luminosité et le chroma dans lch() sont perceptuellement significatifs — deux couleurs à lch(70 40 X) paraîtront également lumineuses quelle que soit leur teinte, ce qui n'est pas vrai dans hsl().

Quand utiliser lab() et lch()

Ces fonctions sont excellentes pour : - Générer des paires de couleurs accessibles où le contraste perçu est prévisible - Construire des palettes de visualisation de données où les couleurs semblent également pondérées - Créer des dégradés lisses et naturels

Elles ont été supplantées pour la plupart des nouveaux travaux par oklch(), qui est plus précise et bénéficie d'un meilleur support outillage.

oklch()

OKLCH est l'état de l'art actuel pour la spécification des couleurs CSS. Il est basé sur l'espace colorimétrique Oklab, développé par Björn Ottosson en 2020, qui améliore CIE Lab avec une meilleure uniformité perceptuelle — notamment pour les teintes bleues et violettes, que CIE Lab gère mal.

La fonction prend trois valeurs plus un alpha optionnel :

• L : Luminosité de 0 (noir) à 1 (blanc)
• C : Chroma (intensité de la couleur), généralement de 0 à 0,4
• H : Angle de teinte en degrés, de 0 à 360

color: oklch(0.62 0.19 250);    /* Bleu vif */
color: oklch(0.65 0.22 25);     /* Rouge-orange chaud */
color: oklch(0.85 0.08 130);    /* Vert doux */
color: oklch(0.62 0.19 250 / 0.5); /* Bleu à 50% d'opacité */

Pourquoi oklch() est important

Luminosité prévisible. Parce que la luminosité OKLCH est perceptuellement uniforme, deux couleurs avec la même valeur L paraissent également lumineuses, quelle que soit la teinte. Cela simplifie la construction de palettes chromatiques où chaque teinte semble équilibrée :

/* Tout cela semble également "de poids moyen" en OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

Essayez d'y parvenir avec hsl() — le jaune paraîtra visiblement plus lumineux que le bleu.

Accès à la gamme étendue. OKLCH peut exprimer des couleurs en dehors de la gamme sRGB, donnant accès aux couleurs vives disponibles sur les écrans modernes (iPhone, MacBook Pro, la plupart des laptops depuis 2023) qui prennent en charge Display P3 ou plus large. Les codes hex et rgb() sont limités au sRGB :

/* Ce vert vif n'est possible qu'avec oklch — hors de la gamme sRGB */
color: oklch(0.72 0.30 145);

Les navigateurs mappent automatiquement les couleurs OKLCH hors gamme vers la couleur disponible la plus proche pour les écrans qui ne peuvent pas les afficher, il est donc sûr d'utiliser dès maintenant des couleurs à gamme étendue.

Meilleure interpolation des dégradés. Les couleurs interpolées (animées ou dégradées) en OKLCH passent par des couleurs perceptuellement intermédiaires. Le tristement célèbre « milieu gris boueux » qui apparaît dans les dégradés RGB entre des couleurs complémentaires n'existe pas en OKLCH.

oklch() dans les systèmes de design

Un nombre croissant de systèmes de design et de frameworks CSS adoptent OKLCH pour leurs gammes de couleurs. Si vous construisez un système de design à partir de zéro en 2025 ou après, OKLCH est le point de départ recommandé. Utilisez le Convertisseur de couleurs pour traduire n'importe quel code hex existant en son équivalent OKLCH.

color-mix()

color-mix() est une fonction CSS plus récente qui mélange deux couleurs dans un espace colorimétrique spécifié et une proportion donnée :

/* Mélange bleu et rouge à parts égales en oklch */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Créer une teinte plus claire : mélange avec du blanc */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Créer une nuance plus sombre : mélange avec du noir */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

Le paramètre in oklch (ou in srgb, in hsl, etc.) spécifie l'espace colorimétrique utilisé pour le calcul du mélange, ce qui affecte significativement le résultat.

Pourquoi l'espace colorimétrique compte pour le mélange

Le mélange en sRGB produit souvent des points médians ternes et désaturés entre des couleurs complémentaires. Le mélange en OKLCH produit des couleurs intermédiaires perceptuellement vives — parce que l'interpolation OKLCH suit le même chemin que la perception humaine des couleurs.

/* Mélanger bleu et jaune en sRGB produit souvent un olive/gris terne */
color: color-mix(in srgb, blue, yellow);

/* Mélanger en oklch produit un vert intermédiaire vif */
color: color-mix(in oklch, blue, yellow);

Cas d'usage pratiques de color-mix()

Générer des variantes de thème. Plutôt que de coder en dur cinq variantes de nuances de votre couleur de marque, générez-les dynamiquement :

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Adaptation au mode sombre. Dérivez automatiquement les couleurs de surface en mode sombre en mélangeant avec une base sombre :

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

Opacité sans transparence réelle. Mélanger une couleur avec du blanc ou une couleur de fond spécifique simule l'opacité sans composer des couches :

/* Simule rgba(59, 130, 246, 0.2) sur fond blanc */
color: color-mix(in srgb, #3B82F6 20%, white);

Support navigateur en 2026

Début 2026, oklch() et color-mix() sont supportés par tous les navigateurs actuels majeurs. La principale préoccupation concerne les utilisateurs sur d'anciens navigateurs mobiles ou dans des environnements d'entreprise avec des politiques de navigateurs obsolètes. Pour les travaux en production où la compatibilité maximale est importante, fournissez un fallback hex ou rgb() avant la syntaxe moderne :

.element {
  /* Fallback pour les anciens navigateurs */
  color: #3B82F6;
  /* Amélioration progressive */
  color: oklch(0.62 0.19 250);
}

Choisir la bonne fonction de couleur CSS

Points clés à retenir

• rgb() et hsl() sont les standards établis avec un support navigateur universel. La syntaxe moderne séparée par des espaces (rgb(R G B / alpha)) rend rgba() et hsla() redondants.
• hsl() est plus intuitif que rgb() pour le travail de design, mais il n'est pas perceptuellement uniforme — des pas numériques égaux produisent des changements perceptuels inégaux, notamment selon les teintes.
• lab() et lch() ont introduit l'uniformité perceptuelle dans CSS, mais ont été largement supplantés par oklch(), plus précis.
• oklch() est le standard moderne : perceptuellement uniforme, compatible avec la gamme étendue, et excellent pour les dégradés, les animations et les gammes de couleurs des systèmes de design.
• color-mix() permet la génération dynamique de couleurs directement en CSS — utile pour les thèmes, les teintes, les nuances et l'adaptation au mode sombre.
• Utilisez le Convertisseur de couleurs pour traduire n'importe quel code hex existant vers oklch() ou tout autre format.
• Fournissez des valeurs hex ou rgb() de fallback avant oklch() ou color-mix() pour une compatibilité navigateur maximale.