Accédez à plus de couleurs et à de nouveaux espaces

Ce document fait partie du guide des couleurs CSS haute définition.

CSS Color 4 décrit de nombreuses nouvelles fonctionnalités et outils pour le CSS et les couleurs. Le Codepen suivant présente toutes les nouvelles et anciennes syntaxes de couleurs:

Consultez le résumé des espaces de couleurs classiques.

La spécification de niveau 4 a introduit 12 nouveaux espaces de couleurs pour la recherche de couleurs, contre sept nouveaux gamuts partagés précédemment:

• sRGB linéaire
• LCH
• okLCH
• LAB
• okLAB
• Affichage p3
• Rec2020
• a98 RVB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Découvrez les nouveaux espaces de couleurs Web

Les espaces de couleurs suivants offrent un accès à des gammes plus larges que sRGB. L'espace colorimétrique display-p3 offre presque deux fois plus de couleurs que le RVB, tandis que Rec2020 en propose presque deux fois plus que display-p3. C'est beaucoup de couleurs !

Fonction color()

Browser Support

• 111
• 111
• 113
• 15

Source

La nouvelle fonction color() peut être utilisée pour tout espace colorimétrique qui spécifie des couleurs avec les canaux R, G et B. color() prend d'abord un paramètre d'espace de couleurs, puis une série de valeurs de canaux pour RVB et éventuellement un alpha.

Vous constaterez que de nombreux nouveaux espaces de couleurs utilisent cette fonction, car la liste des fonctions spécialisées telles que rgb, srgb, hsl, hwb, etc., devenait longue. Il est donc plus simple de définir l'espace de couleurs comme paramètre.

Avantages

• Espace normalisé permettant d'accéder aux espaces colorimétriques qui utilisent des canaux RVB.
• Peut être mis à l'échelle pour n'importe quel espace colorimétrique RVB à large gamme.

Inconvénients

• Ne fonctionne pas avec les formats HSL, HWB, LCH, okLCH ou okLAB

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Remarque:Les couleurs peuvent être dans les sRGB Gamut, Display P3 Gamut ou Rec2020 Gamut, soit jusqu'à 77,6% du spectre visible.

sRGB via color()

Ce système de couleurs offre les mêmes fonctionnalités que rgb(). Il propose également des décimales comprises entre 0 et 1, utilisées exactement comme les valeurs de 0% à 100%.

Avantages

• Presque tous les écrans sont compatibles avec la plage de cet espace de couleurs.
• Compatibilité avec les outils de conception

Inconvénients

