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

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

La couleur CSS 4 présente de nombreuses et des outils pour CSS et la couleur. Le codepen suivant présente toutes les nouvelles et l'ancienne syntaxe de couleur:

Consultez le récapitulatif des espaces de couleurs classiques.

La spécification de niveau 4 a introduit 12 Nouveaux espaces de couleur pour la recherche de couleurs, parmi les sept nouvelles gammes partagées précédemment:

• Linéaire sRVB
• LCH
• okLCH
• LAB
• okLAB
• Écran p3
• Rec2020
• a98 RVB
• ProPhoto RVB
• XYZ
• XYZ D50
• XYZ D65

Découvrez les nouveaux espaces colorimétrique pour le Web

Les espaces de couleur suivants permettent d'accéder à une gamme plus large que le format sRVB. La l'espace colorimétrique display-p3 offre presque deux fois plus de couleurs que le RVB, tandis que le modèle Rec2020 offre presque deux fois plus que le format display-p3. Ça fait beaucoup de couleurs !

Fonction color()

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

Les nouvelles color() peut être utilisée pour tout espace colorimétrique spécifiant les couleurs avec R, V et B canaux de distribution. color() prend d'abord un paramètre d'espace colorimétrique, puis une série de de canal RVB et, éventuellement, de alpha.

Vous constaterez qu’un grand nombre des nouveaux espaces de couleur utilisent cette fonction parce que les fonctions spécialisées comme rgb, srgb, hsl, hwb, etc., devenait une longue liste, il est plus facile d'avoir l'espace colorimétrique comme paramètre.

Avantages

• Espace normalisé permettant d'accéder aux espaces de couleur utilisant des canaux RVB.
• Possibilité d'effectuer un scaling à la hausse dans n'importe quel espace colorimétrique RVB à large gamme

Inconvénients

• Ne fonctionne pas avec 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 se trouver dans sRGB Gamut, Display P3 Gamut ou Rec2020 Gamut. Jusqu'à 77,6% du spectre visible.

sRVB via color()

Cet espace colorimétrique offre les mêmes caractéristiques que rgb(). Il offre en outre décimales comprises entre 0 et 1, utilisées exactement comme 0% à 100%.

Avantages

• Presque tous les écrans sont compatibles avec cette gamme de couleurs.
• Prise en charge des outils de conception.

Inconvénients

• Pas perçu comme linéaire (comme l'est lch())
• Pas de couleurs larges.
• Les gradients traversent souvent 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-s rgb}

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

Avantages

• Accès direct aux canaux RVB, pratique pour les jeux tels que les moteurs de jeu ou les jeux de lumière.

Inconvénients

• Pas perçu comme linéaire.
• Le noir et le blanc sont tassé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 gradients sont abordés en détail ultérieurement. mais il est très important de voir rapidement des valeurs srgb et linear-srgb en noir et blanc. pour illustrer leurs différences:

LCH

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

LCH introduit une syntaxe pour accéder aux couleurs en dehors de la gamme RVB. C’est aussi le premier pour qu'il soit très facile de créer pour un affichage. En effet, toutes les couleurs d'espace CIE (lch, oklch, lab, oklab) peut représenter l'ensemble du spectre de couleurs visible par l'humain.

Cet espace colorimétrique s'inspire de la vision humaine et offre pour spécifier l'une de ces couleurs et plus encore. Les canaux LCH sont la légèreté, de chrominance et de teinte. Teinte étant un angle, comme dans HSL et HWB. La luminosité est une valeur compris entre 0 et 100. Il s'agit d'un élément spécial « perceptuellement linéaire », centré sur l'humain légèreté. La chrominance est semblable à la saturation. il peut être compris entre 0 et 230, mais techniquement illimité.

Avantages

• Manipulation des couleurs prévisible grâce à un aspect perçu comme linéaire, dans la plupart des cas (voir oklch).
• Elle utilise des canaux familiers.
• présente souvent des dégradés intenses.

