Syntaxe des couleurs relatives au CSS

Créer des couleurs basées sur les canaux et les valeurs d'une autre couleur

Adam Argyle

Dans Chrome 119, il s'agit d'une fonctionnalité de couleur très puissante du niveau de couleur CSS 5. Syntaxe des couleurs relatives crée un chemin fluide pour la manipulation des couleurs dans CSS, ce qui offre des moyens auteurs et concepteurs pour:

• Lighten
• Assombrir
• Saturer
• Désaturer
• Amplification de la chrominance
• Ajuster l'opacité
• Inverser
• Compléter
• Convertir
• Contraste
• Palettes de couleurs <ph type="x-smartling-placeholder">
  </ph>
  • Monochrome
  • Analogue
  • Triadique
  • Tétraque
  • Monochrome avec rotation des teintes

Avant la syntaxe de couleur relative, pour modifier l'opacité d'une couleur, vous devez créer des propriétés personnalisées pour les canaux d'une couleur (généralement TSL) et les assembler en une couleur finale et une couleur de variante finale. Cela signifie gérer un grand nombre des morceaux de couleur, ce qui peut rapidement devenir pénible.

:root {
  --brand-hue: 300deg;
  --brand-saturation: 75%;
  --brand-lightness: 50%;

  --brand-hsl:
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness);

  --brand-color: hsl(var(--brand-hsl));

  /* all this work just so I can set the opacity to 50% in a variant */
  --brand-color-variant: hsl(var(--brand-hsl) / 50%);
}

Après la syntaxe de couleur relative, vous pouvez créer une couleur de marque avec n'importe quel espace colorimétrique. ou la syntaxe dont vous avez besoin, puis créez une variante de demi-opacité avec beaucoup moins de code. Il est il est également beaucoup plus facile de lire l'intention des styles et du système.

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

Cet article vous aidera à apprendre la syntaxe et à présenter les manipulations de couleurs courantes.

Si vous préférez la vidéo, la quasi-totalité de l'article suivant est abordée dans ce défi IUG.

Présentation de la syntaxe

L'objectif de la syntaxe des couleurs relatives est de permettre de dériver une couleur à partir d'une autre couleur. La couleur de base est appelée couleur d'origine, c'est la couleur qui vient après le nouveau mot clé from. Le navigateur effectuer une conversion, séparer la couleur d'origine et proposer les parties comme variables à utiliser dans la nouvelle définition de couleur.

Le schéma précédent montre la couleur d'origine green convertie en l'espace colorimétrique de la nouvelle couleur, transformées en nombres individuels représentés par r, g, b et alpha qui sont ensuite directement utilisées comme valeurs de la nouvelle couleur rgb().

Bien que cette image montre la répartition, le processus et les variables, changer la couleur. Les variables sont restaurées dans la couleur inchangée. ce qui donne une couleur verte fixe.

Remarque:Pour savoir comment spécifier les couleurs, consultez la documentation sur les couleurs haute définition de Google pour accéder à toutes les informations sur la couleur du Web. Cet article suppose que vous connaissez les couleurs fonctionnelles la notation, les espaces de couleur comme OKLCH et les gammes de couleurs.

Le mot clé from

La première partie de la syntaxe à apprendre est l'ajout de la partie from <color> à spécifiant une couleur. Elle va juste avant que vous ne spécifiiez les valeurs. Voici un code exemple dans lequel tout ce qui a été ajouté est from green, juste avant les valeurs pour rgb() sont spécifiés.

.syntax-introduction_same-colors {
  color: green;
  color: rgb(0 128 0);
  color: rgb(from green r g b);    /* result = rgb(0 128 0) */
}

Ce mot clé from, lorsqu'il est considéré comme le premier paramètre de la notation fonctionnelle, transforme la définition de la couleur en une couleur relative ! Après le mot clé from, le CSS attend une couleur, une couleur qui inspire la couleur suivante.

Conversion des couleurs

En termes plus simples, il convertit le vert en canaux r g et b pour être utilisé dans un nouveau couleur.

rgb(from green r g b)           /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b);   /* r=0 g=128 b=0 */

Couleurs des propriétés personnalisées

rgb from green est très clair et facile à comprendre. C'est pourquoi les propriétés personnalisées et la syntaxe de couleur relative font un excellent choix, car vous peut résoudre le mystère de la couleur from. De manière générale, vous n'avez pas non plus le format de la couleur de la propriété personnalisée lorsque vous créez une dans le format de votre choix.

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

Travaillez dans l'espace colorimétrique de votre choix

Vous pouvez choisir l'espace colorimétrique grâce à la notation fonctionnelle de votre choix.

