👩‍👩‍👦 👩‍👦 🎅🏽 Couleurs CSS LCH 👩🏾‍🌾 👬 🌶️

J'ai toujours été intéressé par la science de la couleur. En 2014, j'ai pris la parole lors de différentes conférences, parlant de la spécification CSS Color 4. Et avant cela, en 2009, j'ai écrit un programme de choix des couleurs. Elle a utilisé une applet Java cachée pour prendre en charge les profils de couleurs ICC et pour fonctionner correctement avec CMJN. C'était, à ma connaissance, le premier programme du genre. Je ne l'ai jamais publié, mais cela a conduit à la publication de cette publication. L'intérêt pour la couleur m'a amené à l'homme qui est devenu mon mari. En 2019, je suis devenu co-éditeur de la spécification CSS Color 5 . Mon objectif est de concrétiser ma proposition.

modification des couleurs, qui vise à permettre aux concepteurs de personnaliser arbitrairement les canaux de couleur pour créer des options de couleur. Je souhaite également combiner mon offre avec cette offre. Les couleurs CSS LCH sont quelque chose qui me fascine vraiment. Je suis profondément convaincu que les designers, lorsqu'ils en apprendront davantage sur les couleurs LCH, seront scandalisés par le fait qu'ils n'ont toujours pas la possibilité d'utiliser de telles couleurs.

Qu'est-ce que LCH?

Le module CSS Color 4 a, entre autres, une définition des couleurs LCH . Aujourd'hui, tous les principaux navigateurs ont commencé à implémenter leur support ou envisagent sérieusement cette possibilité:

Dans Safari, LCH est déjà implémenté.
Cette fonctionnalité est attendue dans Chrome .
La possibilité d'implémenter cette fonctionnalité dans Firefox est discutée .

LCH est un espace colorimétrique qui présente certains avantages par rapport aux espaces colorimétriques RVB / HSL que tout le monde a l'habitude de travailler avec CSS. En fait, j'irais encore plus loin et j'appellerais LCH une technologie qui peut changer radicalement la façon dont les couleurs fonctionnent sur le Web. Voici trois faits qui me permettent de faire de telles déclarations.

▍1. LCH, par rapport à sRGB, donne accès à environ 50% de couleurs en plus

C'est un énorme pas en avant. À l'heure actuelle, toute couleur CSS que nous pouvons définir est définie dans l' espace colorimétrique sRGB . Il y a quelques années, c'était plus que suffisant, car tous les moniteurs, à l'exception des moniteurs professionnels, avaient une gamme de couleurs inférieure à sRGB. Mais maintenant, tout ne l'est plus. Aujourd'hui, la gamme de couleurs (c'est-à-dire la gamme de couleurs pouvant être affichées) de la plupart des moniteurs est proche de P3 . Et le volume de cet espace colorimétrique est 50% plusque la quantité d'espace sRGB. CSS n'a actuellement aucun accès à ces couleurs. Permettez-moi de répéter ceci: nous n'avons pas accès au tiers des couleurs que les moniteurs modernes peuvent afficher. Et il ne s'agit pas de quelques couleurs mineures. Nous parlons des couleurs les plus vives que les moniteurs peuvent afficher. Nos sites semblent pâles car le matériel du moniteur évolue plus rapidement que les spécifications CSS et les implémentations de navigateur.

Espace colorimétrique sRGB et P3

▍2. LCH (et Lab) sont des espaces colorimétriques uniformes en perception

Lorsque vous travaillez avec LCH, le même changement numérique dans l'espace colorimétrique donne la même différence perçue entre les couleurs. Cette propriété de l'espace colorimétrique est appelée «uniformité perceptuelle». Les espaces colorimétriques RVB ou HSL ne sont pas uniformes en perception. Voici un exemple très révélateur de cette fonctionnalité ( voici la source de cet exemple).

Hétérogénéité de perception des couleurs HSL Les couleurs

des rangées supérieures et inférieures diffèrent de 20 degrés par le ton. Pensez-vous que la différence perçue entre ces couleurs est la même?

▍3. La luminosité dans LCH est un indicateur qui signifie quelque chose

