T
css colors oklch color-mix design

Guide des couleurs CSS modernes : OKLCH, color-mix() et l'avenir du design web

Explorez la prochaine génération de couleurs CSS. Un guide complet sur OKLCH, color-mix(), LCH et la syntaxe de couleur relative.

2026-04-12

Guide des couleurs CSS modernes : OKLCH, color-mix() et l'avenir du design web

Les couleurs sont l'âme du design web, mais pendant des décennies, nous avons été piégés par les limites du sRGB et des espaces colorimétriques non perceptuels comme le RGB et le HSL. Le CSS moderne a brisé ces frontières, introduisant une nouvelle ère de systèmes de couleurs haute définition, perceptuellement uniformes et dynamiques.

Dans ce guide, nous explorerons les fonctions et caractéristiques colorimétriques révolutionnaires qui changent la façon dont nous définissons et manipulons les couleurs en CSS.

2. Manipulation dynamique avec color-mix()

L'un des nouveaux ajouts les plus puissants au CSS est la fonction color-mix(). Elle vous permet de mélanger deux couleurs directement dans votre feuille de style, éliminant ainsi le besoin de calculs Sass complexes ou de JavaScript.

Syntaxe : color-mix(in [espace-colorimétrique], [couleur1] [pourcentage], [couleur2] [pourcentage])

Exemple : Création d'un état de survol instantané

.button {
  background: var(--primary-color);
}

.button:hover {
  /* Mélanger 20 % de blanc dans la couleur primaire */
  background: color-mix(in oklch, var(--primary-color), white 20%);
}

Le mélange dans les espaces oklch ou oklab donne généralement des résultats beaucoup plus naturels que le mélange en RGB.

3. Maîtriser le LCH et le LAB

Bien que l'OKLCH soit généralement préféré pour son intuitivité, le LCH et le LAB en sont les fondements.

  • LAB : Utilise un système de coordonnées (L pour la luminosité, a pour l'axe vert-rouge, b pour l'axe bleu-jaune).
  • LCH : La version en coordonnées polaires du LAB (Luminosité, Chroma, Teinte).

Ces espaces sont indépendants des appareils et peuvent représenter toutes les couleurs visibles par l'homme. C'est la façon « native » dont les navigateurs modernes gèrent la couleur en interne.

4. La fonction color() et le Display-P3

La fonction color() est un moyen générique d'accéder à des espaces colorimétriques spécifiques, tels que display-p3, a98-rgb ou prophoto-rgb.

/* Accès à l'espace P3 à large gamme */
.p3-green {
  color: color(display-p3 0 1 0); /* Le vert P3 le plus pur */
}

Si un appareil ne prend pas en charge l'espace spécifié, le CSS se rabattra automatiquement sur l'équivalent sRGB le plus proche.

5. S'adapter aux thèmes avec light-dark()

Alors que le mode sombre devient une exigence standard, la fonction light-dark() simplifie le changement de thème. Elle choisit automatiquement la première valeur pour le mode clair et la seconde pour le mode sombre, en fonction des préférences système de l'utilisateur.

body {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #efefef);
}

6. Syntaxe de couleur relative (RCS)

La syntaxe de couleur relative (Relative Color Syntax) est peut-être la fonctionnalité de couleur la plus avancée. Elle vous permet de « déstructurer » une couleur existante, de modifier l'un de ses composants et de créer une nouvelle couleur, le tout en une seule ligne.

/* Prendre une couleur existante et modifier son opacité ou sa luminosité */
.card {
  --base-color: #3498db;
  background: oklch(from var(--base-color) 80% c h); /* Augmenter la luminosité à 80 % */
  border-color: oklch(from var(--base-color) l c h / 0.5); /* Garder la couleur, ajouter 50 % d'opacité */
}

Résumé des fonctions de couleur CSS modernes

Fonction Idéal pour Support
oklch() Design perceptuellement uniforme, palettes accessibles Navigateurs modernes
color-mix() Mélange de couleurs (états de survol, superpositions) Navigateurs modernes
light-dark() Prise en charge facile du mode sombre Nouveau (vérifier le support)
RCS Dérivation de couleurs à partir de variables Émergent

Conclusion

Le CSS moderne a transformé la couleur d'une valeur statique en un système dynamique et programmable. En tirant parti de l'OKLCH pour la précision et du color-mix() pour la flexibilité, vous pouvez créer des expériences web qui sont non seulement plus belles, mais aussi plus accessibles et performantes.

Prêt à améliorer votre design ? Commencez à expérimenter avec notre Convertisseur de couleur et restez à l'écoute pour notre prochain Sélecteur de couleurs OKLCH et notre Générateur de mélange de couleurs CSS !

Retour au blog