rgb(from hsl(120 100% 25%) r g b)     /*  r=0   g=128  b=0    */
hsl(from hsl(120 100% 25%) h s l)     /*  h=120 s=100% l=25%  */
hwb(from hsl(120 100% 25%) h w b)     /*  h=120 w=0%   b=50%  */
lch(from hsl(120 100% 25%) l c h)     /*  l=46  c=68   h=134  */

La syntaxe de couleur relative comporte cette étape de conversion : la couleur après from est convertie dans l'espace colorimétrique comme spécifié au début de la plage relative couleur. L'entrée et la sortie n'ont pas besoin de correspondre, ce qui est très libérateur.

La possibilité de choisir un espace colorimétrique est également stimulante, comme le choix d’une couleur dans l'espace est plus axé sur le type d'alternance des couleurs la préférence. La préférence réside dans les résultats, et non dans le format ou le canal de couleur. de données. Cela sera beaucoup plus clair dans les sections présentant les cas d'utilisation, les espaces de couleurs différents excellent dans différentes tâches.

Combiner, omettre et répéter les variables

Cette syntaxe est étrange, mais intéressante : les variables n'ont pas besoin d'être remis dans l'ordre et peut être répété.

rgb(from green g g g)    /* rgb(128 128 128) */
rgb(from green b r g)    /* rgb(0 0 128) */
rgb(from green 0 0 g)    /* rgb(0 0 128) */

L'opacité en tant que variable

La syntaxe fournit également l'opacité sous la forme d'une variable nommée alpha. Il est facultatif, et suit / dans la notation de couleur fonctionnelle.

