Syntaxe des couleurs relatives en CSS expliquée

Si vous avez déjà défini une douzaine de propriétés personnalisées juste pour créer une version semi-transparente de votre couleur de marque, vous comprenez déjà le problème que résout la syntaxe des couleurs relatives en CSS. Cette fonctionnalité vous permet de dériver de nouvelles couleurs directement à partir de couleurs existantes au sein de n’importe quelle fonction de couleur CSS moderne — sans préprocesseurs, sans JavaScript, sans variables supplémentaires.

Qu’est-ce que la syntaxe des couleurs relatives en CSS ?

Les couleurs relatives CSS, définies dans la spécification CSS Color Level 5, vous permettent de prendre une couleur existante — appelée couleur d’origine — et d’utiliser ses canaux individuels comme variables pour construire une nouvelle couleur. L’ajout clé est le mot-clé from.

Voici la structure de base :

color-function(from <origin-color> channel1 channel2 channel3)

Lorsque le navigateur rencontre from, il convertit la couleur d’origine dans l’espace colorimétrique cible, expose chaque canal comme une variable nommée, et vous permet de passer ces variables — modifiées ou non — comme valeurs de sortie.

Cela fonctionne avec les fonctions de couleur CSS modernes telles que rgb(), hsl(), hwb(), lab(), lch(), oklab() et oklch().

Comment fonctionne la syntaxe CSS from color

Prenons cet exemple simple :

/* Origin color: green */
/* Channels exposed: r=0, g=128, b=0 */
color: rgb(from green r g b); /* outputs rgb(0 128 0) */

Ici, la sortie est identique à l’entrée, mais la véritable puissance réside dans le fait que vous pouvez modifier des canaux individuels en utilisant calc() :

/* Rotate the hue by 180 degrees to get the complement */
background: hsl(from blue calc(h + 180) s l);

/* Lighten by multiplying the lightness channel */
background: oklch(from blue calc(l * 1.25) c h);

/* Reduce opacity without a separate variable */
background: rgb(from lime r g b / 50%);

Les valeurs des canaux se résolvent en nombres simples à l’intérieur de la fonction, donc les calculs arithmétiques avec calc() fonctionnent proprement sans incompatibilité d’unités.

Pourquoi les couleurs relatives OKLCH valent la peine d’être utilisées

Tous les espaces colorimétriques ne sont pas égaux pour la manipulation. HSL est familier, mais son canal de luminosité n’est pas perceptuellement uniforme — ajuster l de la même quantité produit des résultats visuellement incohérents selon les différentes teintes.

OKLCH résout ce problème. Son canal de luminosité est perceptuellement uniforme, ce qui signifie qu’un décalage de +0.1 ressemble au même pas visuel quelle que soit la teinte. Cela en fait un choix solide pour générer des teintes, des nuances et des paires de contraste accessibles.

Si vous n’êtes pas familier avec les espaces colorimétriques perceptuels, le modèle de couleur OKLab/OKLCH introduit par Björn Ottosson explique le raisonnement derrière ces espaces colorimétriques plus récents.

/* Darken by 25% */
background: oklch(from var(--color-primary) calc(l * 0.75) c h);

/* Generate a high-contrast text color */
color: oklch(from var(--color-primary) calc(l + 0.6) c h);

Notez que le canal de luminosité dans OKLCH varie de 0 à 1, donc un décalage de calc(l + 0.6) est substantiel. Les valeurs qui dépassent la plage valide sont automatiquement limitées par le navigateur.

Couleurs relatives vs. color-mix()

Ces deux fonctionnalités de couleur CSS servent des objectifs différents. color-mix() mélange deux couleurs ensemble à un ratio spécifié. Les couleurs relatives CSS manipulent directement les canaux d’une seule couleur d’origine. Si vous avez besoin d’un état de survol, d’une variante atténuée ou d’un token avec opacité ajustée, la syntaxe relative est l’outil approprié. Si vous devez interpoler entre deux couleurs distinctes, utilisez color-mix().

Intégration dans un système de design basé sur des tokens

C’est là que les couleurs relatives CSS brillent véritablement. Définissez un token de base, puis dérivez-en toutes les variantes :

:root {
  --color-primary: #3b82f6;

  --color-primary-hover:    oklch(from var(--color-primary) calc(l * 0.9) c h);
  --color-primary-active:   oklch(from var(--color-primary) calc(l * 0.8) c h);
  --color-primary-disabled: oklch(from var(--color-primary) l c h / 0.5);
  --color-on-primary:       oklch(from var(--color-primary) calc(l + 0.6) c h);
}

Modifiez --color-primary et tous les tokens dérivés se mettent à jour automatiquement. Pas de fonctions Sass, pas d’étape de compilation.

Compatibilité des navigateurs

La syntaxe des couleurs relatives est prise en charge dans les versions modernes de Chromium, Firefox et Safari. Utilisez @supports pour la protéger de manière sûre :

@supports (color: rgb(from white r g b)) {
  /* relative color syntax is available */
}

Pour les navigateurs qui ne la prennent pas en charge, fournissez une couleur de repli avant la déclaration de couleur relative. La cascade garantit que les navigateurs plus anciens utilisent la valeur statique tandis que les navigateurs modernes la remplacent :

.button {
  background: #3b82f6;
  background: oklch(from var(--color-primary) calc(l * 0.9) c h);
}

Conclusion

La syntaxe des couleurs relatives CSS remplace toute une catégorie de logique de préprocesseur par un seul motif lisible. Choisissez OKLCH pour des ajustements de luminosité perceptuellement cohérents, utilisez hsl() lorsque vous avez besoin d’un contrôle direct de la saturation, et reliez tout à une propriété personnalisée pour que votre palette entière reste synchronisée à partir d’un seul token source.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.