Syntaxe des couleurs relatives CSS : transformer n'importe quelle couleur dynamiquement

CSS a longtemps été capable de stocker des couleurs, mais les manipuler nécessitait du JavaScript, des fonctions Sass ou une étape de compilation. La syntaxe des couleurs relatives CSS change tout cela. Elle vous permet de prendre une couleur existante — d'une variable, d'un mot-clé ou de n'importe quelle valeur de couleur — et de transformer des canaux spécifiques directement dans votre feuille de style. Vous pouvez l'éclaircir, décaler sa teinte, réduire son chroma, ou ajuster sa transparence, tout en CSS pur, au moment de l'exécution.

Cette fonctionnalité est arrivée dans Chrome 119, Firefox 128 et Safari 16.4, lui donnant une pénétration navigateur suffisante pour une utilisation en production en 2026. Elle fonctionne avec chaque fonction de couleur CSS moderne : rgb(), hsl(), oklch(), lab(), lch(), et d'autres.

Qu'est-ce que la syntaxe des couleurs relatives ?

La syntaxe des couleurs relatives étend toute fonction de couleur CSS avec une clause from <color> au début. Elle indique au navigateur de décomposer la couleur d'origine en ses canaux, puis de recomposer une nouvelle couleur en utilisant ces canaux — éventuellement avec des modifications.

L'exemple le plus basique utilise le mot-clé from pour passer une couleur sans modification :