Dans l'espace colorimétrique HSL, la légèreté est un indicateur dénué de sens. Les couleurs peuvent avoir la même luminosité, mais leur luminosité perçue varie considérablement. Mon exemple préféré est une comparaison du jaune et du bleu. Vous ne me croyez peut-être pas, mais les couleurs ci-dessous ont la même légèreté HSL.

Couleurs HSL ayant la même luminosité

Les deux couleurs ont une luminosité de 50%, mais elles n'ont certainement pas du tout la même luminosité perçue. Quelle est la signification du concept de "légèreté" dans HSL?

Ici, vous pouvez discuter avec moi, en disant que la légèreté, au moins, a du sens avec la même tonalité de couleur (teinte) et la même saturation de couleur. C'est-à-dire lors du changement de légèreté dans la même couleur. Et la vérité: en augmentant la luminosité HSL, nous obtenons une couleur plus claire et en diminuant - une couleur plus foncée. Mais ce qui se passe ne sera pas nécessairement de la même couleur.

Réglage de la luminosité avec une tonalité et une saturation

des couleurs constantes Ces deux couleurs ont la même teinte et la même saturation, mais ressemblent-elles à une version plus sombre et plus claire de la même couleur?

Lorsque vous utilisez le modèle de couleur LCH, les couleurs ayant la même luminosité sont perçues comme des couleurs ayant la même luminosité et les couleurs ayant la même couleur sont perçues comme des couleurs de même saturation.

Comment les couleurs LCH sont-elles organisées?

LCH est l'abréviation de Lightness, Chroma, Hue (légèreté, couleur, tonalité). Les composants de couleur de ce modèle de couleur ont une certaine relation avec les composants du modèle de couleur HSL. Mais il existe de sérieuses différences entre les composants de ces modèles de couleurs.

Les angles de hauteur dans le LCH ne correspondent pas tout à fait aux tons HSL. C'est - 0 - ce n'est pas complètement rouge. Cette couleur est plutôt proche du magenta. Et 180 n'est pas une couleur turquoise, il est plutôt bleu-verdâtre, et il est complètement complémentaire.

Couleurs avec la même luminosité perçue

Notez que ces couleurs, bien que très différentes dans le ton, ressemblent à des couleurs qui ont la même luminosité perçue.

Dans l'espace colorimétrique HSL, la saturation est représentée par une plage nette de valeurs de 0 à 100. Le fait est que cet espace est le résultat d'une simple transformation de RVB en coordonnées polaires. Dans LCH, cependant, la valeur de la composante de chrominance est théoriquement illimitée. La norme LCH (comme Lab) est conçue pour pouvoir représenter la gamme complète de couleurs perçues par l'homme. Toutes ces couleurs ne peuvent pas être affichées sur le moniteur, même celles qui prennent en charge l'espace colorimétrique P3. De plus, nous parlons non seulement du nombre maximum de couleurs affichées, en fonction de la gamme de couleurs du moniteur, mais aussi de la différence de couleurs.

Peut-être que cette idée sera plus facile à comprendre si je l'illustre par un exemple. Par souci de simplicité, imaginons que nous avons un moniteur dont la gamme de couleurs correspond exactement à l'espace colorimétrique sRGB. À titre de comparaison, l'écran du MacBook Air 2013 pourrait produire environ 60% sRGB, mais la plupart des écrans modernes peuvent, comme déjà mentionné, afficher 150% sRGB. Pour L = 50 et H = 180 (l'échantillon cyan dans la figure ci-dessus), la valeur maximale de C n'est que de 35! Pour L = 50 et H = 0 (rose), la valeur de C peut atteindre 77 sans dépasser sRVB. Pour L = 50 et H = 320 (Violet), la valeur de C peut aller jusqu'à 108!

Bien que le manque de frontières puisse être perçu comme quelque chose d'effrayant (qu'il s'agisse de personnes ou d'espaces colorimétriques), il n'y a rien à craindre: si une couleur est définie qui ne peut pas être affichée sur un certain moniteur, elle sera réduite à une couleur similaire prise en charge par le moniteur. En fin de compte, il n'y a rien de nouveau: jusqu'à ce que les moniteurs acquièrent une gamme de couleurs dépassant les capacités de sRGB, c'est exactement ce qui s'est passé avec les couleurs CSS habituelles affichées sur les moniteurs dont la gamme de couleurs était inférieure à sRGB.

