Un aperçu de 4 nouvelles fonctionnalités de couleur CSS

Cet article explore les derniers changements dans le champ de couleur CSS et les changements futurs possibles, avec une quantité surprenante de contenu. Les méthodes nouvelles et à venir pour définir les couleurs sont dans le nombre de façons qui sont encore plus grandes que celles existantes. Jetons un coup d'œil rapide.

Tout d'abord, il est important de souligner que ces contenus sont très complexes. J'ai du mal à comprendre pleinement. Mais voici quelques points clés:

• Jusqu'à tous les changements à venir, nous n'avons que RVB comme modèle de couleur, et tout est basé sur cela.
• Nous avons différents «espaces de couleurs» pour le gérer différemment (par exemple, la fonction RGB () mappe le modèle de couleur RVB à un cube avec des coordonnées linéaires, la fonction HSL () mappe le modèle de couleur RVB à un cylindre), mais ils appartiennent tous à la gamout de couleur SRGB.
• Avec les changements à venir, nous obtiendrons un nouveau modèle de couleur et (!) Nous obtiendrons une nouvelle fonction qui mappe ce modèle de couleur de différentes manières. Je pense donc que c'est un double ou même triple coup.

Je ne peux pas vous expliquer tous les détails en détail - j'écris ceci parce que je crois que beaucoup de gens, comme moi, veulent savoir pourquoi nous devrions nous soucier de cela, et c'est ce que j'essaie de comprendre pourquoi je devrais me soucier de cela.

L'affichage-P3 s'active sur des couleurs plus vives qui étaient auparavant inexpressibles.

 corps {
  Contexte: Couleur (affichage-p3 1 0,08 0); * /
}

Il s'avère que les moniteurs modernes peuvent afficher plus de couleurs, en particulier les couleurs extra-vives, mais nous n'avons tout simplement pas de moyen de définir ces couleurs en utilisant la syntaxe des couleurs CSS classiques telles que Hex, RVB et HSL. Très étrange, non? ! Mais si vous utilisez Display-P3, vous pouvez accéder plus largement à ces couleurs vives.

La société de développement Panic l'a remarqué au début et a commencé à utiliser ces couleurs comme "armes secrètes":

? En plus de WebGL, la couleur P3 est désormais une partie importante de la pile d'armes secrètes du site Web de panique. Shh, ne dites à personne, vous devriez voir cette page sur l'écran IMAC PRO! https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

- panique (@panic) 24 mai 2019

Jen Simmons décrit également comment les utiliser, y compris les options de secours pour les navigateurs non pris en charge:

Afficher la couleur P3. Conçu dans le navigateur. merveilleux.

Permettez-moi de vous montrer comment passer à P3, trouver une couleur, puis trouver une couleur de secours pour les anciens navigateurs. Toutes les opérations sont effectuées dans Safari Web Inspecteur. (Ouvrez le son et écoutez mon explication!) Pic.twitter.com/aakhrn2s3e

- Jen Simmons (@jensimmons) 5 janvier 2022

ressource

• CSS large couleurs de gamme utilisant l'affichage-p3 (blog webkit)
• La gamme de couleurs en constante expansion sur Internet (Ollie Williams)

HWB est plus "humain" mais c'est un peu discutable, et il est toujours basé sur SRGB.

Je ne savais pas ce qu'est HWB () auparavant - grâce au billet de blog de Stefan Judis.

Je considère généralement le HSL comme un format de couleur CSS "humanisé" (et adapté au contrôle du programme), car, bien, en fonction d'une teinte à 360 ° et de la saturation et de la luminosité de 0 à 100% ont une signification évidente.

Mais dans HWB (), nous avons la teinte (je pense la même chose que HSL), puis la blancheur et la noirceur . Stefan:

L'ajout de blanc et de noir à la couleur affectera sa saturation. Supposons que vous ajoutez la même quantité de blanc et de noir à la couleur, le ton de couleur reste le même, mais la couleur perd sa saturation. Cela fonctionne jusqu'à 50% de blanc et 50% noir (HWB (0DEG 50% 50%)), ce qui se traduit par des couleurs non couleur.

Stefan doute que ce soit plus facile à comprendre que HSL, et j'ai tendance à être d'accord. Je pourrais simplement avoir besoin de m'y habituer davantage, mais cela semble être plus abstrait que de simplement changer la luminosité ou la saturation.

HWB est limité à la même gamme de couleurs (SRGB) que tous les anciens formats de couleur. Aucune nouvelle couleurs n'est déverrouillée ici.

ressource

• Sélecteur de couleurs HWB
• hwb () - notation de couleur humanisée? (Stefan Judis)

Le laboratoire est comme un RVB () avec une gamme de couleurs plus large

 div {
  Contexte: Lab (150% -400 400);
}

