J'ai eu l'occasion de modifier une grande partie des nouvelles entrées de couleurs à venir à l'Almanach CSS-Tricks. Nous en avons déjà publié plusieurs avec plus sur le chemin, y compris un guide complet sur les fonctions de couleur:
- couleur()
- HSL ()
- laboratoire()
- LCH ()
- OkLab ()
- oklch ()
- RGB ()
Et je dois admettre: je ne savais pas grand-chose sur la couleur dans CSS (j'ai toujours utilisérgb (), ce qui n'est apparemment pas ce que les gens cool font), donc ce fut une expérience d'apprentissage amusante. L'une des choses que j'ai remarquées en essayant de suivre toutes ces nouvelles informations a été la durée du glossaire de la couleur, en particulier les concepts de ?couleur?. Il y a des ?espaces de couleurs?, des ?modèles de couleurs?, des ?gammes de couleurs?, et essentiellement une ?couleur? quelque chose pour tout.
Ils sont tous quelque peu liés, et cela peut devenir déroutant lorsque vous creusez dans l'utilisation de la couleur dans CSS, en particulier les nouvelles fonctions de couleur qui ont été expédiées récemment, comme Contrast-Color () et Color-Mix (). Par conséquent, je voulais faire le glossaire que j'aurais aimé avoir quand j'entendais pour la première fois à propos de chaque concept, et que n'importe qui peut vérifier chaque fois qu'il oublie ce qu'est une ?couleur? spécifique.
Comme avertissement, je n'essaie pas d'expliquer la couleur, ou spécifiquement, la reproduction des couleurs, dans ce post; Ce serait probablement impossible pour un mortel comme moi. Au lieu de cela, je veux vous donner une image assez importante pour quelques technicités derrière la couleur dans CSS, de sorte que vous vous sentez confiant en utilisant des fonctions lieLab () oroklch () tout en comprenant ce qui les rend spéciaux.
Qu'est-ce qu'une couleur?
Ralentissons d'abord. Afin de comprendre tout en couleur , nous devons d'abord comprendre la couleur dans tout .
Bien qu'il soit utile de penser à un objet étant une certaine couleur (attention à la voiture rouge ou couper le cable blanc !), La couleur n'est pas une propriété physique d'objets, ou même une chose tangible. Oui, nous pouvons caractériser la lumière comme la principale cause de la couleur 1 , mais ce n'est que lorsque la lumière visible entre dans les yeux et est interprétée par notre cerveau que nous percevons une couleur. Comme dit Byelle Stone:
Des vagues légères sont là-bas dans le monde, mais la couleur se produit dans l'interaction entre les vagues légères et l'?il, le cerveau et l'esprit.
Même si la couleur n'est pas une chose physique, nous voulons toujours le reproduire aussi de manière fiable que possible, en particulier à l'ère numérique. Si nous prenons une photo d'un beau bouquet de lys (comme celui de mon bureau), puis l'affichage sur un écran, nous nous attendons à voir les mêmes couleurs à la fois dans l'image et la réalité. Cependant, la ?réalité? ici est un terme trompeur car, encore une fois, la réalité de la couleur dépend du spectateur. Pour résoudre ce problème, nous devons comprendre comment les longueurs d'onde légères (quelque chose de mesurable et de reproduction) créent différentes réponses de couleurs dans les téléspectateurs (quelque chose de pas si mesurable).
Heureusement, cette tache a déjà été effectuée il y a 95 ans par la Commission internationale d'illumination (CIE, par son nom fran?ais). J'aimerais pouvoir entrer dans les détails de l'expérience, mais nous ne sommes pas encore entrés dans notre premier truc de couleur. Ce qui est important, c'est que d'après ces mesures, le CIE a pu cartographier toutes les couleurs visibles par l'homme moyen (dans l'expérience) pour éclairer les longueurs d'onde et les décrire avec seulement trois valeurs.
Initialement, ces trois valeurs primaires correspondaient aux longueurs d'onde rouges, vertes et bleues utilisées dans l'expérience, et ils ont constitué l' espace colorimétrique CiergB, mais les chercheurs ont remarqué que certaines couleurs nécessitaient une longueur d'onde négative 2 pour représenter une couleur visible. Pour éviter cela, une série de transformations a été réalisée sur le Ciergb d'origine et l'espace colorimétrique résultant a été appelé Ciexyz.
Ce nouvel espace colorimétrique a également trois valeurs, X et Z représentent la chromaticité d'une couleur, tandis que Y représente sa luminance. Puisqu'il a trois axes, il fait une forme 3D, mais si nous le tranchons de telle sorte que sa luminance soit la même, nous obtenons toutes les couleurs visibles pour une luminance donnée dans une figure que vous avez probablement vue auparavant.
C'est ce qu'on appelle le diagramme de chromaticité XY contient toutes les couleurs visibles par l'?il humain moyen (basé sur le spectateur moyen de l'expérience du CIE 1931). Les couleurs à l'intérieur de la forme sont considérées comme réelles, tandis que ceux à l'extérieur sont jugés imaginaires.
Espaces de couleur
Le but de la dernière explication était d'atteindre le CIEXYZCOLOR SpaceConcept, mais qu'est-ce qu'un ?espace colorimétrique?? Et pourquoi l' espace colorimétrique de Ciexyz est-il si important?
L'espace colorimétrique de Ciexyz est une cartographie de toutes les couleurs visibles par l'?il humain moyen dans un système de coordonnées 3D, nous n'avons donc besoin que de trois valeurs pour définir une couleur. Ensuite, un espace colorimétrique peut être considéré comme une cartographie générale de la couleur , sans avoir besoin d'inclure toutes les couleurs visibles, et elle est généralement définie à travers trois valeurs également.
Espaces de couleur RVB
Les espaces de couleur les plus connus sont les espaces de couleurs RVB (notez le pluriel). Comme vous pouvez le deviner à partir du nom, nous n'avons besoin que de la quantité de rouge, de vert et de bleu pour décrire une couleur. Et pour décrire un espace colorimétrique RVB, nous avons seulement besoin de définir ses valeurs ?les plus rouges?, ?les plus vertes? et ?les plus bleues? 3 . Si nous utilisons des coordonnées de 0 à 1 pour définir une couleur dans l'espace colorimétrique RVB, alors:
- (1, 0, 0) signifie la couleur la plus rouge.
- (0, 1, 0) signifie la couleur la plus verte.
- (0, 0, 1) signifie la couleur la plus bleue.
Cependant, ?le plus rouge?, ?plus bleu? et ?le plus vert? ne sont que des descriptions arbitraires de la couleur. Ce qui fait une couleur le ?plus bleu? appartient à chaque personne. Par exemple, laquelle des couleurs suivantes pensez-vous que le plus bleu est le plus bleu?
Comme vous pouvez le deviner, quelque chose comme ?Bluest? est une description épouvantable. Heureusement, nous devons juste regarder en arrière l'espace colorimétrique CIEXYZ - c'est assez utile! Ici, nous pouvons définir ce que nous considérons comme les couleurs les plus rouges, les plus vertes et les plus bleues tout comme les coordonnées à l'intérieur du diagramme de chromaticité XY. C'est tout ce qu'il faut pour créer un espace colorimétrique RVB, et pourquoi il y en a tellement!
Dans CSS, l'espace colorimétrique le plus utilisé est l'espace colorimétrique RVB (SRGB) standard, qui, comme vous pouvez le voir dans la dernière image, laisse beaucoup de couleurs. Cependant, dans CSS, nous pouvons utiliser des espaces de couleurs RVB modernes avec beaucoup plus de couleurs via TheColor (), tels que Asdisplay-P3, Prophoto-RGB, AndRec2020.
Remarquez comment l'espace colorimétrique Prophoto RVB sort de la couleur visible. C'est bon. Les couleurs à l'extérieur sont serrées; Ce ne sont pas des couleurs nouvelles ou invisibles.
Dans CSS, en plus de SRGB, nous avons deux autres espaces de couleurs: l'espace colorimétrique du Cielab et l'espace colorimétrique Oklab. Heureusement, une fois que nous avons compris ce qu'est l'espace colorimétrique de Ciexyz, ces deux devraient être plus simples à comprendre. Discutons dans ce prochain.
Espaces de couleur Cielab et Oklab
Comme nous l'avons vu auparavant, l'espace colorimétrique SRGB manque de nombreuses couleurs visibles par l'?il humain moyen. Et comme les écrans modernes se sont améliorés pour afficher plus de couleurs, CSS avait besoin d'adopter des espaces de couleurs plus récents pour profiter pleinement de ces nouveaux écrans. Ce n'était pas le seul problème avec le SRGB - il manque également d'uniformité perceptuelle, ce qui signifie que les changements dans la chromaticité de la couleur modifient également sa légèreté per?ue. Vérifiez, par exemple, cedemo par Adam Argyle:
Créée en 1976 par le CIE, Cielab, dérivée de Ciexyz, englobe également toutes les couleurs visibles par l'?il humain. Il fonctionne avec trois coordonnées: LFOR Perceptual Lighness, après la quantité de rouge-vert et b * pour la quantité de bleu jaune dans la couleur.
Il a une bien meilleure uniformité perceptuelle que le SRGB, mais il n'est toujours pas complètement uniforme, en particulier dans les gradients impliquant du bleu. Par exemple, dans le gradient blanc à bleu à bleu, Cielab se déplace vers le violet.
En tant qu'amélioration finale, Bj?rn OttosSoncame avec l'espace colorimétrique Oklab, qui maintient également toutes les couleurs visibles par l'?il humain tout en gardant une meilleure uniformité perceptuelle. Oklab utilise également les coordonnées à trois * A * B *. Grace à toutes ces améliorations, c'est l'espace colorimétrique que j'essaie d'utiliser le plus.
Modèles de couleurs
Quand j'apprenais ces concepts, mon plus grand défi après avoir compris les espaces de couleurs n'était pas de les confondre avec les modèles de couleurs et la gamme de couleurs. Ces deux concepts, bien que complémentaires et étroitement liés aux espaces de couleur, ne sont pas les mêmes, ils sont donc un piège commun lorsqu'ils apprennent la couleur.
Un modèle de couleur fait référence à la description mathématique de la couleur à travers des tuples de nombres, impliquant généralement trois nombres, mais ces valeurs ne nous donnent pas de couleur exacte avant de les associer à un espace colorimétrique. Par exemple, vous savez que dans le modèle de couleur RVB, nous définissons la couleur à travers trois valeurs: rouge, vert et bleu. Cependant, ce n'est que lorsque nous l'assortissons à un espace colorimétrique RVB (par exemple, SRGB RETHISPlay-P3) que nous avons une couleur. En ce sens, un espace colorimétrique peut avoir plusieurs modèles de couleurs, comme SRGB, qui utilise RVB, HSL et HWB. En même temps, un modèle de couleur peut être utilisé dans plusieurs espaces de couleurs.
J'ai trouvé de nombreux articles et tutoriels où les ?espaces de couleurs? et les ?modèles de couleurs? ont été utilisés de manière interchangeable. Et certains endroits étaient qu'ils avaient une définition différente des espaces de couleurs et des modèles que celui fourni ici. Par exemple, Chrome'shigh Definition CSS Color Guidedfines RVB et HSL de CSS en tant qu'espaces de couleurs différents, tandis que les entrées d'espace mdn'scolor définissent le RGB et le HSL dans le cadre de l'espace colorimétrique SRGB.
Personnellement, dans CSS, je trouve plus facile de comprendre l'idée de RVB, HSL et HWB comme différents modèles pour accéder à l'espace colorimétrique SRGB.
Gisements de couleur
Une gamme de couleurs est plus simple à expliquer. Vous avez peut-être remarqué comment nous avons parlé d'un espace colorimétrique ayant plus de couleurs qu'une autre, mais il serait plus correct de dire qu'il a une gamme ?plus large?, car une gamme de couleurs est une modification des couleurs disponibles dans un espace colorimétrique. Cependant, une gamme de couleurs n'est pas seulement limitée par les limites des espaces colorimétriques, mais aussi par des limitations physiques. Par exemple, un écran plus ancien peut diminuer la gamme de couleurs car il n'est pas en mesure d'afficher chaque couleur disponible dans un espace colorimétrique donné. Dans ce cas, où une couleur ne peut pas être représentée (en raison de la limitation physique ou de l'espace colorimétrique lui-même), il serait ?hors de gamme?.
Fonctions de couleur
Dans CSS, le seul espace colorimétrique disponible était autrefois SRGB. De nos jours, nous pouvons travailler avec beaucoup d'espaces de couleurs modernes à travers leurs fonctions de couleur respectives. Comme référence rapide, chacun des espaces de couleur de CSS utilise les fonctions suivantes:
- SRGB: Nous pouvons travailler en SRGB en utilisant la notation hexadécimale ol ', les couleurs nommées et thergb (), rgba (), hsl (), hsla () andhwb () fonctions.
- CIELAB: Ici, nous avons theLab () pour les coordonnées cartésiennes etlch () pour les coordonnées polaires.
- OKLAB: Semblable à Cielab, nous avons Ooklab () pour les coordonnées cartésiennes ANDOKLCH () pour les coordonnées polaires.
- Plus via thecolor () etcolor-mix (). En dehors de ces trois espaces de couleurs, nous pouvons en utiliser beaucoup plus en utilisant les fonctions thecolor () andcolor-mix (). Plus précisément, nous pouvons utiliser les espaces de couleur RVB: RVB-linéaire, affichage-P3, A98-RGB, Prophoto-RGB, Rec2020 et l'espace colorimétrique XYZ: XYZ, XYZ-D50, ORXYZ-D65.
Tl; dr
- Les espaces de couleurs sont une cartographie entre les couleurs disponibles et un système de coordonnées. Dans CSS, nous avons trois principaux espaces de couleurs: SRGB, CIELAB et OKLAB, mais beaucoup d'autres sont accessibles via TheColor ().
- Les modèles de couleur définissent la couleur avec des tuples de nombres, mais ils ne nous donnent pas d'informations sur la couleur réelle tant que nous les assocons à un espace colorimétrique. Par exemple, le modèle RVB ne signifie rien avant de lui attribuer un espace colorimétrique RVB.
- La plupart du temps, nous voulons parler du nombre de couleurs d'un espace colorimétrique, nous utilisons donc le terme gamme de couleurs pour la tache. Cependant, une gamme de couleurs est également liée aux limites physiques d'une caméra / écran. Une couleur peut être hors gamut, ce qui signifie qu'elle ne peut pas être représentée dans un espace colorimétrique donné.
- Dans CSS, nous pouvons accéder à tous ces espaces de couleur via des fonctions de couleur , dont il y en a beaucoup.
- L' espace colorimétrique de Ciexyz est extrêmement utile pour définir d'autres espaces de couleurs, décrire leur gamme et convertir entre eux.
Références
- Guide du programmeur complètement indolore sur XYZ, RVB, ICC, XYY et TRCS (Elle Stone)
- Espaces de couleur (Bartosz Ciechanowski)
- Les espaces de couleur CIE XYZ et XYY (Douglas A. Kerr)
- Du projet personnel à la norme de l'industrie (Bj?rn Ottosson)
- Guide de couleur CSS haute définition (Adam Argyle)
- Espaces de couleurs: expliqués depuis le sol (technologie vidéo expliquée)
- Espace colorimétrique (MDN)
- Qu'est-ce qui fait un espace colorimétrique bien comporté? (Elle Stone)
Notes de bas de page
1 Light est la principale cause de couleur, mais la couleur peut être créée par des choses autres que la lumière. Par exemple, frotter vos yeux fermés stimule mécaniquement votre rétine, créant de la couleur dans ce qui est étalé le phosphène. ??
2 Si la lumière négative vous fait également vous gratter la tête, et pour plus d'informations sur la fa?on dont l'espace colorimétrique Ciexyz a été créé, je recommande fortement Douglas A. Kerr le papier CIE XYZ et XYY Color Spaces . ??
3 Nous devons également définir la couleur sombre la plus sombre (?noir?) et la couleur la plus claire (?blanc?). Cependant, pour les espaces pour la colonrie pour les deux, ces deux peuvent être abstraits des couleurs les plus rouges, les plus blues et les plus vertes. ??
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HEMAINDIFFERENCESBetweendisplay: Inline, Block, Andinline-BlockInhtml / CSSareLayoutBehavior, SpaceUsage et StylingControl.1.InlineElementsflowWithText, Don'tStartNewLines, Ignorewidth / Height, AndonlyApplyhorizontalPadding / Marges - IdealForninetLetetStyLinSing

La définition du style de liens que vous avez visité peut améliorer l'expérience utilisateur, en particulier dans les sites Web à forte intensité de contenu pour aider les utilisateurs à mieux naviguer. 1. Utilisez CSS: Pseudo-classe visité pour définir le style du lien visité, tels que les changements de couleur; 2. Notez que le navigateur permet uniquement la modification de certains attributs en raison des restrictions de confidentialité; 3. La sélection des couleurs doit être coordonnée avec le style global pour éviter la brutalité; 4. Le terminal mobile peut ne pas afficher cet effet et il est recommandé de le combiner avec d'autres invites visuelles telles que les logos auxiliaires ic?nes.

Utilisez l'attribut Clip-Path de CSS pour recadrer des éléments en formes personnalisées, telles que les triangles, les encoches circulaires, les polygones, etc., sans compter sur des images ou des SVG. Ses avantages incluent: 1. Prend en charge une variété de formes de base telles que le cercle, l'ellipse, le polygone, etc.; 2. Ajustement réactif et adaptable aux terminaux mobiles; 3. Facile à l'animation, et peut être combiné avec le survol ou le javascript pour obtenir des effets dynamiques; 4. Il n'affecte pas le flux de disposition et ne culte que la zone d'affichage. Les usages communs sont tels que le chemin de clip circulaire: cercle (50pxatcenter) et trame de clip Triangle: polygone (50% 0%, 100 0%, 0 0%). Avis

Pour créer des images réactives à l'aide de CSS, elle peut être principalement réalisée grace aux méthodes suivantes: 1. Utilisez la largeur maximale: 100% et hauteur: Auto pour permettre à l'image de s'adapter à la largeur du conteneur tout en maintenant la proportion; 2. Utilisez les attributs SRCSET et tailles de HTML pour charger intelligemment les sources d'image adaptées à différents écrans; 3. Utilisez l'objet-ajustement et la position d'objet pour contr?ler le recadrage d'images et l'affichage de la mise au point. Ensemble, ces méthodes garantissent que les images sont présentées clairement et magnifiquement sur différents appareils.

Différents navigateurs ont des différences dans l'analyse CSS, ce qui entra?ne des effets d'affichage incohérents, y compris principalement la différence de style par défaut, la méthode de calcul du modèle de bo?te, le niveau de support Flexbox et la disposition de la grille et le comportement incohérent de certains attributs CSS. 1. Le traitement de style par défaut est incohérent. La solution consiste à utiliser cssreset ou normaliser.css pour unifier le style initial; 2. La méthode de calcul du modèle de bo?te de l'ancienne version de IE est différente. Il est recommandé d'utiliser la taille d'une bo?te: Border-Box de manière unifiée; 3. Flexbox et Grid fonctionnent différemment dans les cas de bord ou dans les anciennes versions. Plus de tests et utilisent Autoprefixer; 4. Certains comportements d'attribut CSS sont incohérents. Caniuse doit être consulté et rétrogradé.

Le choix des unités CSS dépend des exigences de conception et des exigences réactives. 1.PX est utilisé pour la taille fixe, adaptée à un contr?le précis mais au manque d'élasticité; 2.EM est une unité relative, qui est facilement causée par l'influence de l'élément parent, tandis que REM est plus stable en fonction de l'élément racine et convient à la mise à l'échelle globale; 3.VW / VH est basé sur la taille de la fenêtre, adaptée à la conception réactive, mais l'attention doit être accordée aux performances sous des écrans extrêmes; 4. Lors du choix, il doit être déterminé en fonction de la question de savoir si les ajustements réactifs, les relations de hiérarchie d'éléments et la dépendance de la fenêtre. Une utilisation raisonnable peut améliorer la flexibilité et la maintenance de la disposition.

L'opacité est un attribut de CSS qui contr?le la transparence globale d'un élément, avec des valeurs allant de 0 (entièrement transparente) à 1 (entièrement opaque). 1. Il est souvent utilisé pour l'effet de fondu de planage de l'image et améliore l'expérience interactive en définissant la transition d'opacité; 2. Faire une couche de masque d'arrière-plan pour améliorer la lisibilité au texte; 3. Rétroaction visuelle des boutons de contr?le ou des ic?nes à l'état désactivé. Notez qu'il affecte tous les éléments enfants, contrairement à RGBA, ce qui n'affecte que la partie de couleur spécifiée. L'animation fluide peut être réalisée avec la transition, mais une utilisation fréquente peut affecter les performances. Il est recommandé de l'utiliser en combinaison avec la volonté ou la transformation. L'application rationnelle de l'opacité peut améliorer la hiérarchie des pages et l'interactivité, mais cela devrait éviter d'icher pour interférer avec les utilisateurs.

Accent-Color est un attribut utilisé dans CSS pour personnaliser les couleurs de surbrillance des éléments de formulaire tels que les cases à cocher, les boutons radio et les curseurs; 1. Il modifie directement la couleur par défaut de l'état sélectionné du contr?le de formulaire, tel que la modification de la coche bleue de la case en rouge; 2. Les éléments pris en charge incluent les cases d'entrée de type = "Checkbox", Type = "Radio" et Type = "Range"; 3. L'utilisation de la couleur accent peut éviter les styles personnalisés complexes et les structures DOM supplémentaires et maintenir l'accessibilité native; 4. Il est généralement soutenu par des navigateurs modernes et les anciens navigateurs doivent être rétrogradés; 5. Set Accent-Col