Inconvénients

• Il est facile de sortir de la gamme.
• Dans de rares cas, il peut être nécessaire d'ajuster le point central du dégradé 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'affichage. Attention avec des valeurs C de chrominance élevées.

ATELIER

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

Un autre espace de couleur conçu pour accéder à la gamme CIE, là encore avec une couche de perception de luminosité linéaire (L). A et B dans LAB représentent les axes uniques de la vision des couleurs humaines: rouge-vert et bleu-jaune. Lorsque A reçoit une valeur positive elle ajoute du rouge et ajoute du vert lorsqu'elle est inférieure à 0. Lorsque B reçoit un nombre positif il ajoute le jaune, où les valeurs négatives se rapprochent du bleu.

Avantages

• Gradients perceptibles de cohérence.
• HDR (High Dynamic Range)

Inconvénients

• Possibilité de changement de teinte.
• Difficile de rédiger à la main l'auteur ou de deviner une couleur 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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

Cet espace colorimétrique permet de corriger LCH. Et comme LCH, (L) continue de représenter la luminosité perceptuellement linéaire, C pour la chrominance et le H pour la teinte.

Cet espace vous semble familier si vous avez travaillé avec TSL ou LCH. Choisissez un angle sur la roue chromatique pour H, une luminosité ou la quantité d'obscurité en ajustant L, puis nous obtenons la chrominance au lieu de la saturation. Ils sont assez identiques, sauf que les ajustements de la luminosité et de la chrominance ont tendance à par deux. Sinon, il peut être facile de demander des couleurs de chrominance élevée en dehors d'une gamme cible.

Avantages

• Pas de surprise lorsque vous travaillez avec des teintes bleues et violettes.
• Légèreté perçue comme linéaire.
• Elle utilise des canaux familiers.
• HDR (High Dynamic Range)
• Dispose d'un sélecteur de couleur moderne, 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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

Cet espace correctif pour l'atelier Il est présenté comme un espace optimisé pour la qualité du traitement des images, en CSS signifie les dégradés et la qualité de la manipulation des fonctions de couleur.

Avantages

• Espace par défaut pour les animations et les interpolations.
• Légèreté perçue comme linéaire.
• Pas de changement de teinte comme LAB.
• Gradients perceptibles de cohérence.

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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

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

La gamme et l'espace colorimétrique de l'écran P3 sont devenus populaires depuis la prise en charge par Apple depuis 2015 sur leur iMac. Apple accepte également le format display-p3 dans les pages Web via CSS depuis 2016, cinq des années d'avance sur tout autre navigateur. Si vous utilisez le format sRVB, il s'agit d'une superbe couleur. pour commencer à travailler lorsque vous déplacez les styles vers une plage dynamique supérieure.

Avantages

• Excellente prise en charge, considérée comme la référence pour les écrans HDR.
• 50% de couleurs en plus que le format 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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

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

Rec2020 s'inscrit dans le mouvement vers la télévision UHDTV (télévision ultra-haute définition), offre une large gamme de couleurs pour les contenus multimédias 4K et 8K. Rec2020 est une autre Gamme de produits basée sur le RVB, plus grande que celle du format display-p3, mais qui n'est pas aussi courante aux consommateurs en tant que Display P3.

Avantages

• Coloris Ultra HD.

Inconvénients

• Ce n'est pas (encore) aussi courant chez les consommateurs.
• Cette fonctionnalité n'est pas couramment utilisée 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}

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

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

Abréviation d'Adobe 1998 RVB, A98 RVB a été créé par Adobe pour présenter la plupart des couleurs atteignables avec les imprimantes CMJN. Il offre plus de couleurs que le format sRVB, dans les tons cyan et vert.

Avantages

• Plus grande que les espaces de couleurs sRVB et Display P3.

Inconvénients

• Les concepteurs numériques n'ont pas travaillé dans un espace commun.
• Peu de gens portent des 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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