Quand j'ai demandé autour, j'aime l'explication d'Eric Portis du laboratoire:

Le laboratoire est comme RVB, il a trois composants linéaires. Plus le nombre signifie que moins la chose est faible, et plus le nombre signifie que plus la chose est grande. Vous pouvez donc utiliser le laboratoire pour spécifier le vert le plus brillant et le plus vert de tous les temps, qui sera très lumineux et vert pour tout le monde, mais sera plus brillant et plus vert sur les moniteurs avec une gamme de couleurs plus large.

Nous obtenons donc toutes les couleurs supplémentaires, ce qui est génial, mais il y a un autre problème avec SRGB (à part l'expression limitée des couleurs), c'est-à-dire qu'elle n'est pas perceptuellement unifiée . Brian Kardell:

L'espace SRGB n'est pas unifié perceptuellement. Les mêmes mouvements mathématiques ont des degrés différents d'effets perceptifs à différentes positions dans l'espace colorimétrique. Si vous voulez lire l'expérience du concepteur avec cela, voici un exemple intéressant qui illustre le processus de travail dur pour bien faire.

Un exemple classique ici est que dans HSL, les couleurs avec exactement la même "luminosité" sont vraiment complètement différentes.

HSL et LAB :: Lumiair?

La même couleur de notre vote de couleur délicate, mais cette fois, j'ai montré la version de laboratoire de la même couleur. Veuillez noter à quel point la valeur de luminosité du laboratoire est proche des résultats pour lesquels nous avons voté!

? Tous les espaces de couleurs ne sont pas les mêmes! https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkeguq3kzg

- Adam Argyle (@argyleink) 3 décembre 2019

Mais dans le laboratoire, il est évidemment perceptuellement unifié, ce qui signifie que la manipulation des couleurs par programme est une tâche plus raisonnable. Un autre avantage est que la couleur de laboratoire est spécifiée comme indépendante de l'appareil. Michelle Barker:

Le laboratoire et le LCH sont définis dans la spécification comme des couleurs indépendantes de l'appareil . Le laboratoire est un espace colorimétrique accessible dans des logiciels comme Photoshop, et il est recommandé si vous voulez que la couleur de l'écran soit la même que celles imprimées sur un t-shirt, par exemple.

ressource

• lab () (mdn)
• Guide de l'utilisation des couleurs CSS modernes pour RVB, HSL, HWB, Lab et LCH (Michelle Barker)

LCH est comme HSL () avec une gamme de couleurs plus large

Rappelez-vous quand j'ai dit que HSL est «humain» parce qu'il est plus facile à comprendre que RVB? Changer la teinte, la saturation et la luminosité ont du sens. LCH () similaire à cela, nous avons la luminosité , la chromaticité et la teinte . Pour en revenir à ma conversation avec Eric Portis:

LCH ressemble plus à HSL: un espace de coordonnées polaires. H = Hue = un cercle. Donc, faire des mathématiques pour choisir des couleurs complémentaires (ou quelle que soit la transformation que vous recherchez) devient trivial (ajoutez simplement 180 - ou toute autre valeur!)

Je pense que vous choisissez LCH simplement parce que vous aimez sa syntaxe, ou parce qu'il fait certaines des opérations programmatiques complexes que vous essayez d'effectuer plus facilement - et vous savez qu'elle exprime plus de 50% des couleurs gratuitement.

Nous gagnons également l'unité perçue ici. Lea verou semble excitée que la luminosité ait du sens:

Dans HSL, la luminosité n'a pas de sens. Les couleurs peuvent avoir la même valeur de luminosité, mais la luminosité perçue est très différente. […] Avec LCH, toute couleur avec la même luminosité est tout aussi perceptuellement brillante, et toute couleur avec la même chromaticité est tout aussi perceptuellement saturée.

Un autre avantage du nouveau modèle est que nous pouvons nous débarrasser de la "zone morte grise" dans le gradient de couleur CSS. Je ne pense pas qu'en raison de cette unité perceptuelle, les deux couleurs riches ne deviennent pas étranges et se changent progressivement dans les zones non riches.

Voici une petite prédiction personnelle: je dirais que LCH () pourrait devenir un favori des créateurs. Il y aura bientôt beaucoup de nouvelles options de couleurs, et il est toujours trop difficile et bizarre de choisir différentes couleurs. LCH semble être la plus efficace psychologiquement.

ressource

• LCH () (MDN)
• Couleur LCH dans CSS: Quoi, pourquoi et comment? (Lea verou)

"Bien sûr"

Le laboratoire et ses amis ont l'air si nouveaux parce qu'il est nouveau pour CSS… mais le laboratoire a été inventé dans les années 40. Dans sa conversation avec Adam Argyle, il utilise une phrase mémorable: tous les espaces de couleurs ont un talon d'Achille . C'est-à-dire qu'ils sont un peu mauvais dans les choses. Pour SRGB, c'est un problème de zone morte gris et une gamme de couleurs limités. Le laboratoire est bon, mais il a certainement ses propres faiblesses. Par exemple, le gradient bleu à blanc en laboratoire passera à travers la zone violette plutôt maladroitement.

En décembre 2020, Björn Ottosson a déclaré: «Hé, un nouvel espace colorimétain est apparu» et maintenant Oklab arrive. De toute évidence, les décideurs CSS croient que la valeur de cet espace colorimétrique est suffisamment élevée pour que OkLab () et Oklch () aient été normalisés. Je pense que nous devons nous soucier parce qu'ils sont généralement meilleurs , mais ne citez pas ce que j'ai dit.

Pourquoi l'affichage P3 utilise-t-il la fonction couleur () tandis que d'autres fonctions ne sont pas utilisées?

Je ne sais vraiment pas. Je pense que la fonction CSS Color () est relativement nouvelle, et c'est ainsi que Safari l'a mis en premier lieu. Je ne sais pas si l'affichage P3 obtiendra ses fonctions dédiées, ou si nous devons tous commencer à utiliser CSS Color (), ou quoi.

 / * Voici comment utiliser l'affichage p3 * /
couleur (affichage-p3 1 0,08 0);

/ * Mais cela ne fonctionne pas * /
couleur (Oklch 42,1% 0,192 328,6);

/ * Devez-vous faire cela? ‍♀️ * /
OKLCH (42,1% 0,192 328,6);

/ * Mais vous pouvez utiliser l'espace colorimétrique en dégradé ... * /
Image d'arrière-plan: gradient linéaire (
    à droite
    à Oklch,
    LCH (50% 100 100),
    LCH (50% 100 250)
  ));

