Guide des fonctions de couleur CSS modernes : OKLCH, color-mix() et plus
La façon dont nous définissons les couleurs sur le web subit une transformation massive. Pendant des décennies, les développeurs se sont appuyés sur les codes rgb() et hex, puis ont adopté hsl() pour une meilleure lisibilité humaine. Cependant, à mesure que la technologie des écrans évolue (avec le HDR et les écrans Wide Gamut) et que l'accessibilité devient une exigence fondamentale, ces anciens modèles montrent leurs limites.
Voici la nouvelle génération de fonctions de couleur CSS : OKLCH, color-mix() et la syntaxe de couleur relative (Relative Color Syntax). Ces outils ne sont pas seulement de "nouvelles façons de faire d'anciennes choses" — ils résolvent des problèmes fondamentaux de la théorie des couleurs et de l'accessibilité web.
1. Pourquoi OKLCH est le nouveau standard
Si vous avez déjà essayé de créer une palette de couleurs cohérente avec HSL, vous avez peut-être remarqué un problème : différentes teintes avec la même valeur de luminosité (lightness) ne semblent pas aussi brillantes les unes que les autres. Par exemple, un "bleu pur" et un "jaune pur" à 50 % de luminosité paraissent très différents pour l'œil humain.
L'uniformité perceptuelle d'OKLCH
OKLCH signifie :
- O : Oklab (l'espace colorimétrique sur lequel il est basé)
- L : Lightness (luminosité perceptuelle)
- C : Chroma (intensité ou "quantité" de couleur)
- H : Hue (teinte, l'angle sur la roue chromatique)
Le "K" dans OKLCH fait référence à l'uniformité perceptuelle (Perceptual Uniformity). Cela signifie que si vous gardez la luminosité (L) identique et que vous changez la teinte (H), la couleur semblera avoir la même luminosité pour l'œil humain.
Exemple de code :
.button-primary {
/* Un bleu magnifique et perceptuellement équilibré */
background-color: oklch(60% 0.15 250);
}
.button-secondary {
/* Changement de teinte tout en conservant exactement la même luminosité perceptuelle */
background-color: oklch(60% 0.15 20);
}
Avantages d'OKLCH :
- Support du gamut P3 : Accès à 50 % de couleurs en plus que le sRGB standard (RGB/HEX).
- Systèmes de design facilités : Créez des thèmes accessibles en ajustant simplement la valeur de luminosité.
- Pas d'effet "gris" : Les couleurs restent vibrantes lorsqu'elles sont ajustées, contrairement au HSL.
2. Mélanger les couleurs dynamiquement avec color-mix()
La fonction color-mix() vous permet de mélanger deux couleurs directement en CSS, ce qui nécessitait auparavant un préprocesseur comme Sass ou une bibliothèque JavaScript.
Syntaxe :
color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)
Cas d'utilisation pratique : États au survol (hover)
:root {
--brand-color: #3b82f6;
}
.btn:hover {
/* Mélange la couleur de la marque avec 20 % de blanc pour une teinte parfaite */
background-color: color-mix(in oklab, var(--brand-color), white 20%);
}
Le mélange des couleurs dans l'espace oklab produit généralement les résultats les plus naturels, en évitant les couleurs "ternes" souvent observées lors des mélanges RGB.
3. Syntaxe de couleur relative : l'avenir de la manipulation des couleurs
La syntaxe de couleur relative (Relative Color Syntax - RCS) est peut-être l'ajout le plus puissant aux couleurs CSS. Elle vous permet de prendre une couleur existante, de la décomposer, de modifier ses composants et de la recomposer.
Exemple de syntaxe :
.alert {
--base-color: blue;
/* Prends le 'blue', garde la teinte et le chroma, mais règle la luminosité à 90 % */
background-color: oklch(from var(--base-color) 0.9 c h);
/* Définit un canal alpha relatif à l'original */
color: oklch(from var(--base-color) l c h / 0.8);
}
Cela fait de chaque variable de couleur CSS une "usine" pour ses propres variantes (teintes, nuances, versions transparentes) sans avoir besoin de dizaines de variables séparées.
4. Couleurs à large gamut (Display-P3)
La plupart des smartphones et ordinateurs portables modernes (comme les MacBook et les Android haut de gamme) prennent en charge les écrans Wide Gamut. Les couleurs CSS traditionnelles sont limitées à l'espace sRGB, ce qui signifie qu'elles ne peuvent pas afficher les verts, rouges et oranges les plus vibrants dont ces écrans sont capables.
En utilisant la fonction color() avec display-p3, vous pouvez débloquer ces couleurs "HD".
.neon-green {
/* Ce vert est impossible à représenter en HEX/RGB standard */
color: color(display-p3 0 1 0);
}
5. Un meilleur mode sombre avec light-dark()
La nouvelle fonction light-dark() simplifie l'implémentation des thèmes en choisissant automatiquement la bonne valeur en fonction des préférences système de l'utilisateur.
body {
/* Plus besoin de blocs @media (prefers-color-scheme) complexes pour des couleurs simples */
background-color: light-dark(#ffffff, #1a1a1a);
color: light-dark(#333333, #efefef);
}
FAQ : Questions fréquemment posées
Q : Pourquoi devrais-je utiliser OKLCH au lieu de HSL ?
R : Le HSL n'est pas perceptuellement uniforme. Si vous changez la teinte en HSL tout en gardant la luminosité à 50 %, la brillance semblera fluctuer considérablement. OKLCH corrige cela, ce qui facilite grandement la création de systèmes de design accessibles et de composants d'interface cohérents.
Q : OKLCH est-il supporté par tous les navigateurs ?
R : Depuis 2024, OKLCH, color-mix() et la syntaxe de couleur relative sont supportés par tous les principaux navigateurs modernes (Chrome, Firefox, Safari, Edge). Pour les anciens navigateurs, vous devriez fournir une alternative en HEX.
Q : Quel est le meilleur espace colorimétrique pour le mélange ?
R : Pour la plupart des tâches d'interface utilisateur, oklab ou oklch sont les meilleurs espaces d'interpolation pour color-mix(). Ils évitent la "zone morte grise" au milieu d'un dégradé ou d'un mélange qui se produit souvent en sRGB.
Prêt à expérimenter ?
Le CSS moderne rend les outils de conception plus puissants et le code plus facile à maintenir. Essayez d'utiliser notre Convertisseur de couleur pour voir à quoi ressemblent vos couleurs de marque dans différents formats.
Note : Nous travaillons actuellement sur un sélecteur de couleurs OKLCH dédié et un générateur de syntaxe de couleur relative. Restez à l'écoute !