Remarque :Les couleurs se trouvent dans ProPhoto Gamut. 90% du spectre visible.

Créé par Kodak, cet espace à large gamme offre une portée unique de code primaire couleurs et fonctionnalités avec un décalage de teinte minimal lorsque vous modifiez la luminosité. Elle prétend également couvrir 100% des couleurs de surface réelles tel qu'indiqué par Michael Pointer en 1980.

Avantages

• La teinte minimale change lorsque la luminosité change.
• Couleurs primaires vives.

Inconvénients

• Environ 13% des couleurs proposées sont imaginaire, qui signifie et non dans le spectre visible par l'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

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 111
• <ph type="x-smartling-placeholder"></ph> 113
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

Remarque:Les couleurs se trouvent dans HVS Gamut. 100% du spectre visible humain (HVS).

L'espace colorimétrique CIE XYZ englobe toutes les couleurs visibles par une personne ayant une vue moyenne. C'est pourquoi elle sert de référence standard pour d'autres couleurs. des espaces. Y est la luminance, X et Z sont des chromages possibles à l'intérieur d'un Y donné. luminance.

La différence entre d50 et d65 correspond au point blanc, où d50 utilise le point d50 points blancs, et d65 utilise le point blanc D65.

Terme clé: le point blanc est l'attribut d'un espace colorimétrique, c'est là que du vrai blanc existe dans l'espace. Pour les écrans électroniques, le D65 est le modèle le plus et le point blanc commun. C'est l'abréviation de 6 500 kelvins. C’est important en couleur conversion de points blancs correspondant à la température des couleurs (chaleur ou froid) ne sont pas affectées.

Avantages

• L'accès linéaire à la lumière présente des cas d'utilisation pratiques.
• Idéal pour le mélange physique des couleurs.

Inconvénients

• Elles ne sont pas perceptuelles linéaires 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 comporte également un pour indiquer au navigateur un espace colorimétrique personnalisé. Il s'agit d'un profil ICC qui indique au navigateur pour résoudre les couleurs.

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

Une fois le chargement terminé, accédez aux couleurs de ce profil personnalisé avec la fonction color(). et spécifier les valeurs de canal correspondantes.

.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 mélange des couleurs. Cette transition est généralement spécifiée comme couleur de départ et comme valeur la couleur de fin, où le navigateur est censé interpoler entre elles. Dans ce cas, interpoler signifie générer une série de couleurs intermédiaires pour créer une transition en douceur plutôt qu'instantanée.

Avec un dégradé, l'interpolation est une série de couleurs le long d'une forme. Avec 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 en même temps:

Nouveautés de l'interpolation des couleurs

Avec l'ajout de nouvelles gammes et espaces de couleur, pour l'interpolation. Faire passer une couleur in hsl du bleu au blanc donne un résultat très différent de 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 dans un espace à une couleur dans une 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 couleur Color 4 comporte des instructions pour les navigateurs sur la façon de gérer ces les interpolations de l'espace colorimétrique. Pour .gradient, les navigateurs remarquent les différences et utiliser l'espace colorimétrique par défaut oklab.

Vous pensez peut-être que le navigateur utiliserait lch comme espace colorimétrique, puisqu'il s'agit de 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 colorimétrique lch.

Moins de bandes grâce à la couleur 16 bits

Auparavant, toutes les couleurs étaient enregistrées dans un entier 32 bits dans représenter les quatre canaux ; rouge, vert, bleu et alpha. soit 8 bits par canal et 2^ 24 couleurs possibles (en ignorant la valeur alpha). 2 ^ 24 = 16 777 216, « des millions de couleurs ».

Après le travail de la couleur, quatre valeurs à virgule flottante de 16 bits, chaque canal a sa propre flotte au lieu d’être regroupées. Cela correspond à un total de 64 bits de données, ce qui donne beaucoup plus de millions de couleurs.