• Ne pas être linéaire dans la perception (comme lch())
• Aucune couleur à large gamme.
• Les dégradés passent souvent par une zone morte.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRVB linéaire via color() {#linear-srgb}

Cette alternative linéaire au RVB offre une intensité de canal prévisible.

Avantages

• Accès direct aux canaux RVB, pratique pour les moteurs de jeu ou les spectacles lumineux, par exemple.

Inconvénients

• Pas linéaire au niveau de la perception.
• Le noir et le blanc sont regroupés sur les bords.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

Les dégradés seront abordés plus en détail plus tard, mais il est utile de voir rapidement un dégradé de noir à blanc srgb et linear-srgb pour illustrer leurs différences:

LCH

Browser Support

• 111
• 111
• 113
• 15

Source

Le LCH introduit une syntaxe permettant d'accéder aux couleurs en dehors de la gamme RVB. Il s'agit également du premier outil qui permet de créer très facilement des couleurs hors du gamut pour un écran. En effet, toutes les couleurs de l'espace CIE (lch, oklch, lab, oklab) peuvent représenter l'ensemble du spectre de couleurs visible par l'œil humain.

Ce système de couleurs est modélisé d'après la vision humaine et offre une syntaxe permettant de spécifier n'importe laquelle de ces couleurs et plus encore. Les canaux LCH sont la luminosité, la chromie et la teinte. La teinte est un angle, comme dans les espaces de couleurs HSL et HWB. La luminosité est une valeur comprise entre 0 et 100. Il s'agit d'une légèreté "linéaire perceptive" et centrée sur l'humain. La chrominance est semblable à la saturation. Elle peut varier de 0 à 230, mais n'est techniquement pas limitée.

Avantages

• Manipulation des couleurs prévisible grâce à une linéarité perceptive, principalement (voir oklch).
• Utilise des canaux familiers.
• Utilise souvent des dégradés vifs.

Inconvénients

• Il est facile de sortir de la gamme.
• Dans de rares cas, le dégradé peut nécessiter un point médian d'ajustement pour éviter le changement de teinte.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

Attention :Chroma peut permettre aux auteurs de dépasser facilement la gamme d'un écran. Faites attention aux valeurs C chromatiques élevées.

ATELIER

Browser Support

• 111
• 111
• 113
• 15

Source

Autre espace colorimétrique conçu pour accéder à la gamme CIE, avec une dimension de luminosité (L) linéaire perceptive. Les valeurs A et B de l'espace LAB représentent les axes uniques de la vision des couleurs humaines: rouge-vert et bleu-jaune. Lorsqu'une valeur positive est attribuée à A, du rouge est ajouté, et du vert lorsqu'elle est inférieure à 0. Lorsqu'un nombre positif est attribué à B, du jaune est ajouté, tandis que les valeurs négatives sont plus proches du bleu.

Avantages

• Gradients perceptuellement cohérents.
• Plage dynamique élevée

Inconvénients

• Possibilité de changement de teinte.
• Il est difficile de créer manuellement une couleur ou de la deviner lors de la lecture des valeurs.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

Browser Support

• 111
• 111
• 113
• 15.4

Source

Cet espace de couleurs est correctif par rapport à LCH. Comme dans le modèle LCH, (L) continue de représenter la luminosité linéaire perceptive, C pour la chromie et H pour la teinte.

Cet espace vous semblera familier si vous avez déjà travaillé avec HSL ou LCH. Choisissez un angle sur la roue des couleurs pour H, choisissez un niveau de luminosité ou d'obscurité en ajustant L, mais nous avons alors la chrominance au lieu de la saturation. Ils sont assez identiques, sauf que les ajustements de la luminosité et de la chromie ont tendance à se présenter par paires, sinon il peut être facile de demander des couleurs à chromie élevée qui sortent du gamut cible.

Avantages

• Aucune surprise lorsque vous travaillez avec des teintes bleues et violettes.
• Luminosité perçue linéaire.
• Utilise des canaux familiers.
• Plage dynamique élevée
• Inclut un sélecteur de couleur moderne, créé par Evil Martians.

Inconvénients

• Il est facile de sortir de la gamme.
• Nouveau et relativement inexploré
• Peu de sélecteurs de couleur.

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKLAB

Browser Support

• 111
• 111
• 113
• 15.4

Source

Cet espace est correctif par rapport au LAB. Il est également considéré comme un espace optimisé pour la qualité du traitement des images, ce qui, pour nous en CSS, signifie la qualité de la manipulation des dégradés et des fonctions de couleur.

Avantages

• Espace par défaut pour les animations et les interpolations.
• Luminosité perçue linéaire.
• Pas de décalage de teinte comme dans le modèle LAB.
• Gradients perceptuellement cohérents.

Inconvénients

• Nouveau et relativement inexploré
• Peu de sélecteurs de couleur.

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

Display P3

Browser Support

• 111
• 111
• 113
• 15

Source

Remarque:Les couleurs se trouvent dans la plage Display P3 Gamut, soit 45,5% du spectre visible.

La gamme et l'espace colorimétrique Display P3 sont devenus populaires depuis qu'Apple les a pris en charge sur ses iMac en 2015. Apple est également compatible avec display-p3 dans les pages Web via CSS depuis 2016, cinq ans avant tout autre navigateur. Si vous venez de sRVB, il s'agit d'un excellent espace colorimétrique pour commencer à travailler à mesure que vous déplacez les styles vers une plage dynamique plus élevée.

Avantages

• Excellente compatibilité, considérée comme la référence pour les écrans HDR.
• 50% de couleurs en plus que le sRVB.
• Les outils de développement proposent un excellent sélecteur de couleur.

Inconvénients

• Sera à terme remplacé par les espaces Rec2020 et CIE.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Browser Support

• 111
• 111
• 113
• 15

Source

Remarque:Les couleurs se trouvent dans la plage Rec2020 Gamut, soit 77,6% du spectre visible.

Rec2020 fait partie du mouvement vers la télévision UHD (ultra haute définition), offrant une large gamme de couleurs à utiliser dans les contenus multimédias 4K et 8K. Rec2020 est un autre gamut basé sur le RVB, plus large que Display P3, mais pas aussi courant auprès des consommateurs que Display P3.

Avantages

• Couleurs Ultra HD.

Inconvénients

• Pas encore très répandue auprès des consommateurs.
• Ne se trouve généralement pas sur les appareils portables ni les tablettes.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

RVB A98 {#a98-rgb}

Browser Support

• 111
• 111
• 113
• 15

Source

Remarque:Les couleurs se trouvent dans la plage RGB 98 Gamut, soit 52,1% du spectre visible.

A98 RVB, abréviation d'Adobe 1998 RVB, a été créé par Adobe pour présenter la plupart des couleurs réalisables avec les imprimantes CMJN. Il offre plus de couleurs que le sRVB, en particulier dans les teintes cyan et vertes.

Avantages

• Plus grand que les espaces colorimétriques sRVB et Display P3.

Inconvénients

• Il ne s'agit pas d'un espace commun dans lequel les concepteurs numériques travaillent.
• Peu de personnes portent des palettes à partir de CMJN.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhoto RGB

Browser Support

• 111
• 111
• 113
• 15

Source

Remarque :Les couleurs se trouvent dans la plage ProPhoto Gamut, soit 90% du spectre visible.

Créé par Kodak, cet espace à grande gamme offre des couleurs primaires ultra larges et présente des décalages de teinte minimes lors de la modification de la luminosité. Il prétend également couvrir 100% des couleurs de surface du monde réel, comme l'a documenté Michael Pointer en 1980.

Avantages

• Changements de teinte minimes lorsque vous modifiez la luminosité.
• Couleurs primaires vives.

Inconvénients

• Environ 13% des couleurs proposées sont imaginaires, ce qui signifie qu'elles ne font pas partie du spectre visible par l'œil humain.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

Browser Support

• 111
• 111
• 113
• 15

Source

Remarque:Les couleurs se trouvent dans la plage HVS Gamut, soit 100% du spectre visible humain.

L'espace de couleurs CIE XYZ englobe toutes les couleurs visibles par une personne ayant une vue moyenne. C'est pourquoi il est utilisé comme référence standard pour d'autres espaces de couleurs. Y correspond à la luminance, X et Z sont les chrominances possibles dans la luminance Y donnée.

La différence entre d50 et d65 est le point blanc, où d50 utilise les points blancs d50 et d65 utilise le point blanc d65.

Terme clé: le point blanc est un attribut d'un espace de couleurs. Il correspond au vrai blanc dans l'espace. Pour les écrans électroniques, D65 est le point blanc le plus courant, et correspond à 6 500 kelvin. Lors de la conversion des couleurs, il est important que les points blancs correspondent afin que la température des couleurs (chaleur ou fraîcheur) ne soit pas affectée.

Avantages

• L'accès linéaire léger présente des cas d'utilisation pratiques.
• Idéal pour mélanger des couleurs physiquement.

Inconvénients

• Pas linéaire perceptivement comme lch, oklch, lab et oklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

Espaces de couleurs personnalisés

La spécification CSS Color 5 propose également un chemin d'accès pour enseigner au navigateur un espace colorimétrique personnalisé. Il s'agit d'un profil ICC qui indique au navigateur comment résoudre les couleurs.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Une fois chargé, accédez aux couleurs de ce profil personnalisé à l'aide de la fonction color() et spécifiez les valeurs de canal pour celui-ci.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Interpolation des couleurs

La transition d'une couleur à une autre se trouve dans l'animation, les dégradés et le mélange des couleurs. Cette transition est généralement spécifiée en tant que couleur de début et couleur de fin, où le navigateur doit interpoler entre elles. Dans ce cas, l'interpolation consiste à générer une série de couleurs intermédiaires pour créer une transition fluide plutôt qu'instantanée.

Avec un dégradé, l'interpolation est une série de couleurs le long d'une forme. Avec l'animation, il s'agit d'une série de couleurs au fil du temps.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

.

Avec un dégradé, les couleurs intermédiaires sont affichées toutes en même temps:

Nouveautés de l'interpolation des couleurs

L'ajout de nouvelles gammes et d'espaces de couleurs offre de nouvelles options d'interpolation. La transition d'une couleur in hsl du bleu au blanc donne un résultat très différent de celui obtenu avec sRGB.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

Que se passe-t-il si vous passez d'une couleur dans un espace à une couleur dans un espace complètement différent ?

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

Heureusement pour vous, la spécification Color 4 contient des instructions pour les navigateurs sur la gestion de ces interpolations d'espaces colorimétriques croisés. Pour .gradient, les navigateurs remarquent les espaces de couleurs différents et utilisent l'espace de couleurs par défaut oklab.

Vous pourriez penser que le navigateur utilise lch comme espace de couleurs, car il s'agit de la première couleur, mais ce n'est pas le cas. C'est pourquoi j'affiche un deuxième dégradé de comparaison .lch. Le dégradé .lch est un dégradé de l'espace de couleurs lch.

Moins de bandes grâce à la couleur 16 bits

Avant ce travail sur les couleurs, toutes les couleurs étaient enregistrées dans un entier 32 bits pour représenter les quatre canaux : rouge, vert, bleu et alpha. Cela correspond à 8 bits par canal et à 2^ 24 couleurs possibles (en ignorant l'alpha). 2 ^ 24 = 16 777 216 "millions de couleurs".

Après ce travail de couleur, quatre valeurs à virgule flottante 16 bits, chaque canal a son propre flottant au lieu d'être regroupé. Cela représente 64 bits de données au total, ce qui équivaut à bien plus de millions de couleurs.

Cette opération est nécessaire pour prendre en charge la couleur HD. Cela augmente la quantité d'informations sur les couleurs pouvant être stockées, ce qui a pour effet secondaire intéressant de permettre au navigateur d'utiliser davantage de couleurs dans un dégradé.

Un dégradé avec bandes se produit lorsqu'il n'y a pas assez de couleurs pour créer un dégradé fluide et que des "bandes" de couleur deviennent visibles. La bande est fortement atténuée avec la mise à niveau vers une couleur haute résolution.

Source de l'image

Interpolation de contrôle

La distance la plus courte entre deux points est toujours une ligne droite. Avec l'interpolation de couleur, les navigateurs empruntent le chemin le plus court par défaut. Imaginons qu'il y ait deux points dans un cylindre de couleur TSL. Un dégradé acquiert ses étapes de couleur en suivant la ligne entre les deux points.

linear-gradient(to right, #94e99c, #e06242)

(mock demonstration)
Vue du dessus d'un cylindre TSL avec une ligne entre les arrêts de couleur

La ligne de dégradé ci-dessus passe directement entre la couleur verdâtre et la couleur rougeâtre, en passant par le centre de l'espace de couleurs. Bien que ce qui précède soit utile pour comprendre les bases, ce n'est pas exactement ce qui se passe. Voici le dégradé dans le Codepen suivant. Il n'est clairement pas blanc au milieu, comme le montre la simulation.

Toutefois, la zone centrale du dégradé a perdu de son éclat. En effet, les couleurs les plus vives se trouvent au bord de la forme de l'espace de couleurs, et non au centre, où l'interpolation s'est déplacée. On parle couramment de zone morte. Il existe plusieurs façons de résoudre ou de contourner ce problème.

Spécifier davantage d'arrêts de dégradé pour éviter la zone morte

Une technique permettant d'éviter la zone morte consiste à ajouter des arrêts de couleur supplémentaires dans le dégradé qui guident intentionnellement l'interpolation pour qu'elle reste dans les plages de couleurs vives d'un espace de couleurs. Il s'agit littéralement d'une solution de contournement, car les arrêts supplémentaires permettent de contourner la zone morte.

Un outil de dégradé créé par Erik Kennedy calcule des arrêts de couleur supplémentaires pour vous aider à éviter la zone morte, même dans les espaces de couleurs qui ont tendance à s'en rapprocher. En utilisant cette méthode, en transmettant les mêmes couleurs que dans le premier exemple, mais en définissant l'interpolation de couleur sur TSL, vous obtenez ceci:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

(simulation)
Vue du dessus d'un cylindre HSL avec une ligne incurvée comportant neuf arrêts de couleur

Avec les points d'arrêt guidés, l'interpolation n'est plus une ligne droite, mais semble se courber autour de la zone morte, ce qui permet de maintenir la saturation, ce qui donne un dégradé beaucoup plus vif.

Bien que l'outil soit très efficace, que se passerait-il si vous pouviez avoir un contrôle similaire ou plus important directement depuis le CSS ?

Diriger l'interpolation des couleurs

Dans Color 4, la possibilité de contrôler la stratégie d'interpolation de teinte a été ajoutée. Il s'agit d'un nouveau moyen de contourner (:wink:) la zone morte. Pensez à un angle de teinte et à un dégradé à deux niveaux qui ne modifie que l'angle, en passant de 140deg à 240deg, par exemple.

Interpolation de teinte plus courte ou plus longue

Par défaut, le dégradé emprunte la route shorter, sauf si vous spécifiez qu'il doit emprunter la route longer. Les options d'interpolation de teinte orientent la rotation angulaire, comme si vous demandiez à quelqu'un de tourner à gauche plutôt qu'à droite (hé, Zoolander):

Dans l'exemple des distances d'interpolation de teinte, le chemin court et le chemin long sont simulés pour illustrer la différence. La distance courte comporte moins de teintes, car elle a parcouru la plus courte distance possible, tandis que la distance longue a parcouru plus de teintes.

Interpolations de teintes croissantes et décroissantes

Color 4 propose deux autres stratégies d'interpolation de teinte, mais elles sont réservées aux espaces de couleurs cylindriques. En conservant les deux couleurs des exemples précédents, le visuel montre maintenant comment l'augmentation et la diminution fonctionnent.

Le Codepen ci-dessus a utilisé ColorJS pour illustrer le résultat attendu. Le code CSS que vous écririez pour obtenir le même effet sans bibliothèque JavaScript serait le suivant:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

Pour terminer sur l'interpolation de teinte, voici un espace de jeu amusant où vous pouvez modifier la teinte entre deux arrêts de couleur et voir les effets d'un choix d'interpolation de teinte, ainsi que la façon dont les espaces de couleur modifient les résultats du dégradé. Les effets peuvent être très différents. Considérez cela comme quatre nouveaux trucs qui viennent d'être ajoutés à votre boîte à outils de couleurs.

Dégradés dans différents espaces de couleurs

Chaque espace de couleurs, en raison de sa forme et de son arrangement de couleurs uniques, génère un dégradé différent. Dans les exemples suivants, observez comment chaque espace de couleurs gère cela différemment, en particulier du bleu au blanc. Notez combien de pixels deviennent violets au milieu. C'est ce qu'on appelle un décalage de teinte lors de l'interpolation.

Certains dégradés de ces espaces sont plus vifs que d'autres ou passent moins dans les zones mortes. Les espaces tels que lab regroupent les couleurs de manière optimisée pour la saturation, contrairement aux espaces optimisés pour que les humains puissent écrire des couleurs, comme hwb().

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

.

La démonstration ci-dessus, bien que les résultats soient subtils, montre une interpolation plus cohérente avec l'atelier. La syntaxe de Lab n'est cependant pas simple à lire. Il existe des nombres négatifs qui sont très inhabituels lorsqu'ils proviennent de RGB ou de HSL. Bonne nouvelle : nous pouvons utiliser hwb pour une syntaxe familière, mais demander que le dégradé soit entièrement interpolé dans un autre espace de couleurs, comme oklab.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

Cet exemple utilise les mêmes couleurs en hwb, mais spécifie l'espace colorimétrique pour l'interpolation en hwb ou en oklab. hwb est un espace de couleurs idéal pour les couleurs vives, mais il peut présenter des zones mortes ou des points lumineux (voir le point chaud cyan dans l'exemple du haut). oklab est idéal pour les dégradés linéaires perceptifs qui restent saturés. Cette fonctionnalité est très amusante, car vous pouvez essayer plusieurs espaces de couleurs différents pour voir quel dégradé vous préférez.

Voici un Codepen qui teste les dégradés et les espaces de couleurs, en mélangeant et en associant des stratégies pour explorer les possibilités. Même une transition du noir au blanc est différente dans chaque espace de couleurs.

Limite de la gamme de couleurs

Il existe des cas où une couleur peut demander quelque chose en dehors d'une gamme. Prenons l'exemple suivant:

rgb(300 255 255)

La valeur maximale pour un canal de couleur dans l'espace colorimétrique rgb est 255, mais ici, 300 a été spécifié pour le rouge. Que se passe-t-il ? Limite de la gamme de couleurs

Le forçage consiste simplement à supprimer les informations supplémentaires. 300 devient 255 en interne dans le moteur de couleurs. La couleur a maintenant été limitée dans son espace.

Choisir un espace de couleurs

De nombreuses personnes, après avoir découvert ces espaces de couleurs et leurs effets, se sentent submergées et veulent savoir lequel choisir. D'après mes études et mon expérience, je ne vois pas un seul espace de couleurs comme unique pour toutes mes tâches. Chacun a des moments où il produit le résultat souhaité.

S'il n'y avait qu'un seul espace idéal, nous n'en introduirions pas autant.

Toutefois, je peux dire que les espaces CIE (lab, oklab, lch et oklch) sont mes points de départ. Si le résultat ne correspond pas à ce que je recherche, je testerai d'autres espaces. Pour mélanger des couleurs et créer des dégradés, je suis d'accord avec le choix de spécification par défaut de oklab. Pour les systèmes de couleurs et les couleurs globales de l'interface utilisateur, j'aime oklch.

Voici quelques articles dans lesquels des utilisateurs ont partagé leurs stratégies de couleurs mises à jour en fonction de ces nouveaux espaces et fonctionnalités de couleurs. Par exemple, Andrey Sitnik a misé sur oklch. Il vous convaincra peut-être de faire de même:

1. OKLCH dans CSS: pourquoi nous sommes passés du RVB et du HSL par Andrey Sitnik
2. Formats de couleurs par Josh W. Comeau
3. OK, OKLCH par Chris Coyier

Étapes suivantes

Maintenant que vous connaissez les nouveaux espaces et outils de couleurs, vous pouvez passer aux couleurs HD.

Plus de luminosité, des manipulations et des interpolations cohérentes, et une expérience plus colorée pour vos utilisateurs.

Pour en savoir plus sur les ressources de couleurs, consultez le guide.