CSS Color 4 propose sur le Web une large gamme d'outils de couleur et de fonctionnalités: plus de couleurs, plus de fonctions de manipulation et de meilleurs dégradés.
Depuis plus de 25 ans, sRGB (bleu-vert standard) est la seule gamme de couleurs pour les dégradés et couleurs CSS, avec des espaces de couleur tels que rgb(), hsl() et hexadécimal. Il s'agit de la fonctionnalité de gamme de couleurs la plus courante parmi les écrans. Il s'agit d'un dénominateur commun. Nous sommes habitués à spécifier des couleurs au sein de cette gamme.
À mesure que les écrans deviennent plus capables d'afficher une large gamme de couleurs, CSS a besoin d'un moyen de spécifier des couleurs dans ces plages plus larges. Les formats de couleurs actuels n'ont pas de langue pour les larges gammes de couleurs.
Si le CSS n'était jamais mis à jour, il resterait indéfiniment bloqué dans les plages de couleurs des années 90, ne jamais correspondre aux offres très larges des images et des vidéos. Contenu piégé : seules 30% des couleurs visibles par l'œil humain sont visibles. Remerciez le CSS Color Level 4 pour nous aider à nous échapper de ce piège. Cet article a été principalement rédigé par Lea Verou et Chris Lilley.
Chrome 111 prend en charge les gammes et espaces de couleur CSS Color 4, ajout à Safari qui prend en charge display-p3 depuis 2016. Le CSS est désormais compatible avec les affichages HD (haute définition) en spécifiant les couleurs des gammes HD tout en proposant des espaces colorimétriques avec des spécialisations. Ce guide vous explique comment tirer parti de ce nouvel univers de couleurs.
Essayer vous-même
Dans les navigateurs compatibles, 50% de couleurs en plus sont disponibles ! Vous pensiez que 16 millions de couleurs ressemblait à beaucoup, attendez de voir combien de couleurs certains de ces nouveaux espaces peuvent afficher. Pensez également à tous les gradients qui ont été représentés par bandes, car la profondeur de bits était insuffisante. Le problème est résolu.
En plus de l'ajout de couleurs sans doute les plus vives possibles pour l'écran, les nouveaux espaces de couleurs offrent des outils et des méthodes uniques pour gérer et créer des systèmes de couleurs. Par exemple, nous disposions auparavant de HSL et de son canal "léger", qui était les meilleurs développeurs Web. En CSS, nous avons maintenant la "luminosité perceptuelle" de LCH.
De plus, les dégradés et le mélange bénéficient de quelques améliorations: prise en charge de l'espace colorimétrique, options d'interpolation de teinte et réduction des bandes. L'image suivante montre certaines des mises à niveau mixtes. Les deux premiers mélanges de couleurs sont en sRVB. Les deux mélanges de couleurs du bas sont en écran P3. L'écran P3 a des couleurs plus vives, et les mélanges génèrent un noir et blanc complet au milieu. Le sRVB semble un peu désaturé et les mix du milieu ne sont pas des résultats noirs ou blancs complets.
https://codepen.io/web-dot-dev/pen/poZgXQb
Ce guide explique où les couleurs sont passées, où elles vont et comment CSS permettra aux développeurs Web de gérer les couleurs et les aidera à le faire.
Présentation
Le problème avec la couleur et le Web est que le CSS n'est pas compatible avec la haute définition, alors que les écrans que la plupart des utilisateurs ont dans leur poche, sur leurs tours ou sur des murs ont une large gamme et sont compatibles avec les couleurs haute définition. La capacité des couleurs des écrans s'est développée plus rapidement que CSS. Le CSS peut désormais rattraper son retard.
Il y a bien plus que « plus de couleurs ». À la fin de cet article, vous serez en mesure de spécifier plus de couleurs, d'améliorer les dégradés et de choisir les meilleurs espaces de couleurs et gammes de couleurs pour chaque tâche.
Qu'est-ce qu'une gamme de couleurs ?
Une gamme représente la taille de quelque chose. L'expression "millions de couleurs" est un commentaire sur la gamme d'un écran ou la gamme de couleurs dans laquelle il doit choisir. Dans l'image ci-dessous, trois gammes sont comparées. Plus la taille est grande, plus elle offre de couleurs.
Une gamme de couleurs peut également avoir un nom. Comme un ballon de basket contre une balle de base-ball ou une tasse de café vente contre un grand ; un nom pour la taille peut aider les gens à communiquer. L'apprentissage de ces noms de gamme de couleurs vous aide à communiquer et à comprendre rapidement une gamme de couleurs.
Cet article présente sept nouvelles gammes, toutes plus larges que le sRVB, et décrit leurs différentes fonctionnalités pour vous aider à choisir celle que vous allez utiliser:
La gamme visuelle humaine
Les gammes de couleurs sont souvent comparées à la gamme visuelle humaine, c'est-à-dire la totalité des couleurs que nous pensons que l'œil humain peut voir. Le HVS est souvent représenté à l'aide d'un diagramme de chromaticité, comme celui-ci:
La forme la plus externe est ce que nous pouvons voir en tant qu'êtres humains, et le triangle intérieur correspond à la plage de fonctions rgb(), également appelée espace de couleurs sRVB.
Comme vous avez vu des triangles ci-dessus, en comparant les tailles de gammes, vous trouverez des triangles ci-dessous. C'est la façon dont l'industrie communique et compare les gammes de couleurs.
Qu'est-ce qu'un espace colorimétrique ?
Les espaces de couleur sont des dispositions d'une gamme qui définissent une forme et une méthode d'accès aux couleurs. Nombre d'entre elles sont de simples formes 3D, comme des cubes ou des cylindres. Cette disposition des couleurs détermine quelles couleurs sont côte à côte, ainsi que le fonctionnement de l'accès aux couleurs et de l'interpolation.
Le RVB est comme un espace colorimétrique rectangulaire, dans lequel les couleurs sont accessibles en spécifiant des coordonnées sur 3 axes. Le TSL est un espace colorimétrique cylindrique dans lequel les couleurs sont accessibles selon un angle de teinte et des coordonnées sur 2 axes.
La spécification level 4 introduit 12 nouveaux espaces de couleurs permettant de rechercher les couleurs à partir des 7 nouvelles gammes partagées précédemment:
Ces options s'ajoutent aux quatre espaces de couleur précédemment disponibles:
Gamme de couleurs et résumé de l'espace colorimétrique
Un espace colorimétrique est un mappage de couleurs où une gamme de couleurs est une gamme de couleurs. Considérez une gamme de couleurs comme un total de particules et un espace de couleur comme une bouteille destinée à contenir cette gamme de particules.
Voici un visuel interactif d'Alexey Ardov qui illustre les espaces de couleur. Pointez le curseur, faites glisser votre doigt et zoomez autour dans cette démo. Modifiez l'espace colorimétrique pour visualiser les autres espaces.
- Utilisez la gamme de couleurs pour parler d'une gamme de couleurs, comme la gamme faible ou étroite par rapport à la gamme élevée ou large.
- Utilisez les espaces de couleur pour parler des dispositions de couleurs, de la syntaxe utilisée pour spécifier une couleur, manipuler des couleurs et effectuer des interpolations via la couleur.
Accéder à plus de couleurs, à de nouveaux espaces et aux résultats de débogage
CSS Color 4 présente un grand nombre de nouvelles fonctionnalités et d'outils pour le CSS et la couleur. Tout d'abord, un récapitulatif de l'emplacement de la couleur avant ces nouvelles fonctionnalités. Vous découvrirez ensuite une présentation des nouveaux espaces de couleur, syntaxes et outils.
Le codepen suivant affiche toutes les nouvelles et anciennes syntaxes de couleurs:
Récapitulatif des espaces de couleurs classiques
Depuis les années 2000, vous pouvez utiliser les éléments suivants pour toutes les propriétés CSS qui acceptent une valeur de couleur: hexadécimal (nombres hexadécimaux), rgb(), rgba(), par nom comme hotpink ou avec des mots clés comme currentColor.
Vers 2010, selon votre navigateur, le CSS pouvait utiliser les couleurs hsl(). Puis, en 2017, hex avec alpha est apparu. Enfin, la compatibilité avec les navigateurs a commencé récemment pour hwb().
Tous ces espaces de couleurs classiques font référence à des couleurs appartenant à la même gamme sRVB.
HEX
L'espace colorimétrique hexadécimal spécifie R, G, B et A avec des nombres hexadécimaux. Les exemples de code suivants montrent toutes les façons dont cette syntaxe peut spécifier l'opacité du rouge, du vert et du bleu plus.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RVB
L'espace colorimétrique RVB offre un accès direct aux canaux rouge, vert et bleu. Il permet de spécifier une valeur comprise entre 0 et 255 ou un pourcentage entre 0 et 100. Cette syntaxe existait avant l'introduction de la normalisation dans les spécifications. Vous verrez donc des syntaxes avec virgule et sans virgule dans le monde réel. Désormais, les virgules ne sont plus nécessaires.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
TSL
L'un des premiers espaces de couleurs à s'orienter vers le langage et la communication humains, le HSL (teinte et luminosité) offre toutes les couleurs de la gamme sRVB sans demander à votre cerveau de savoir comment le rouge, le vert et le bleu interagissent. Tout comme le langage RVB, la syntaxe de la fonction comportait également des virgules, mais à l'avenir, les virgules ne sont plus obligatoires.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Le HWB (teinte, blanc et noir) est un autre espace de couleur de la gamme sRVB orienté vers la manière dont les humains décrivent la couleur. Les auteurs peuvent choisir une teinte et mélanger le blanc ou le noir pour trouver la couleur souhaitée.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
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 via color()
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
Le premier espace de cet article pour introduire la 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 différentes pour un écran. En effet, toutes les couleurs de l'espace de CIE (lch, oklch, lab, oklab) sont capables de représenter l'ensemble 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 comprise entre 0 et 100, mais pas comme la luminosité du HSL, il s'agit d'une luminosité spéciale centrée sur l'humain et "perceptuellement linéaire". La chrominance est semblable à la saturation ; elle peut varier de 0 à 230, mais elle est également techniquement illimité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
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 indiqué par 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.
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);
}
Vous ne voyez pas la démo de Codepen ?
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%));
}
Vous ne voyez pas la démo de Codepen ?
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. Dans le cas ci-dessus pour .gradient, les navigateurs remarquent les espaces colorimétriques 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 dégradé 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.
Contrôler l'interpolation
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 fonctionne très bien, et 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é suit l'itinéraire shorter, sauf si vous lui spécifiez de suivre la route 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 visuel ci-dessus 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, sachant que la longue distance aura 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, donnera un dégradé différent. Examinez les exemples ci-dessous, en particulier pour la courbe "du bleu au blanc". Regardez comment chaque espace colorimétrique gère cela différemment. Notez le nombre de couleurs qui deviennent violettes au milieu. Cela s'appelle un "changement de teinte" lors de l'interpolation.
Vous ne voyez pas la démo de Codepen ?
L'image affichée n'est qu'un des nombreux exemples tirés du Codepen. Il peut être judicieux d'essayer la version preview de Canary ou de Safari pour les découvrir par vous-même.
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%));
}
Vous ne voyez pas la démo de Codepen ?
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 !
Vous ne voyez pas la démo de Codepen ?
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 deviendra 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
Migrer vers la couleur CSS HD
Il existe deux stratégies principales pour mettre à jour la couleur de votre projet Web afin de prendre en charge les affichages sur une large gamme:
Dégradation élégante
Utilisez les nouveaux espaces de couleur, et laissez le navigateur et le système d'exploitation déterminer la couleur à afficher en fonction des fonctionnalités d'affichage.Amélioration progressive
Utilisez@supportset@mediapour évaluer les fonctionnalités du navigateur de l'utilisateur et, si les conditions sont remplies, fournissez des couleurs à large gamme.
Si un navigateur ne reconnaît pas la couleur display-p3:
color: red;
color: color(display-p3 1 0 0);
Si un navigateur reconnaît la couleur display-p3:
color: red;
color: color(display-p3 1 0 0);
Chacune de ces méthodes présente des avantages et des inconvénients. Voici une liste rapide des avantages et inconvénients:
Dégradation progressive
- Avantages
- Le chemin le plus simple.
- Le navigateur utilise une carte ou se limite à sRVB s'il ne s'agit pas d'un écran large. La responsabilité incombe donc au navigateur.
- Inconvénients
- Le navigateur risque de limiter la gamme de couleurs à une couleur que vous n'aimez pas.
- Le navigateur peut ne pas comprendre la demande de couleur et échouer complètement. Cependant, il est possible d'atténuer ce problème en spécifiant deux fois la couleur, ce qui permet à la cascade de revenir à la couleur précédente qu'elle comprend.
Amélioration progressive
- Avantages
- Plus de contrôle grâce à la fidélité des couleurs gérée.
- Stratégie additive qui n'affecte pas les couleurs actuelles.
- Inconvénients
- Vous devez gérer deux syntaxes de couleurs distinctes.
- Vous devez gérer deux gammes de couleurs distinctes.
Vérifier la compatibilité avec la gamme et l'espace colorimétrique
Le navigateur permet de vérifier la prise en charge des fonctionnalités gamut et de la syntaxe des couleurs CSS et JavaScript. La gamme exacte de couleurs dont l'utilisateur dispose n'est pas disponible. Une réponse généralisée est fournie afin de préserver la confidentialité de l'utilisateur. La prise en charge exacte de l'espace colorimétrique est toutefois disponible, car elle n'est pas spécifique aux capacités du matériel de l'utilisateur, comme l'est la gamme.
Requêtes de prise en charge de la gamme de couleurs
Les exemples de code suivants vérifient la gamme de couleurs de l'affichage de l'utilisateur visiteur.
Vérification à partir du CSS
La demande d'assistance la moins spécifique est la requête média dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Pour obtenir une assistance approximative ou supérieure, vous pouvez utiliser la requête média color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Deux autres requêtes média permettent de vérifier la compatibilité:
Vérification à partir de JavaScript
Pour JavaScript, la fonction window.matchMedia() peut être appelée et transmise à une requête média pour évaluation.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Le format ci-dessus peut être copié pour le reste des requêtes média.
Requêtes d'assistance concernant l'espace colorimétrique
Les exemples de code suivants vérifient le navigateur de l'utilisateur visiteur et la sélection des espaces de couleur avec lesquels travailler.
Vérification à partir du CSS
La prise en charge des espaces colorimétriques individuels peut être demandée à l'aide d'une requête @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Vérification à partir de JavaScript
Pour JavaScript, la fonction CSS.supports() peut être appelée et transmise à une paire propriété/valeur pour voir si le navigateur la comprend.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Assembler le matériel et les vérifications d'analyse
En attendant que chaque navigateur mette en œuvre ces nouvelles fonctionnalités de couleur, nous vous recommandons de vérifier à la fois la capacité matérielle et la capacité d'analyse des couleurs. C'est souvent celui que j'utilise pour améliorer progressivement les couleurs vers la haute définition:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Déboguer les couleurs à l'aide des outils pour les développeurs Chrome
Les outils pour les développeurs Chrome sont mis à jour et équipés de nouveaux outils pour aider les développeurs à créer, convertir et déboguer des couleurs HD.
Sélecteur de couleur modifié
Le sélecteur de couleur est désormais compatible avec tous les nouveaux espaces de couleur. Permettre aux auteurs d'interagir avec les valeurs de canal comme ils le feraient.
Limites de la gamme
Une limite de gamme a également été ajoutée afin de séparer les gammes srgb et display-p3. Clarifier la gamme dans laquelle se trouve la couleur sélectionnée.
Cela permet aux auteurs de différencier visuellement les couleurs HD des couleurs non HD.
Cette approche est particulièrement utile lorsque vous utilisez la fonction color() et les nouveaux espaces colorimétriques, car ils permettent de produire des couleurs non-HD et HD. Si vous souhaitez vérifier dans quelle gamme votre couleur fait partie, ouvrez le sélecteur de couleur et voyez !
Conversion des couleurs
Depuis de nombreuses années, les outils de développement convertissent les couleurs dans des formats compatibles tels que HTL, HWB, RVB et hexadécimal. shift + click sur un échantillon de couleur carrée dans le volet "Styles" pour effectuer cette conversion. Les nouveaux outils de couleur ne se contentent pas de faire défiler les conversions : ils génèrent un pop-up qui permet aux auteurs de voir et de sélectionner la conversion de leur choix.
Lors d'une conversion, il est important de savoir si elle a été coupée pour s'adapter à l'espace. Les outils de développement disposent désormais d'une icône d'avertissement dans la couleur convertie qui vous avertit de ce rognage.
Découvrez d'autres fonctionnalités de débogage CSS dans les outils de développement dans leur annonce récente.
Conclusion
Les espaces de couleurs non-sRVB sur le Web n'en sont qu'à leurs débuts, mais je crois que nous allons constater une augmentation de l'utilisation par les concepteurs et les développeurs au fil du temps. Savoir sur quel espace colorimétrique, par exemple, créer un système de conception est un outil efficace pour faire partie de la ceinture d'outils des créateurs. Chaque espace colorimétrique offre des caractéristiques uniques ainsi qu'une raison pour laquelle il a été ajouté à la spécification CSS. Vous pouvez commencer petit avec ces caractéristiques et les ajouter si nécessaire.
Amusez-vous avec ces nouveaux jouets colorés ! Des manipulations et des interpolations plus cohérentes, ainsi que des couleurs plus vives pour vos utilisateurs.
Autres ressources
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/