Ce travail est nécessaire pour prendre en charge la couleur HD. Cela augmente la quantité de couleur d'informations qui peuvent être stockées, ce qui signifie qu'il y a plus de couleurs que le navigateur peut utiliser dans un dégradé.

Les bandes en dégradé se produisent lorsqu'il n'y a pas assez de couleurs pour créer un dégradé fluide et "bandes" de couleur deviennent visibles. La présence de bandes est fortement atténuée passer à une couleur dans une résolution plus élevée.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Source de l'image

Contrôler l'interpolation

La distance la plus courte entre deux points est toujours une ligne droite. De couleur les navigateurs empruntent l'itinéraire le plus court par défaut. Envisagez un scénario où il y a deux points dans un cylindre de couleur TSL. Un gradient acquiert pas de couleur en se déplaçant le long de la ligne entre les deux points.

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> (démonstration fictive)
Vue plongeante d'un cylindre TSL avec une ligne entre les arrêts de couleur

La ligne de dégradé ci-dessus va directement entre la couleur verdâtre et le rougeâtre. couleur, en passant par le centre de l’espace colorimétrique. Même si ce qui précède est très utile pour faciliter la compréhension initiale, ce n'est pas exactement ce qui se passe. Voici les un dégradé dans le Codepen suivant, et il n'est clairement pas blanc au milieu, comme que la démonstration fictive a montrée.

Cependant, la zone centrale du gradient a perdu de sa brillance. En effet, les couleurs les plus vives se trouvent au bord de la forme de l'espace colorimétrique, et non dans la à proximité où l'interpolation s'est produite. Ceci est communément appelé la zone morte. Il y il y a quelques 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

Aujourd'hui, pour éviter la zone morte, une technique consiste à ajouter des arrêts de couleur supplémentaires dans le gradient qui guide intentionnellement l'interpolation pour respecter des plages éclatantes d'un espace colorimétrique. Il s'agit littéralement d'une solution de contournement, des arrêts supplémentaires l'aident à contourner la zone morte.

Il existe un outil de dégradé créé par Erik Kennedy qui calcule les couleurs supplémentaires s'arrête pour vous, afin d'éviter la zone morte, même dans les espaces colorimétrique graviter autour d'elle. L'utiliser, en transmettant les mêmes couleurs que dans le premier exemple mais en remplaçant l'interpolation des couleurs par HSL, le résultat est le suivant:

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> (démonstration fictive)
Vue du dessus d'un cylindre TSL avec une ligne incurvée et neuf arrêts colorés

Avec les points d'arrêt guidés, l'interpolation n'est plus une ligne droite, semble être incurvée autour de la zone morte, contribuant ainsi à maintenir la saturation, entraînant ainsi un dégradé beaucoup plus intense.

Bien que cet outil soit très efficace, que se passerait-il si vous pouviez disposer de ressources similaires directement depuis CSS ?

Diriger l'interpolation des couleurs

Avec Color 4, possibilité de contrôler la stratégie d'interpolation des teintes a été ajoutée et permet de contourner (:wink:) la zone morte. Réfléchissez à une teinte un angle avec un dégradé en deux étapes qui ne change que l'angle, le passage de 140deg à 240deg, par exemple.

Interpolation des teintes plus courte ou plus longue

Par défaut, le dégradé prend la shorter peut l'acheminer à moins que vous spécifiez pour qu'il prenne longer. Teinte les options d'interpolation orientent la rotation de l'angle, par exemple en demandant à quelqu'un de tourner gauche au lieu de droite (Hé, Zoolander):

Dans l'exemple des distances d'interpolation des teintes, le chemin court et le long chemin sont simulés pour illustrer la différence. La courte distance a moins de teintes entre elle, car elle parcourt le moins de distance possible possible, où la longue distance a traversé plus de teintes.

Interpolation de teinte croissante ou décroissante