rgb(from #00800080 r g b / alpha)             /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha)      /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha)    /* alpha=50% */

Utiliser calc() ou d'autres fonctions CSS sur les variables

Jusqu'à présent, nous avons créé la couleur verte encore et encore. Apprendre la en vous familiarisant avec les étapes de conversion et de déstructuration. Il s'agit de pour modifier les variables, modifiez la sortie pour qu'elle ne soit pas la même saisie.

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

C'est bleu marine maintenant ! La teinte a été doublée, en prenant une teinte de 120 et en la transformant en 240, modifiant complètement la couleur. Cela a fait pivoter la teinte le long de la couleur roue, une astuce astucieuse rendue très simple par des espaces cylindriques comme HSL, HWB, LCH OKLCH.

Pour visualiser visuellement les valeurs des canaux, vous pouvez ainsi effectuer des calculs mathématiques justes, sans avoir à deviner ni mémoriser la spécification, utilisez cet outil d'affichage des valeurs de canaux avec la syntaxe de couleur relative. Il révèle chaque valeur de canal en fonction de la syntaxe que vous spécifiez, ce qui vous permet de savoir exactement avec quelles valeurs vous pouvez jouer.

Vérifier la compatibilité des navigateurs

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

Cas d'utilisation et démonstrations

Les exemples et cas d'utilisation suivants permettent d'obtenir de nombreuses syntaxes alternatives des résultats similaires ou identiques. Les variations proviennent des espaces colorimétriques canaux qu'ils proposent.

En outre, de nombreux exemples illustrent les ajustements de couleur avec le vocabulaire by et to Une couleur modifiée (by) est un changement de couleur relatif. une modification qui utilise de la variable et effectue un ajustement en fonction de sa valeur actuelle. A couleur modifiée to est un changement de couleur absolu. une modification qui n'utilise pas de la variable et spécifie à la place une valeur entièrement nouvelle.

Toutes les démonstrations se trouvent dans cette collection Codepen.

Éclaircir une couleur

L'OKLCH, OKLAB, XYZ ou Les espaces de couleurs sRGB offrent des résultats prévisibles lors de l'éclaircissement des couleurs.

Remarque:Pour en savoir plus sur les résultats prévisibles des gradients, consultez l'épisode du podcast CSS.

Éclaircir d'une certaine quantité

L'exemple suivant .lighten-by-25 prend la couleur blue et la convertit en OKLCH, puis éclaircit le bleu en augmentant le canal l (luminosité) en multipliant la valeur actuelle de 1.25. Cela pousse la luminosité bleue vers le blanc de 25%.

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

Éclaircir en fonction d'une valeur spécifique

L'exemple suivant, .lighten-to-75, n'utilise pas le canal l pour éclaircit blue, il remplace complètement sa valeur par 75%.

.lighten-to-75 {
  background: oklch(from blue 75% c h);
}

Assombrir une couleur

Les mêmes espaces de couleur efficaces pour éclaircir une couleur, sont également parfaits pour une couleur assombrissante.

Assombrir d'une certaine quantité

L'exemple suivant, .darken-by-25, prend la couleur bleue et la convertit en OKLCH, puis assombrit le bleu en diminuant le canal l (luminosité) de 25% en multipliant la valeur par .75. Cela pousse la couleur bleue vers le noir de 25%.

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

Assombrir jusqu'à une valeur spécifiée

L'exemple suivant, .darken-to-25, n'utilise pas le canal l pour assombrir blue, il remplace complètement la valeur par 25%.

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

Saturer une couleur

Saturation en fonction d'une certaine quantité

L'exemple .saturate-by-50 suivant utilise l's de hsl() pour augmenter Vibrance de orchid par une 50% relative.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

Saturer jusqu'à une certaine quantité

L'exemple suivant, .saturate-to-100, n'utilise pas le canal s de hsl(), il spécifie à la place la valeur de saturation souhaitée. Dans cet exemple, la saturation est portée à 100%.

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

Désaturer une couleur

Désaturer selon une quantité

L'exemple suivant .desaturate-by-half utilise l's de hsl() pour diminuer la saturation de indigo de moitié.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Désaturer en une valeur spécifique

Plutôt que de désaturer selon une quantité, vous pouvez désaturer vers une valeur spécifique . L'exemple suivant .desaturate-to-25 crée une couleur basée sur indigo, mais définit la saturation sur 25%.

.desaturate-to-25 {
  background: hsl(from indigo h 25% l);
}

Amplification de la chrominance d'une couleur

Cet effet est semblable à la saturation d'une couleur, mais il est différent dans quelques de différentes manières. Tout d'abord, il s'agit d'une modification de chroma, et non d'une modification de saturation, car les espaces colorimétriques qui peuvent être amplifiés dans une plage HDR élevée n'utilisent pas et la saturation. Les espaces de couleur qui comportent des chroma sont des zones HDR (High Dynamic Range) ce qui permet aux auteurs d'augmenter l'éclat des couleurs au-delà de la saturation même capable de le faire.

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

Ajuster l'opacité d'une couleur

La variante semi-transparente d'une couleur est l'une des couleurs les plus courantes des ajustements effectués dans les systèmes de conception. Consultez l'exemple de l'introduction si vous l'avez manqué, il décrit très bien l'espace problématique.

Ajuster l'opacité selon une valeur

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

Ajuster l'opacité sur une valeur spécifique

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

Inverser une couleur

L'inversion des couleurs est une fonction d'ajustement des couleurs courante disponible dans les bibliothèques de couleurs. Pour ce faire, vous pouvez convertir une couleur en RVB, puis soustraire chaque la valeur du canal de 1.

.invert-each-rgb-channel {
  background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}

Compléter une couleur

Si votre objectif n'était pas d'inverser une couleur, mais plutôt de la compléter, la rotation est probablement ce que vous recherchez. Choisissez un espace colorimétrique qui offre sous forme d'angle, puis utilisez calc() pour faire pivoter la teinte selon la valeur souhaitée. La recherche de la complémentarité d'une couleur se fait en faisant pivoter d'un demi-tour, dans ce cas vous pouvez effectuer une addition ou une soustraction du canal h par 180 pour obtenir le résultat.

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

Contraster une couleur

Pour obtenir des rapports de contraste des couleurs accessibles, envisagez d'utiliser L&midast; (Létoile). Elle utilise le canal de luminosité (L) (approximativement) uniformément uniforme de LCH et OKLCH, dans un calc(). Selon le type de ciblage choisi : faible, moyen ou élevé En revanche, delta est d'environ 40, 50 ou ~60.

Cette technique fonctionne bien pour toutes les teintes dans LCH ou OKLCH.

Contraster une couleur plus sombre

La classe .well-contrasting-darker-color illustre L* avec un delta de 60. Étant donné que la couleur d'origine est une couleur sombre (valeur de luminosité faible), 60% (0,6) est ajouté au canal de la luminosité. Cette technique est utilisée pour trouver un contraste même couleur de texte sombre sur fond clair.

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

Contraster une couleur plus claire

La classe .well-contrasting-lighter-color illustre L* avec un delta de 60 %. également. Étant donné que la couleur d'origine est une couleur claire (luminosité à forte valeur), 0,60 correspond à soustrait du canal de luminosité.

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

Palettes de couleurs

La syntaxe des couleurs relatives est très efficace pour créer des palettes de couleurs. C'est particulièrement utiles et puissants en raison du nombre d’espaces colorimétriques disponibles. Les éléments suivants : les exemples utilisent tous OKLCH, car le canal de luminosité est fiable et la teinte le canal peut être pivoté sans effets secondaires. Le dernier exemple illustre la combinaison de la luminosité et des ajustements de rotation des teintes pour obtenir résultat !

Ouvrez l'exemple de code source correspondant et essayez de remplacer --base-color par voir à quel point ces palettes sont dynamiques. C'est amusant !

Si vous aimez la vidéo, je vous donne des informations détaillées sur la création de palettes de couleurs en CSS avec OKLCH sur YouTube.

Palettes monochromes

Créer une palette monochrome, c'est créer une palette à partir de la même teinte, mais avec des variations de luminosité et d'obscurité. La couleur du milieu est la couleur source. de la palette, deux variantes plus claires et deux plus sombres étant appliquées sur le côté.

:root {
  --base-color: deeppink;

  --color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
  --color-1: oklch(from var(--base-color) calc(l + .10) c h);
  --color-2: var(--base-color);
  --color-3: oklch(from var(--base-color) calc(l - .10) c h);
  --color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}

Essayez plusieurs palettes créées avec une syntaxe de couleur relative et OKLCH

Open Props, une bibliothèque de variables CSS sans frais, propose des palettes de couleurs élaborées avec cette stratégie et les rend facilement utilisables avec un l'importation. Ils sont également tous construits à partir d'une couleur que vous pouvez personnaliser. Il vous suffit de donner une couleur et il crache une palette !

Palettes analogues

Comme la rotation des teintes est très facile avec OKLCH et HSL, il est facile de créer une palette de couleurs analogues. Faites pivoter la teinte selon la valeur qui vous convient le mieux, puis changez la couleur de base. et observer les nouvelles palettes créées par le navigateur.

:root {
  --base-color: blue;

  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));
}