/* C'est une opération sans effet — produit la même couleur que l'entrée */
color: oklch(from #3B82F6 l c h);

Pas très utile en soi, mais le vrai pouvoir vient quand vous modifiez les valeurs de canaux extraites :

/* Éclaircir en augmentant L (luminosité) */
color: oklch(from #3B82F6 calc(l + 0.15) c h);

/* Décaler la teinte de 30 degrés */
color: oklch(from #3B82F6 l c calc(h + 30));

/* Désaturer en réduisant le chroma */
color: oklch(from #3B82F6 l calc(c * 0.5) h);

/* Rendre semi-transparent */
color: oklch(from #3B82F6 l c h / 0.5);

Chacune de ces transformations modifie un seul canal tout en maintenant les autres intacts — quelque chose qui était auparavant impossible en CSS pur sans préprocesseur.

Le mot-clé from

Le mot-clé from est le cœur syntaxique de la syntaxe des couleurs relatives. Il apparaît immédiatement après la parenthèse ouvrante de la fonction de couleur et avant les valeurs de canaux :

color-function(from <origin-color> <channel1> <channel2> <channel3> [/ <alpha>])

<origin-color> peut être n'importe quelle valeur de couleur CSS valide :

/* Depuis un code hex */
oklch(from #FF5733 l c h)

/* Depuis une couleur nommée */
oklch(from tomato l c h)

/* Depuis une propriété personnalisée CSS */
oklch(from var(--brand-color) l c h)

/* Depuis une autre fonction de couleur */
oklch(from rgb(59, 130, 246) l c h)

/* Depuis currentColor */
oklch(from currentColor l c h)

La variante from currentColor est particulièrement puissante — elle permet à un composant de transformer la couleur de texte héritée sans connaître sa valeur exacte.

Noms de canaux par fonction de couleur

Chaque fonction de couleur expose ses canaux sous des noms spécifiques après le mot-clé from :

Notez qu'en hsl(), l'ordre des canaux dans la décomposition from reflète la signature de la fonction : h, s, l. En oklch(), c'est l, c, h. Vérifiez toujours l'ordre des canaux pour la fonction que vous utilisez.

Conversion entre fonctions

La couleur d'origine n'a pas besoin de correspondre à la fonction de sortie. Le navigateur convertit automatiquement :

/* L'entrée est en hex, la sortie est en oklch — le navigateur convertit d'abord, puis décompose */
oklch(from #FF5733 calc(l + 0.1) c h)

/* L'entrée est en hsl, la sortie est en rgb */
rgb(from hsl(200, 80%, 50%) calc(r * 0.9) g b)

Cette conversion inter-fonctions signifie que vous pouvez stocker vos tokens de design dans n'importe quel format et produire des sorties dans n'importe quel format que vous préférez pour la manipulation.

Ajuster des canaux individuels

Les opérations les plus courantes sur les couleurs relatives impliquent calc() pour modifier les valeurs de canaux extraites.

Ajustements de luminosité (OKLCH)

Avec OKLCH, le canal l va de 0 (noir) à 1 (blanc). Ajouter ou soustraire une valeur fixe produit un résultat prévisiblement plus clair ou plus sombre, car la luminosité OKLCH est perceptuellement uniforme :

:root {
  --base: oklch(0.58 0.20 250);
}

.lighter  { color: oklch(from var(--base) calc(l + 0.15) c h); }
.lightest { color: oklch(from var(--base) calc(l + 0.30) c h); }
.darker   { color: oklch(from var(--base) calc(l - 0.15) c h); }
.darkest  { color: oklch(from var(--base) calc(l - 0.30) c h); }

Comme la luminosité OKLCH est calibrée perceptuellement, ajouter 0,15 à l produit un saut de luminosité perçue de taille égale quelle que soit la teinte de la couleur — contrairement à HSL, où le même incrément semble différent selon que la couleur est jaune ou bleue.

Ajustements de chroma

Le canal c contrôle l'intensité de la couleur. Le mettre à 0 produit un gris neutre à la même luminosité. Le réduire désature sans dégriser complètement :

/* Variante atténuée — 50% moins de chroma */
color: oklch(from var(--brand) l calc(c * 0.5) h);

/* Gris entièrement désaturé à la même luminosité */
color: oklch(from var(--brand) l 0 h);

/* Plus vif — 30% plus de chroma (peut sortir de la gamme sRGB sur certaines teintes) */
color: oklch(from var(--brand) l calc(c * 1.3) h);

Décalages de teinte

Le canal h est une valeur en degrés de 0 à 360. Ajouter ou soustraire déplace la teinte autour de la roue des couleurs :

/* Couleur complémentaire — côté opposé de la roue */
color: oklch(from var(--brand) l c calc(h + 180));

/* Analogue +30° */
color: oklch(from var(--brand) l c calc(h + 30));

/* Analogue -30° */
color: oklch(from var(--brand) l c calc(h - 30));

Combiner plusieurs ajustements de canaux crée des transformations complexes en une seule déclaration :

/* Plus clair, plus atténué, et légèrement différente teinte — une variante tonale */
color: oklch(from var(--brand) calc(l + 0.12) calc(c * 0.6) calc(h + 15));

Canal alpha

Utilisez la syntaxe barre oblique pour modifier la transparence :

/* Version à 50% d'opacité de la couleur de marque */
background: oklch(from var(--brand) l c h / 0.5);

/* Version entièrement opaque d'une couleur qui peut avoir de la transparence */
color: oklch(from var(--text-muted) l c h / 1);

/* Mettre à l'échelle l'alpha existant — si l'origine est à 0,8 d'opacité, réduire à ~0,4 */
background: oklch(from var(--overlay) l c h / calc(alpha * 0.5));

Créer des teintes et nuances en CSS pur

L'approche traditionnelle des gammes de couleurs nécessite de précalculer chaque nuance et de la stocker comme variable. Avec la syntaxe des couleurs relatives, vous pouvez générer une gamme entière à partir d'une seule variable de base :

:root {
  --primary: oklch(0.58 0.20 250);

  /* Gamme — aucun précalcul nécessaire */
  --primary-50:  oklch(from var(--primary) 0.97 calc(c * 0.1) h);
  --primary-100: oklch(from var(--primary) 0.94 calc(c * 0.2) h);
  --primary-200: oklch(from var(--primary) 0.88 calc(c * 0.4) h);
  --primary-300: oklch(from var(--primary) 0.78 calc(c * 0.6) h);
  --primary-400: oklch(from var(--primary) 0.68 calc(c * 0.8) h);
  --primary-500: var(--primary);
  --primary-600: oklch(from var(--primary) calc(l - 0.08) c h);
  --primary-700: oklch(from var(--primary) calc(l - 0.16) c h);
  --primary-800: oklch(from var(--primary) calc(l - 0.24) c h);
  --primary-900: oklch(from var(--primary) calc(l - 0.32) c h);
  --primary-950: oklch(from var(--primary) calc(l - 0.38) c h);
}

Changez --primary pour n'importe quelle couleur et la gamme entière en 11 étapes se régénère automatiquement dans le navigateur. Aucune étape de compilation, aucun JavaScript, aucun Sass.

Pour les systèmes de design en production nécessitant des pas perceptuels très précis, le Générateur de nuances fournit des gammes de 50 à 950 finement réglées à la main. L'approche par couleurs relatives est idéale pour les composants à plus petite échelle ou pour le prototypage rapide où la précision exacte importe moins que la flexibilité.

Teintes accessibles pour les fonds

Un schéma courant est la création de fonds très légèrement teintés pour les bannières de notification et les boîtes d'alerte :

:root {
  --success: oklch(0.65 0.20 145);  /* Un vert vif */
  --warning: oklch(0.75 0.18 70);   /* Un ambre chaud */
  --danger:  oklch(0.62 0.24 25);   /* Un rouge fort */
}

.alert-success {
  background: oklch(from var(--success) 0.96 0.04 h);
  border-left: 3px solid var(--success);
  color: oklch(from var(--success) 0.30 0.14 h);
}

.alert-warning {
  background: oklch(from var(--warning) 0.97 0.04 h);
  border-left: 3px solid var(--warning);
  color: oklch(from var(--warning) 0.35 0.14 h);
}

.alert-danger {
  background: oklch(from var(--danger) 0.96 0.04 h);
  border-left: 3px solid var(--danger);
  color: oklch(from var(--danger) 0.32 0.14 h);
}

Le fond est une version à très haute luminosité et faible chroma de la couleur d'alerte. Le texte utilise une version très sombre et modérément saturée. La teinte (h) est préservée de la couleur d'origine dans tous les cas — tout reste sur la même teinte automatiquement.

Exemples concrets avec OKLCH

États hover adaptatifs au thème

.card {
  --card-accent: oklch(0.60 0.18 260);
  background: var(--card-accent);
  transition: background-color 150ms ease;
}

.card:hover {
  /* Assombrir légèrement au survol — fonctionne quelle que soit l'accentuation */
  background: oklch(from var(--card-accent) calc(l - 0.06) c h);
}

Ce schéma est particulièrement puissant dans les bibliothèques de composants où la couleur d'accentuation est passée en tant que prop ou propriété personnalisée. L'état hover est toujours contextuellement approprié sans nécessiter de couleurs hover séparées pour chaque variante.

Texte sur fonds colorés

.chip {
  --chip-color: oklch(0.62 0.20 260);

  /* Fond : teinte très claire */
  background: oklch(from var(--chip-color) 0.94 0.06 h);

  /* Texte : version très sombre de la même teinte */
  color: oklch(from var(--chip-color) 0.28 0.16 h);

  /* Bordure : version légèrement claire */
  border: 1px solid oklch(from var(--chip-color) 0.78 0.12 h);
}

Cela produit une puce colorée où le fond, le texte et la bordure sont tous harmonieux car ils partagent la même teinte. Changez --chip-color et l'ensemble se met à jour.

Adaptation au mode sombre avec from currentColor

.icon-wrapper {
  /* La couleur de l'icône hérite du contexte textuel */
  color: var(--color-text-primary);
}

.icon-wrapper:hover {
  /* Version légèrement plus sombre de quelle que soit la couleur actuelle de l'icône */
  color: oklch(from currentColor calc(l - 0.08) c h);
}

.icon-wrapper .background-glow {
  /* Version semi-transparente de la couleur de l'icône, pour un effet de lueur */
  background: oklch(from currentColor l c h / 0.15);
}

L'origine currentColor signifie que ce composant fonctionne correctement dans n'importe quel contexte de couleur de texte, y compris le mode sombre, sans avoir besoin de connaître la valeur de couleur spécifique.

Générer une accentuation complémentaire

Pour les designs qui ont besoin d'une couleur d'accentuation complémentaire dérivée de la couleur de marque principale :

:root {
  --brand: oklch(0.60 0.20 250);   /* Bleu */

  /* Complément : teinte opposée, même luminosité et chroma */
  --accent: oklch(from var(--brand) l c calc(h + 180));
  /* Résultat : approximativement orange à la teinte ~70° */

  /* Complément plus doux pour les fonds */
  --accent-bg: oklch(from var(--brand) 0.95 0.06 calc(h + 180));
}

Cela produit une couleur mathématiquement complémentaire. Pour un schéma complémentaire divisé plus sophistiqué, décalez de ±150° ou ±160° plutôt que de 180°.

Support navigateur et fallbacks

La syntaxe des couleurs relatives est supportée dans :

• Chrome/Edge : depuis la version 119 (novembre 2023)
• Firefox : depuis la version 128 (juillet 2024)
• Safari : depuis la version 16.4 (mars 2023) — Safari a été le premier

Le support mondial est d'environ 85 à 88% début 2026. Pour une couverture plus large, fournissez des fallbacks :

.btn-hover {
  /* Fallback : hex précalculé pour les anciens navigateurs */
  background-color: #1D4ED8;
}

@supports (color: oklch(from red l c h)) {
  .btn-hover {
    /* Moderne : dérivé dynamiquement depuis la base */
    background-color: oklch(from var(--btn-bg) calc(l - 0.08) c h);
  }
}

Le test @supports (color: oklch(from red l c h)) vérifie spécifiquement le support de la syntaxe des couleurs relatives, pas seulement le support OKLCH, ce qui est important car OKLCH et la syntaxe des couleurs relatives ont été livrés dans des versions différentes de navigateurs.

Points clés à retenir

• La syntaxe des couleurs relatives utilise from <origin-color> à l'intérieur de n'importe quelle fonction de couleur CSS pour décomposer cette couleur en ses canaux, qui peuvent ensuite être modifiés avec calc() et recomposés en une nouvelle couleur.
• OKLCH est la meilleure fonction à utiliser pour la manipulation des couleurs relatives car ses canaux (luminosité, chroma, teinte) correspondent étroitement à l'intention du design, et la luminosité est perceptuellement uniforme — des incréments égaux produisent des changements d'apparence égaux.
• Vous pouvez ajuster n'importe quel canal indépendamment : ajouter à l pour éclaircir, multiplier c pour désaturer, ajouter à h pour décaler la teinte, ou modifier alpha pour changer la transparence.
• L'origine from currentColor crée des composants auto-adaptatifs qui dérivent leurs couleurs de la couleur de texte héritée, les rendant automatiquement corrects dans n'importe quel contexte, y compris le mode sombre.
• Le support navigateur couvre tous les navigateurs modernes depuis fin 2023 / mi-2024. Utilisez @supports (color: oklch(from red l c h)) pour détecter spécifiquement le support de la syntaxe des couleurs relatives.
• Utilisez le Générateur de nuances pour des gammes de 50 à 950 précises et finement réglées dans les systèmes de design en production. Utilisez la syntaxe des couleurs relatives pour les variantes dynamiques dérivées au moment de l'exécution dans les composants.
• Utilisez le Convertisseur de couleurs pour traduire vos couleurs de marque hex existantes en valeurs OKLCH afin de comprendre leurs canaux l, c et h avant d'écrire des expressions de couleurs relatives.