Il existe deux autres stratégies d'interpolation des teintes dans Couleur 4, exclusivement pour les modèles cylindriques des espaces colorimétriques. En reprenant les deux couleurs des exemples précédents, montre comment l'augmentation et la diminution fonctionnent.

Le codepen ci-dessus a utilisé ColorJS pour démontrer résultat attendu. Le code CSS que vous écrivez pour obtenir le même effet La bibliothèque JavaScript serait la suivante:

.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 des teintes, voici un terrain de jeu amusant dans lequel vous pouvez modifier entre deux arrêts de couleur et observez les effets d'un choix d'interpolation des couleurs et la façon dont les espaces de couleur changent les résultats du dégradé. Les effets peuvent être très different; Considérez cela comme quatre nouvelles astuces qui viennent d'être ajoutées à votre boîte à outils couleur.

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

Chaque espace de couleur, compte tenu de sa forme et de sa disposition de couleurs uniques, donne un dégradé différent. Dans les exemples suivants, regardez comment chaque espace colorimétrique gère cela différemment, surtout du bleu au blanc. Remarquez combien deviennent violettes au milieu ; c'est ce qu'on appelle un changement de teinte lors de l'interpolation.

Dans ces espaces, certains dégradés sont plus éclatants que d'autres ou se déplacent moins. par les zones sans Wi-Fi. Les espaces comme lab regroupent les couleurs afin d'optimiser la saturation, par opposition aux espaces optimisés pour que les humains écrivent la couleur 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émo ci-dessus, bien que subtile dans les résultats, montre des résultats plus cohérents avec l'interpolation "lab". La syntaxe de cet atelier n'est cependant pas simple à lire, des nombres négatifs très inconnus provenant de rvb ou hsl. Satisfaisante nous pouvons utiliser hwb pour une syntaxe familière, mais demander que le gradient soit entièrement interpolée 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 dans hwb, mais spécifie l'espace colorimétrique pour avec l'interpolation "hwb" ou "oklab". hwb est un excellent espace de couleurs pour les hautes mais il peut aussi y avoir des zones mortes ou lumineuses (voir la zone cyan exemple). oklab est idéal pour les dégradés perçus comme linéaires saturé. Cette fonctionnalité est très amusante, car vous pouvez essayer différentes couleurs pour voir quel dégradé vous préférez.

Voici un Codepen qui expérimente les dégradés et les espaces colorimétriques, des stratégies de correspondance pour explorer les possibilités. Même la transition entre le noir au blanc est différent 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. Prenons la couleur suivante:

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 ? Limitation de l'enjeu.

Le blocage consiste simplement à supprimer des informations supplémentaires. 300 devient 255. en interne au moteur de couleur. La couleur a maintenant été fixée dans son espace.

Choisir un espace colorimétrique

Beaucoup de gens, après avoir découvert ces espaces de couleur et leurs effets, ressentent dépassé et veulent savoir lequel de votre choix. De mes études et expérience, je ne vois pas un espace de couleur comme celui unique pour toutes mes tâches. Chaque a des moments où ils produisent le résultat souhaité.

S'il y avait un meilleur espace, il n'y aurait pas beaucoup de nouveaux espaces présenté.

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

Voici quelques articles dans lesquels d'autres personnes ont partagé leur nouvelle couleur stratégies tenant compte de ces nouveaux espaces colorimétrique et fonctionnalités. Exemple : Andrey Sitnik a donné le meilleur de oklch, il vous convaincrea peut-être de faire de même:

1. OKLCH en CSS: pourquoi nous sommes passés des formats RVB et HSL Andrey Sitnik
2. Formats de couleurs par Josh W. Comeau
3. OKLCH par Chris Coyier

Étapes suivantes

Maintenant que vous connaissez les nouveaux espaces de couleur et outils, vous pouvez migrer vers la couleur HD.

Plus de vibrance, des manipulations et interpolations cohérentes et un résultat global une expérience plus colorée à vos utilisateurs.

En savoir plus sur les ressources sur les couleurs dans le guide.