Palettes triadiques

Semblable aux couleurs complémentaires, les palettes de couleurs triadiques des teintes opposées, mais harmonieuses en fonction d'une couleur de base. Si un la couleur complémentaire se trouve du côté opposé d'une couleur, comme une ligne droite dessinées au milieu de la roue des couleurs, les palettes triadiques sont comme triangulaire de lignes, pour trouver 2 couleurs alternées de manière égale à partir d'une couleur de base. Pour ce faire, faites pivoter la teinte 120deg.

C'est une légère simplification de la théorie des couleurs, mais cela suffit vous commencerez dans les palettes triadiques plus complexes si cela vous intéresse.

:root {
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));
}

Palettes tétradiques

Les palettes tétradiques sont composées de quatre couleurs réparties uniformément autour de la roue des couleurs, ce qui une palette sans valeur dominante claire. On pourrait penser à cela aussi, comme deux paires de couleurs complémentaires. Utilisées à bon escient, elles peuvent s'avérer très utiles.

C'est une légère simplification de la théorie des couleurs, mais cela suffit vous commencerez à utiliser les palettes traditionnelles plus complexes si cela vous intéresse.

:root {
  --base-color: lime;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));
}

Monochrome avec une légère rotation des teintes

De nombreux spécialistes des couleurs vous accompagnent dans cette aventure. Le problème est qu'une l'échelle de couleurs monochrome peut être assez ennuyeuse. La solution consiste à ajouter une rotation mineure ou majeure des teintes vers chaque nouvelle couleur à mesure que la luminosité change.

L'exemple suivant réduit la luminosité de chaque échantillon de 10% et effectue une rotation la teinte de 10 degrés. Résultat : une palette rose à indigo qui semble se fondre parfaitement comme un dégradé.

:root {
  --base-color: deeppink;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}

Essayez ce classement basé sur OKLCH et la rotation des teintes

L'interface de classement suivante utilise cette stratégie de rotation des teintes. Chaque liste item effectue le suivi de son index dans le document sous la forme d'une variable appelée --i. Cet indice est puis utilisées pour ajuster la chrominance, la luminosité et la teinte. L'ajustement n'est que de 5% ou 5 deg, ce qui est beaucoup plus subtil que l'exemple ci-dessus avec deeppink. Il faut donc un œil attentif afin de comprendre pourquoi ce classement peut avoir n'importe quelle teinte avec l'élégance.

Assurez-vous de modifier la teinte dans le curseur situé sous le leaderboard, et consultez la syntaxe des couleurs relatives crée de magnifiques moments de couleur.

li {
  --_bg: oklch(
    /* decrease lightness as list grows */
    calc(75% - (var(--i) * 5%))

    /* decrease chroma as list grows */
    calc(.2 - (var(--i) * .01))

    /* lightly rotate the hue as the list grows */
    calc(var(--hue) - (var(--i) + 5))
  );
}