Sélecteur de couleurs LCH

J'espère que maintenant vous êtes également un peu intéressé par l'idée d'utiliser des couleurs LCH. Cela soulève la question de savoir comment visualiser ces couleurs.

En fait, j'ai créé il y a assez longtemps l'outil correspondant, LCH Color Picker, conçu principalement pour aider moi et mes collègues à bien comprendre les fonctionnalités de LCH lors de l'édition de CSS Color 5 . L'une est de connaître la théorie, et une autre est de pouvoir expérimenter avec les curseurs et voir le résultat de vos propres yeux. J'ai même acheté un domaine, css.land , pour y publier des exemples pertinents. Nous avons un peu utilisé cet outil, je lui ai ajouté de nouvelles fonctionnalités, mais je n'ai jamais écrit à ce sujet. Par conséquent, cet outil n'était disponible que pour nous, et pour ceux qui faisaient attention àce référentiel github.

Moyens de sélection des couleurs LCH

Si vous êtes intéressé à expérimenter avec les couleurs LCH, vous pouvez très bien utiliser cet outil. Voici quelques détails à son sujet:

Le code de conversion des couleurs a été écrit par l'un des membres de notre équipe. Nous sommes convaincus que les calculs, au moins, ont été effectués sur la base d'une compréhension correcte du processus de conversion (c'est-à-dire, si quelque chose ne va pas - c'est une erreur dans le code, et non le résultat d'une mauvaise compréhension de quelque chose).
Le composant de couleur Chroma prend en charge un changement dans une plage autre que 0 - 100, ce qui distingue notre outil de certains des autres que nous avons pu trouver.
Les utilisateurs peuvent y charger des couleurs CSS arbitraires (en utilisant le bouton Importer).
Les curseurs vous permettent de saisir uniquement des valeurs entières, mais dans les champs noirs qui apparaissent au-dessus des curseurs, vous pouvez saisir n'importe quel nombre.
Dans le processus, vous pouvez enregistrer des couleurs et voir comment elles sont interpolées.
L'analyse des couleurs est prise en charge pour savoir si elle appartient à l'espace colorimétrique sRGB, P3 (ou à Rec.2020, même à un espace colorimétrique plus étendu).
Paramètre de transparence pris en charge.
Et enfin, utiliser cet outil est tout simplement intéressant! Surtout si l'on considère qu'il est implémenté sur la base de Mavo (bien qu'un peu de JavaScript soit utilisé ici, c'est-à-dire qu'il ne s'agit pas d'un projet Mavo créé en HTML pur).

En fait, vous pouvez essayer le sélecteur de couleurs LCH ici .

Questions et réponses

Après avoir publié cet article, ils ont commencé à me poser des questions. Je pense que je devrais clarifier ici certaines idées fausses courantes.

▍Vous dites que la prise en charge des couleurs LCH dans les navigateurs n'est pas encore implémentée, mais je peux les voir dans l'article. Comment est-ce possible?

Toutes les couleurs utilisées dans cet article appartiennent à la gamme de couleurs sRGB. C'est parce que nous ne pouvons tout simplement pas produire de couleurs en dehors de sRGB jusqu'à présent. sRGB est un espace colorimétrique, pas une syntaxe de description des couleurs. Par exemple, rgb(255 0 0)ils lch(54.292% 106.839 40.853)définissent la même couleur.

OwComment le sélecteur de couleurs LCH affiche-t-il les couleurs en dehors de sRGB?

Mon programme, LCH Color Picker, n'affiche pas ces couleurs. Et, pour autant que je sache, il n'y a nulle part sur Internet un programme capable d'afficher de telles couleurs. Le projet LCH Color Picker est mis en œuvre à l'aide des technologies Web, ce qui signifie que les restrictions standard s'appliquent à toutes les autres pages Web. Je convertis les couleurs non produites en sRGB. Au début, j'ai simplement amené les composants de couleur RVB dans une plage de 0 à 100%, mais grâce à ce PR , le programme utilise maintenant un algorithme beaucoup plus efficace. À savoir, nous parlons de réduire la valeur du composant LCH C jusqu'à ce que la couleur tombe dans les limites sRGB. C'est pourquoi une augmentation de la valeur du composant C au-dessus d'une certaine limite ne conduit pas à la conclusion d'une couleur plus lumineuse. Le fait est qu'une telle couleur ne peut pas encore être déduite en utilisant CSS.

▍ J'ai remarqué que Firefox affiche des couleurs plus lumineuses que Chrome et Safari. Y a-t-il une connexion avec le support LCH?

Firefox n'a pas implémenté cette partie de la spécification qui limite les couleurs CSS aux trames sRGB. Au lieu de cela, le navigateur transmet simplement les valeurs RVB brutes à l'écran. Par exemple, rgb(100% 0% 0%)il s'agit de la couleur rouge la plus brillante qu'un moniteur puisse afficher. Bien que cela puisse sembler une solution intelligente, nous sommes ici confrontés à des contradictions. Le fait est qu'avec cette approche, vous pouvez définir des couleurs, au mieux, seulement approximativement, car tous les écrans affichent les couleurs différemment. En restreignant les couleurs CSS à un espace colorimétrique connu (sRGB), nous obtenons l'indépendance de l'appareil. Les espaces colorimétriques LCH et Lab sont également indépendants de l'appareil, car ils sont basés sur la couleur réelle mesurée.

▍ Que pouvez-vous dire sur le design couleur (display-p3 rgb)? Safari le soutient depuis 2017!

J'en ai été informé après avoir publié cet article. Je sais depuis longtemps que Safari travaille sur cette fonctionnalité, mais j'ai raté le moment où elle était prête. En fait, le mois dernier, cet article a été publié décrivant cette syntaxe dans WebKit. Incroyable

Le design color(colorspaceid params)est une fonctionnalité décrite dans CSS Color 4. Elle, en matière de gestion des couleurs en CSS, peut être comparée à un couteau suisse. La grande chose à propos de cette conception est qu'elle vous permet de spécifier le profil de couleur ICC et les couleurs qui en sont issues. Par exemple, cela peut être utile si vous souhaitez utiliser de vraies couleurs CMJN ou Pantone sur une page Web. Cette conception prend également en charge certains espaces colorimétriques prédéfinis, dont l'un est display-p3. Par exemple, color(display-p3 0 1 0)il nous donne la couleur verte la plus claire de l'espace colorimétrique P3. Pour tester la prise en charge de cette conception, vous pouvez utiliser ce test. En l'absence de support color(), une couleur rouge sera affichée, et si disponible, une couleur vert clair.

Bien qu'il s'agisse d'une fonctionnalité étonnante (et j'ai besoin de refaire mon sélecteur de couleurs LCH pour que le programme l'utilise color()si cette fonctionnalité est prise en charge), faites attention au fait qu'elle ne résout que le premier des problèmes que j'ai mentionnés. À savoir, nous parlons de l'accès à toutes les couleurs de la gamme de couleurs. Mais, puisque l'outil est color()basé sur RGB, il souffre de tous les inconvénients associés à RGB. Il ne se distingue pas par une perception uniforme, avec son aide, en ajustant les paramètres de couleur, il est difficile de créer des options de couleur (options plus claires ou plus sombres, plus ou moins lumineuses, etc.).

De plus, je note qu'il s'agit d'une solution temporaire. Maintenant, il est applicable car les écrans qui peuvent afficher des couleurs qui ne correspondent pas à P3 sont rares. Mais après une autre amélioration des écrans, il s'avère que le design color(display-p3 ...)aura les mêmes problèmes que les couleurs RVB.

Les espaces colorimétriques LCH et Lab sont indépendants de l'appareil, ils peuvent représenter toutes les couleurs visibles par l'homme et, par conséquent, ils resteront pertinents quelle que soit l'évolution du matériel.

Chers lecteurs! Êtes-vous intéressé à utiliser les couleurs LCH en CSS?

Couleurs CSS LCH