La syntaxe des couleurs relatives est très utile.

Il existe une fonctionnalité très cool appelée "syntaxe des couleurs relatives" où vous pouvez essentiellement déconstruire la couleur CSS tout en le déplaçant vers un autre format. Supposons que vous ayez (apparemment) la couleur hexagonale CSS la plus célèbre, le brouillard et vous voulez le convertir en HSL:

 corps {
  Contexte: HSL (de # F06D06 HSL);
}

Peut-être que cela ne fonctionne pas immédiatement, mais bon, maintenant nous pouvons y ajouter Alpha! Il n'y a en fait aucun autre moyen d'appliquer l'alpha aux couleurs hexagonales existantes, c'est donc très important:

 corps {
  Contexte: HSL (de # F06D06 HSL / 0,5);
}

Mais je peux aussi le modifier. Supposons que je veux saturer un peu le chien de brouillard avant d'ajouter l'opacité, car l'opacité inférieure l'assombrit naturellement, je veux compenser cela. Je peux utiliser calc () sur les variables qui y sont implicites:

 corps {
  Contexte: HSL (de # F06D06 H CALC (S 20%) L / 0,5);
}

C'est tellement cool. Je suis sûr que nous en verrons quelque chose d'incroyable. Il ne se limite certainement pas à HSL. J'utilise juste HSL parce que je le trouve confortable maintenant. Si je veux, je peux commencer par la couleur nommée rouge et la modifier dans LCH:

 corps {
  Contexte: LCH (de Red L Calc (C 15) H / 0,25);
}

Ceux-ci sont utiles lorsqu'ils sont librement combinés avec des propriétés personnalisées.

Il n'y a plus de fonctions spéciales spécifiquement pour Alpha.

Il doit être clair qu'il n'y a pas de virgule dans la valeur alpha dans la fonction de couleur CSS avant lui - mais une barre oblique:

 /* Vieux! * /
RVB (255, 0, 0);
RGBA (255, 0, 0, 0,5);

/* Nouveau! * /
RGB (255 0 0);
RVB (255 0 0 / 0,5);
HSL (0deg 40% 40%)
HSL (0DEG 40% 40% / 90%) / * peut être un pourcentage au lieu de 0,9 ou autre valeur * /

/ * Le nouveau contenu couleur n'a qu'une seule fonction de base, pas de fonction alpha mineure * /
laboratoire (49% 39 80)
laboratoire (49% 39 80 / 0,25)

/ * Afficher P3, en utilisant les fonctions de couleur, essentiellement de la même manière que les barres baisses avant * /
couleur (affichage-p3 1 0,08 0 / 0,25);

Vous pouvez même définir votre propre espace colorimétrique CSS.

Mais je ne peux vraiment pas y penser. Cela m'a choqué, je suis désolé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!