🎨
← Retour aux guides

Fonctions de couleur CSS modernes : rgba(), hsl(), oklch() et au-delà

· Tags: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Fonctions de couleur CSS modernes : rgba(), hsl(), oklch() et au-delà

Les fonctions de couleur CSS ont considérablement évolué. Ce qui n'était autrefois qu'un choix entre l'hexadécimal, rgb() et hsl() est aujourd'hui un riche écosystème d'espaces colorimétriques et de fonctions de manipulation qui donnent aux développeurs un contrôle sans précédent sur la représentation, l'interpolation et l'accessibilité des couleurs.

Ce guide couvre toutes les principales fonctions de couleur CSS disponibles en 2026, des plus familières aux plus novatrices.

RGB et RGBA : les chevaux de trait

La fonction rgb() définit des couleurs à l'aide du modèle de couleur additive rouge-vert-bleu. Elle fait partie du CSS depuis CSS1 et est prise en charge par tous les navigateurs jamais créés.

/* Syntaxe héritée à virgules */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Syntaxe moderne séparée par des espaces (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Valeurs en pourcentage */
color: rgb(100% 0% 0%);

Changements clés du RGB moderne

CSS Color Level 4 a introduit deux améliorations importantes :

  1. Séparé par des espaces au lieu de virgules — La fonction rgb() accepte désormais des valeurs séparées par des espaces ou des barres obliques
  2. Syntaxe alpha unifiée — L'alias rgba() est déprécié (mais toujours pris en charge). rgb() accepte désormais nativement un canal alpha

Cette syntaxe moderne est prise en charge par tous les navigateurs publiés depuis 2020. Pour les nouveaux projets, utilisez la syntaxe moderne et omettez entièrement l'alias rgba().

Canaux RGB

Chaque canal RGB accepte :

  • Un entier de 0 à 255
  • Un pourcentage de 0 % à 100 %
  • Le mot-clé none pour les canaux manquants (CSS Color Level 4)

Le mot-clé none est utile lors de l'interpolation des couleurs — il indique au navigateur de ne pas interpoler ce canal spécifique.

HSL et HSLA : contrôle intuitif des couleurs

HSL signifie Teinte (Hue), Saturation, Luminosité (Lightness). Il utilise un système de coordonnées cylindriques qui correspond naturellement à la façon dont les humains pensent la couleur.

/* H est l'angle de teinte (0-360), S est la saturation (0-100 %), L est la luminosité (0-100 %) */
color: hsl(0 100% 50%);        /* Rouge pur */
color: hsl(0 100% 50% / 0.5);  /* Rouge à 50 % d'opacité */

/* Angles de teinte avec unités */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Référence des angles de teinte

| Teinte | Couleur | Hex | |-----|---------|----------| | 0 | Rouge | #FF0000 | | 30 | Orange | #FF8000 | | 60 | Jaune | #FFFF00 | | 120 | Vert | #00FF00 | | 180 | Cyan | #00FFFF | | 240 | Bleu | #0000FF | | 300 | Magenta | #FF00FF |

Le HSL est le meilleur choix pour générer des palettes de couleurs par programmation car modifier uniquement le canal de luminosité ou de saturation crée des variantes visuelles cohérentes.

HWB : mélanger avec le blanc et le noir

Le HWB (Teinte, Blancheur, Noirceur) est une alternative plus intuitive au HSL. Vous choisissez une teinte, puis ajoutez de la blancheur et de la noirceur pour créer des teintes et des nuances.

color: hwb(0 0% 0%);    /* Rouge pur */
color: hwb(0 40% 0%);   /* Rouge teinté (blanc ajouté) */
color: hwb(0 0% 40%);   /* Rouge ombré (noir ajouté) */
color: hwb(0 20% 20%);  /* Ton (blanc + noir) */

Le HWB est plus simple que le HSL pour un cas d'usage spécifique : créer des variantes de teinte et de nuance d'une couleur de marque. Vous n'avez jamais besoin de réfléchir aux courbes de saturation — ajoutez simplement du blanc ou du noir.

Prise en charge des navigateurs : le HWB est pris en charge par tous les navigateurs modernes (Chrome 101+, Firefox 96+, Safari 15+).

LAB et LCH : espaces perceptivement uniformes

Le LAB (Luminosité, axe A, axe B) et le LCH (Luminosité, Chroma, Teinte) sont des espaces colorimétriques perceptivement uniformes. Cela signifie que la distance euclidienne entre deux valeurs de couleur correspond à la différence visuelle perçue — ce que le RGB et le HSL ne peuvent pas faire.

color: lab(50% 50 0);        /* Rouge moyen */
color: lch(50% 50 0);        /* Même couleur sous forme cylindrique */

Pourquoi l'uniformité perceptive compte :

  • Dégradés — Interpoler en LAB ou LCH produit des transitions douces et naturelles sans la « zone boueuse » terne que créent les dégradés RGB
  • Mesure de la différence de couleur — Le Delta E (la mesure de la différence perceptive) est significatif dans l'espace LAB
  • Accessibilité — L'uniformité perceptive aide à prédire comment les couleurs seront perçues par les utilisateurs ayant des déficiences de la vision des couleurs

Limites : le LAB et le LCH peuvent produire des couleurs hors de la gamme sRGB. Ces couleurs seront tronquées lorsqu'elles seront affichées sur des écrans sRGB mais sont accessibles sur les écrans à plus large gamme (DCI-P3, Rec. 2020).

Prise en charge des navigateurs : pris en charge dans Chrome 111+, Firefox 113+, Safari 15+. Pas de prise en charge IE ou Edge hérité.

OKLAB et OKLCH : norme perceptive moderne

L'OKLCH est une version améliorée du LCH développée par Bjorn Ottosson. Elle corrige les non-uniformités perceptives du LCH, en particulier pour les teintes bleues. L'OKLCH est devenu l'espace colorimétrique par défaut recommandé pour les nouveaux projets CSS en 2025-2026.

color: oklch(60% 0.2 30);
/* Luminosité : 0-100 %, Chroma : 0-~0,4, Teinte : 0-360 */

Pourquoi l'OKLCH est le meilleur espace colorimétrique pour le CSS

  1. Meilleure uniformité perceptive — Des changements numériques égaux produisent des changements visuels égaux sur toutes les teintes
  2. Luminosité prévisible — Les couleurs ayant la même valeur de luminosité semblent vraiment aussi brillantes
  3. Pas de dégradés boueux — L'interpolation reste propre sur toute la plage de teintes
  4. Sûr sRGB par défaut — La plupart des valeurs OKLCH produisent des couleurs sRGB dans la gamme
  5. Canaux intuitifs — Comme le HSL mais avec une véritable précision perceptive

OKLCH en pratique

/* Créer une échelle de couleurs équilibrée avec l'OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Remarquez que chaque palier change d'environ la même valeur de luminosité (20 points de pourcentage). Parce que l'OKLCH est perceptivement uniforme, ces paliers paraissent uniformément espacés à l'œil humain — ce qui est difficile à obtenir avec le HSL.

Prise en charge des navigateurs : l'OKLCH est pris en charge dans Chrome 111+, Firefox 113+, Safari 15.4+. Il est rapidement devenu l'espace colorimétrique moderne le plus recommandé.

Color-Mix : mélanger les couleurs en CSS

La fonction color-mix() mélange deux couleurs dans un espace colorimétrique spécifié :

/* Mélanger le rouge et le bleu à parts égales en sRGB */
color: color-mix(in srgb, red, blue);

/* 30 % de primaire, 70 % de blanc — une teinte */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mélanger avec un espace de couleur perçu pour des résultats fluides */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Le paramètre in <color-space> vous permet de contrôler l'espace d'interpolation. Dans la plupart des cas, in oklch produit les meilleurs résultats visuels.

Cas d'usage :

  • Créer des teintes et des nuances sans fonctions de préprocesseur
  • Construire des variantes de composants à partir d'un seul jeton de couleur
  • Générer dynamiquement des états de survol et d'activation
  • Créer des effets de type dégradé dans une seule fonction

Syntaxe de couleur relative : modifier des couleurs existantes

CSS Color Level 4 vous permet de dériver de nouvelles couleurs à partir de couleurs existantes en modifiant des canaux individuels :

--primary: #3366cc;

/* Utilisation des canaux OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Utilisation des canaux HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Le mot-clé from <color> décompose les canaux de la couleur source dans les canaux de la fonction de destination, que vous pouvez ensuite ajuster avec de l'arithmétique.

Mots-clés de canaux par espace colorimétrique

Chaque espace colorimétrique expose des mots-clés de canaux spécifiques :

| Espace colorimétrique | Mots-clés | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Aperçu de la prise en charge des navigateurs (2026)

| Fonction | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Tous | Tous | Tous | Tous | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Syntaxe de couleur relative | 111+ | 113+ | 16.2+ | 111+ |

Toutes les fonctions de couleur modernes peuvent être utilisées en toute sécurité en 2026 pour les projets ne nécessitant pas la prise en charge d'Internet Explorer. Pour une compatibilité plus large, utilisez une étape de construction qui convertit la syntaxe moderne en hexadécimal ou en rgb() hérité.

Recommandations pratiques

  • Pour les projets existants — Le HSL reste le meilleur équilibre entre lisibilité et capacité
  • Pour les nouveaux projets — Utilisez l'OKLCH comme espace colorimétrique principal pour sa précision perceptive
  • Pour les dégradés — Interpolez toujours en OKLCH pour éviter les transitions boueuses
  • Pour les systèmes de conception — Stockez les couleurs de base en OKLCH, générez des variantes avec color-mix() ou la syntaxe relative
  • Pour canvas/WebGL — Restez avec le RGB, qui est natif au pipeline de rendu

Conclusion

Les fonctions de couleur CSS modernes ont transformé ce que vous pouvez faire avec la couleur sur le web. L'OKLCH offre une uniformité perceptive qui rend la conception de systèmes de couleurs prévisible. color-mix() et la syntaxe de couleur relative éliminent le besoin de fonctions de couleur de préprocesseur. Ensemble, ces outils donnent aux développeurs web la même puissance de couleur que les outils de conception offrent depuis des années — désormais directement dans le navigateur.

Utilisez notre convertisseur de couleurs en ligne gratuit pour convertir entre tous les formats de couleur CSS modernes, y compris l'OKLCH, le LAB, le HWB et les classiques HEX/RGB/HSL.