Ce document fait partie du guide des couleurs CSS haute définition.
CSS Color 4 présente un grand nombre de nouvelles fonctionnalités et d'outils pour le CSS et la couleur. Le codepen suivant affiche toutes les nouvelles et anciennes syntaxes de couleurs:
Lisez la récapitulation des espaces de couleur classiques.
La spécification level 4 a introduit 12 nouveaux espaces de couleur pour rechercher les couleurs, par rapport aux 7 nouvelles gammes partagées précédemment:
Découvrez les nouveaux espaces colorimétriques Web
Les espaces de couleurs suivants permettent d'accéder à des gammes plus larges qu'avec le mode sRVB. L'espace colorimétrique display-p3 offre presque deux fois plus de couleurs que le RVB, tandis que le Rec2020 en propose presque deux fois plus que le display-p3. Ça fait beaucoup de couleurs !
La fonction color()
La nouvelle fonction color() peut être utilisée pour tout espace colorimétrique spécifiant des couleurs avec les canaux R, V et B. color() utilise d'abord un paramètre d'espace colorimétrique, puis une série de valeurs de canaux pour RVB et éventuellement une valeur alpha.
Vous constaterez qu'un grand nombre de nouveaux espaces de couleur utilisent cette fonction, car les fonctions spécialisées telles que rgb, srgb, hsl, hwb, etc. sont devenues une longue liste. Il est donc plus facile d'utiliser l'espace colorimétrique comme paramètre.
Avantages
- Espace normalisé permettant d'accéder aux espaces de couleurs qui utilisent des canaux RVB.
- Peut s'adapter à n'importe quel espace colorimétrique RVB à large gamme.
Inconvénients
- Ne fonctionne pas avec HSL, HWB, LCH, okLCH ni 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);
}
sRVB via color()
Cet espace colorimétrique offre les mêmes fonctionnalités que rgb(). Il propose également des nombres décimaux compris entre 0 et 1, utilisés exactement comme 0% à 100%.
Avantages
- Presque tous les écrans prennent en charge la plage de cet espace colorimétrique.
- Prise en charge des outils de conception
Inconvénients
- Il ne s'agit pas d'une perception linéaire (comme l'est
lch()). - Pas de couleurs larges.
- Les gradients 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 avec 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 de lumière, par exemple.
Inconvénients
- Elle n'est pas linéaire d'un point de vue perceptuel.
- Le noir et le blanc sont emplis 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 sont abordés en détail ultérieurement, mais il est rapidement utile de voir un dégradé noir à blanc de srgb et linear-srgb pour illustrer leurs différences:
LCH
LCH introduit une syntaxe permettant d'accéder aux couleurs en dehors de la gamme RVB. Il s'agit également de la première méthode permettant de créer très facilement des couleurs hors gamme pour un écran. En effet, toutes les couleurs de l'espace CIE (lch, oklch, lab, oklab) peuvent représenter l'intégralité du spectre de couleurs visible par l'homme.
Cet espace colorimétrique est modélisé d'après la vision humaine et propose une syntaxe permettant de spécifier ces couleurs, entre autres. Les canaux LCH sont la luminosité, la chrominance et la teinte. La teinte est un angle, comme dans HSL et HWB. La luminosité est une valeur entre 0 et 100. Il s'agit d'une légèreté spéciale "perceptuellement linéaire", centrée sur l'humain. La chrominance est semblable à la saturation : elle peut varier de 0 à 230, mais techniquement, elle n'est pas limitée.
Avantages
- Manipulation des couleurs prévisible, principalement linéaire (voir oklch).
- Utilise des canaux familiers.
- présentent souvent des dégradés éclatants.
Inconvénients
- Il est facile de sortir de la gamme.
- Dans de rares cas, le dégradé peut nécessiter un point d'ajustement au milieu pour empêcher le décalage de la 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);
}
ATELIER
Un autre espace colorimétrique a été créé pour accéder à la gamme CIE, là encore avec une dimension de luminosité (L) perceptuellement linéaire. Dans LAB, A et B représentent les axes uniques de la vision des couleurs chez l'être humain: rouge-vert et bleu-jaune. Lorsqu'une valeur est attribuée à A, le rouge ajoute du rouge, et du vert lorsqu'il est inférieur à 0. Lorsqu'un nombre positif est attribué à B, il ajoute du jaune, les valeurs négatives étant vers le bleu.
Avantages
- Dégradés de cohérence perceptuelle.
- HDR (High Dynamic Range)
Inconvénients
- Possibilité de changement de teinte.
- Difficile de créer ou de deviner une couleur manuellement 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
Cet espace colorimétrique correctifie le LCH. Et comme LCH, (L) continue de représenter la luminosité perçue comme linéaire, C pour la chroma et le H pour la teinte.
Cet espace vous semble familier si vous avez travaillé avec HL ou LCH. Choisissez un angle sur la roue chromatique pour H, choisissez une valeur de luminosité ou d'obscurité en ajustant L, mais vous obtenez ensuite la chrominance au lieu de la saturation. Ils sont assez identiques, sauf que les ajustements de luminosité et de chrominance ont tendance à se faire par deux, ou il peut être facile de demander des couleurs à chrominance élevée qui sortent d'une gamme cible.
Avantages
- Aucune surprise lorsque vous travaillez avec des tons bleus et violets.
- La luminosité perceptuellement linéaire.
- Utilise des canaux familiers.
- HDR (High Dynamic Range)
- Dispose d'un sélecteur de couleur moderne conçu 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
Cet espace correctifie l'atelier. Il est considéré comme un espace optimisé pour la qualité du traitement d'image également, ce qui, pour nous, dans CSS, signifie la qualité des dégradés et de la manipulation des fonctions de couleur.
Avantages
- Espace par défaut pour les animations et les interpolations.
- La luminosité perceptuellement linéaire.
- Pas de changement de teinte contrairement à LAB.
- Dégradés de cohérence perceptuelle.
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);
}
Écran P3
La gamme et l'espace colorimétrique d'écran P3 sont devenus populaires depuis qu'Apple les prend en charge depuis 2015 sur son iMac. Apple a également pris en charge le display-p3 dans les pages Web via CSS depuis 2016, soit cinq ans d'avance sur tout autre navigateur. Si vous optez pour une stratégie sRVB, cet espace de couleurs est idéal lorsque vous déplacez des styles vers une plage dynamique supérieure.
Avantages
- Excellente assistance, considéré comme la référence pour les écrans HDR.
- 50% de couleurs en plus par rapport au mode sRVB.
- Les outils de développement offrent un excellent sélecteur de couleur.
Inconvénients
- Sera à terme dépassé 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
Rec2020 fait partie du passage à UHDTV (télévision ultra haute définition), qui fournit une large gamme de couleurs à utiliser sur les contenus 4K et 8K. Rec2020 est une autre gamme basée sur RVB, plus grande que les écrans P3, mais pas aussi fréquente que les écrans P3.
Avantages
- Couleurs Ultra HD.
Inconvénients
- Pas (encore) aussi courante chez les consommateurs.
- On le trouve rarement sur les appareils portables ou 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);
}
A98 RVB {#a98-rgb}
Abréviation d'Adobe 1998 RVB, A98 RVB a été créé par Adobe pour afficher la plupart des couleurs des imprimantes CMJN. Il offre plus de couleurs que le mode sRVB, en particulier dans les tons cyan et vert.
Avantages
- Plus grande que les espaces colorimétriques sRVB et Display P3.
Inconvénients
- Il ne s'agit pas d'un espace commun où des concepteurs numériques y ont travaillé.
- Peu de gens utilisent les palettes 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 RVB
Créé par Kodak, cet espace à large gamme offre des couleurs primaires très larges de manière unique et présente des changements de teinte minimaux lors du changement de luminosité. Il prétend également couvrir 100% des couleurs de surface réelles, comme l'a indiqué Michael Pointer en 1980.
Avantages
- La teinte minimale change lors de la modification de 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 pour l'homme.
.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 et XYZ-D65
L'espace colorimétrique de 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 couleur. Y est la luminance, X et Z sont des chromas possibles dans la luminance Y donnée.
La différence entre d50 et d65 réside dans le point blanc, d50 utilisant les points blancs D50 et d65 le point blanc D65.
Clé-Terme: le point blanc est un attribut d'un espace colorimétrique, c'est-à-dire l'endroit où le véritable blanc existe dans l'espace. Pour les écrans électroniques, D65 est le point blanc le plus courant, et il est l'abréviation de 6 500 kelvins. Lors de la conversion des couleurs, il est important que les points blancs correspondent afin que la température des couleurs (chaleur ou froid) ne soit pas affectée.
Avantages
- L'accès à la lumière linéaire présente des cas d'utilisation pratiques.
- Idéal pour mélanger les couleurs.
Inconvénients
- qui ne sont pas perceptuellement linéaires, comme le sont 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 prévoit é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 les couleurs chargées, accédez aux couleurs de ce profil personnalisé à l'aide de la fonction color() et spécifiez les valeurs de canal pour ce profil.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Interpolation de couleur
La transition d'une couleur à une autre se trouve dans l'animation, les dégradés et le mélange de couleurs. Cette transition est généralement spécifiée en tant que couleur de départ et couleur de fin, le navigateur devant effectuer une interpolation entre elles. Dans ce cas, l'interpolation consiste à générer une série de couleurs entre les couleurs pour créer une transition en douceur au lieu d'une transition 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 s'affichent toutes en même temps:
Nouveautés de l'interpolation des couleurs
Avec l'ajout de nouvelles gammes et espaces de couleur, de nouvelles options d'interpolation sont disponibles. La transition d'une couleur in hsl du bleu au blanc produit un résultat très différent du sRVB.
.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 ensuite si vous passez d'une couleur d'un espace à une couleur située 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 façon de gérer ces interpolations d'espace de couleurs croisées. Pour .gradient, les navigateurs remarquent les espaces de couleur différenciés et utilisent l'espace colorimétrique par défaut oklab.
Vous pensez peut-être que le navigateur utilisera lch comme espace colorimétrique, puisqu'il s'agit de la première couleur, mais ce n'est pas le cas. C'est pourquoi j'affiche un deuxième gradient de comparaison : .lch. Le dégradé .lch est un dégradé de l'espace colorimétrique lch.
Moins de bandes grâce aux couleurs 16 bits
Avant ce travail de couleur, 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 alpha). 2 ^ 24 = 16 777 216, "millions de couleurs".
Après ce travail de couleur (quatre valeurs à virgule flottante de 16 bits), chaque canal a son propre flottant au lieu d'être regroupé. Cela représente 64 bits de données au total, soit beaucoup plus de millions de couleurs.
Cette opération est nécessaire pour prendre en charge les couleurs HD. Cela augmente la quantité d'informations de couleur pouvant être stockées, ce qui a pour effet secondaire de signifier que le navigateur peut utiliser plus de couleurs dans un dégradé.
On parle de "bandes en dégradés de couleurs" lorsqu'il n'y a pas assez de couleurs pour créer un dégradé lisse et que des "rayures" de couleur deviennent visibles. Les bandes sont fortement atténuées grâce à la mise à niveau vers une résolution de couleur plus élevée.
Interpolation de contrôle
La distance la plus courte entre deux points est toujours une ligne droite. Avec l'interpolation des couleurs, les navigateurs empruntent par défaut l'itinéraire court. Prenons l'exemple d'un cylindre de couleur HSL contenant deux points. Un dégradé acquiert ses pas de couleur en se déplaçant le long de la ligne entre les deux points.
linear-gradient(to right, #94e99c, #e06242)
Vue plongeante d'un cylindre HSL avec une ligne entre les arrêts de couleur
La ligne de dégradé ci-dessus passe directement de la couleur verdâtre au rouge, en passant par le centre de l'espace colorimétrique. Bien que ce qui précède puisse vous aider à comprendre initiales, il 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 l'a montré la démonstration.
Cependant, la zone centrale du dégradé a perdu son éclat. En effet, les couleurs les plus vives se trouvent au bord de la forme de l'espace colorimétrique, et non au centre de la zone proche de laquelle l'interpolation a parcouru. Cette zone est communément appelée zone morte. Il existe plusieurs façons de résoudre ce problème ou de le contourner.
Spécifier davantage d'arrêts de dégradé pour éviter la zone morte
Aujourd'hui, une technique pour éviter la zone morte consiste à ajouter des points de couleur supplémentaires dans le dégradé qui guident intentionnellement l'interpolation afin de rester dans les plages dynamiques d'un espace de couleur. Il s'agit littéralement d'une solution de contournement, car les arrêts supplémentaires l'aident à contourner la zone morte.
Il existe un outil de dégradé créé par Erik Kennedy qui calcule des arrêts de couleur supplémentaires pour vous afin de vous aider à éviter la zone morte, même dans les espaces de couleur qui ont tendance à gravir vers elle. En l'utilisant, en transmettant les mêmes couleurs que dans le premier exemple, mais en changeant l'interpolation des couleurs en HSL, il produit ce qui suit:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Vue plongeante d'un cylindre HSL avec une ligne incurvée comportant 9 arrêts de couleur
Avec les points d'arrêt guidés, l'interpolation n'est plus une ligne droite, mais semble courbe autour de la zone morte, contribuant ainsi à maintenir la saturation, ce qui donne un gradient beaucoup plus éclatant.
Bien que l'outil soit efficace, que se passerait-il si vous pouviez disposer d'un contrôle similaire ou supérieur directement à partir du CSS ?
Diriger l'interpolation de couleur
Dans la couleur 4, la possibilité de contrôler la stratégie d'interpolation de teinte a été ajoutée et constitue une nouvelle façon de contourner (:wink:) la zone morte. Pensez à un angle de teinte et envisagez un dégradé à deux arrêts qui ne modifie que l'angle, en passant de la teinte de 140deg à 240deg, par exemple.
Interpolation de teinte plus courte ou plus longue
Par défaut, le dégradé emprunte l'itinéraire shorter tel qu'il est possible, sauf si vous lui demandez d'emprunter l'itinéraire longer. Les options d'interpolation des teintes dirigent la rotation de l'angle, par exemple en demandant à quelqu'un de tourner à gauche au lieu de droite (heh, Zoolander):
Dans l'exemple de distances d'interpolation de teinte, le tracé court et le tracé long sont simulés pour illustrer la différence. La courte distance a moins de teintes entre les deux, car elle est parcourue sur la distance la plus faible possible, lorsque la longue distance a parcouru plus de teintes.
Interpolation de teinte croissante et décroissante
Il existe deux autres stratégies d'interpolation de teinte dans Color 4, mais elles sont exclusives pour les espaces de couleur cylindriques. En conservant les deux couleurs des exemples précédents, l'élément visuel montre maintenant comment fonctionne l'augmentation et la diminution.
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 clore l'interpolation de teinte, voici un terrain de jeu ludique où vous pouvez modifier la teinte entre deux arrêts de couleur et observer 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. C'est le cas des quatre nouvelles astuces qui viennent d'être ajoutées à votre barre d'outils des couleurs.
Dégradés dans différents espaces de couleurs
Chaque espace de couleur, en raison de sa forme et de sa disposition de couleurs uniques, génère un dégradé différent. Dans les exemples suivants, regardez comment chaque espace colorimétrique gère cela différemment, en particulier du bleu au blanc. Notez le nombre d'entre eux qui deviennent violets au milieu. C'est ce qu'on appelle un changement de teinte lors de l'interpolation.
Dans ces espaces, certains gradients sont plus dynamiques que d'autres ou traversent moins de zones mortes.
Les espaces comme lab regroupent les couleurs de manière optimisée pour la saturation, par opposition aux espaces optimisés pour l'écriture de couleur par l'humain, 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 subtile dans les résultats, montre une interpolation plus cohérente avec l'atelier. La syntaxe de l'atelier n'est toutefois pas simple à lire. Certains nombres négatifs sont très peu familiers avec les commandes rgb ou 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 colorimétrique, 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 pour hwb, mais spécifie l'espace colorimétrique pour l'interpolation avec hwb ou oklab. hwb est un espace de couleurs idéal pour les couleurs vives, mais les zones mortes ou les points lumineux possibles (voir le point chaud cyan dans l'exemple du haut). oklab est idéal pour les dégradés perceptuellement linéaires qui restent saturés. Cette fonctionnalité est très amusante, car vous pouvez essayer différents espaces de couleur pour voir quel dégradé vous préférez.
Voici un codepen testant les dégradés et les espaces de couleur, ainsi que des stratégies de mélange et d'association pour explorer les possibilités. Même une transition du noir au blanc est différente dans chaque espace colorimétrique !
Limitation de la portée
Il existe des scénarios dans lesquels une couleur peut demander quelque chose en dehors d'une gamme. Considérez la couleur suivante:
rgb(300 255 255)
La valeur maximale d'un canal de couleur dans l'espace colorimétrique rgb est de 255, mais ici, 300 a été spécifié pour le rouge. Que se passe-t-il ? Limitation de la portée.
On parle de pincement lorsque des informations supplémentaires sont simplement supprimées. 300 devient 255 en interne dans le moteur de couleur. La couleur est maintenant fixée dans son espace.
Choisir un espace colorimétrique
Après avoir découvert ces espaces de couleur et leurs effets, de nombreuses personnes se sentent submergées et veulent savoir laquelle choisir. D'après mes études et mon expérience, je ne vois pas un seul espace de couleur comme un seul espace de couleur pour toutes mes tâches. Chacune d'entre elles est associée à des moments où elles produisent le résultat souhaité.
S'il y avait un meilleur espace, il n'y aurait pas beaucoup de nouveaux espaces introduits.
Toutefois, je peux dire que les espaces CIE (lab, oklab, lch et oklch) sont mes points de départ. Si le résultat n'est pas ce que je recherche, je vais tester d'autres espaces. Pour mélanger les couleurs et créer des dégradés, je suis d'accord avec le choix de la spécification par défaut de oklab. Pour les systèmes de couleurs et les couleurs de l'interface utilisateur, j'aime bien oklch.
Voici quelques articles dans lesquels des utilisateurs ont partagé leurs nouvelles stratégies de couleur compte tenu de ces nouveaux espaces de couleur et fonctionnalités. Par exemple, Andrey Sitnik
a tout fait sur oklch, il va peut-être vous convaincre de faire de même:
- OKLCH en CSS: pourquoi nous sommes passés des formats RVB et HSL par Andrey Sitnik
- Color Formats de Josh W. Comeau
- OK, OKLCH de Chris Coyier
Étapes suivantes
Maintenant que vous connaissez les nouveaux espaces de couleur et les nouveaux outils, vous pouvez migrer vers la couleur HD.
Des manipulations et interpolations plus cohérentes, ainsi que des couleurs plus vives, offrent globalement une expérience plus colorée à vos utilisateurs.
Découvrez d'autres ressources de couleur dans le guide.