Un outil à portée de Sass pour fabriquer des palettes de couleurs équilibrées

Pour ceux qui peuvent ne pas provenir d'un fond de conception, la sélection d'une palette de couleurs est souvent basée sur les préférences personnelles. Le choix des couleurs peut être fait avec un outil de couleurs en ligne, l'échantillonnage à partir d'une image, «emprunter» aux marques préférées, ou tout simplement choisir au hasard dans une roue chromatique jusqu'à ce qu'une palette «se sent bien».

Notre objectif est de mieux comprendre ce qui rend une palette «se sentir bien» en explorant les attributs de couleur clés avec les fonctions de couleur SASS. À la fin, vous vous familiarisera avec:

• La valeur de la graphiques de la luminance, de la légèreté et de la saturation d'une palette pour aider à construire des palettes équilibrées
• L'importance de la construction de contrastes accessibles à vos outils
• Les fonctions SASS avancées pour étendre pour vos propres explorations, y compris un codep que vous pouvez manipuler et fourche

Ce que vous trouverez finalement, cependant, c'est que la couleur sur le Web est une bataille de matériel par rapport à la perception humaine.

Ce qui rend le graphique de couleur utile

Vous êtes peut-être familier avec les moyens de déclarer les couleurs dans les feuilles de style, telles que les valeurs RVB et RGBA, les valeurs HSL et HSLA et les codes hexadécimaux.

 RBG (102,51,153)
RBGA (102,51,153, 0,6)
HSL (270, 50%, 40%)
HSLA (270, 50%, 40%, 0,6)
# 663399

Ces valeurs donnent des instructions sur les appareils sur la façon de rendre la couleur. Les attributs plus profonds d'une couleur peuvent être exposés par programmation et exploités pour comprendre comment une couleur se rapporte à une palette plus large.

La valeur des attributs de couleurs graphiques est que nous obtenons une image plus complète de la relation entre les couleurs. Cela révèle pourquoi une collection de couleurs peut ou non se sentir bien ensemble. Graphiquement à plusieurs attributs de couleur aide à faire allusion à ce que les ajustements peuvent être faits pour créer une palette plus harmonieuse. Nous examinerons les exemples de la façon de déterminer quoi changer dans une section ultérieure.

Deux mesures utiles que nous pouvons obtenir facilement en utilisant les fonctions de couleur SASS intégrées sont la légèreté et la saturation.

• La légèreté fait référence au mélange de blanc ou de noir avec la couleur.
• La saturation fait référence à l'intensité d'une couleur, avec une saturation à 100%, ce qui résulte de la couleur la plus pure (pas de gris présent).

 $ Color: Rebeccapurple;

@Debug Lightss ($ couleur);
// 40%

@Debug Saturation ($ couleur);
// 50%;

Cependant, la luminance peut sans doute être l'attribut de couleur le plus utile. La luminance, représentée dans notre outil, est calculée à l'aide de la formule WCAG qui assume un espace colorimétrique SRGB. La luminance est utilisée dans les calculs de contraste et, en tant que concept plus grand, vise également à se rapprocher de la quantification de la perception humaine de la luminosité relative pour évaluer les relations couleur. Cela signifie qu'une plage de valeur de luminance plus serrée parmi une palette est probablement perçue comme plus équilibrée à l'œil humain. Mais les machines sont faillibles, et il y a des exceptions à cette règle que vous pouvez rencontrer lorsque vous manipulez des valeurs de palette. Pour des informations plus étendues sur la luminance et un espace colorimétrique unique appelé Cielab qui vise à représenter encore plus précisément la perception humaine de l'uniformité des couleurs, voir les liens à la fin de cet article.

De plus, le contraste des couleurs est exceptionnellement important pour l'accessibilité, en particulier en termes de lisibilité et d'éléments d'interface utilisateur distinctifs, qui peuvent être calculés par programme. C'est important en ce que cela signifie que l'outillage peut tester pour passer des valeurs. Cela signifie également que les algorithmes peuvent, par exemple, renvoyer une couleur de texte appropriée lorsqu'ils sont passés dans la couleur d'arrière-plan. Notre outil intègre donc la vérification du contraste en tant que moyen supplémentaire de mesurer comment ajuster votre palette.

Les fonctions démontrées dans ce projet peuvent être extraites pour aider à planifier une palette de systèmes de conception de contraste ou à cuire dans un cadre SASS qui permet de définir un thème personnalisé.

Sass comme outil de construction de palette

SASS fournit plusieurs fonctionnalités de programmation traditionnelles qui le rendent parfait pour nos besoins, tels que la création et l'itération des tableaux et la manipulation des valeurs avec des fonctions personnalisées. Lorsqu'ils sont associés à un IDE en ligne, comme Codepen, qui a un traitement en temps réel, nous pouvons essentiellement créer une application Web pour résoudre des problèmes spécifiques tels que la création d'une palette de couleurs.

Voici un aperçu de l'outil que nous allons utiliser:

Caractéristiques du constructeur de palettes SASS

• Il publie un graphique réactif contrôlé par rapport d'aspect pour le placement précis du point de tracé et la comparaison de la valeur.
• Il exploite le résultat des fonctions de couleur SASS et des calculs mathématiques pour tracer correctement les points sur une échelle de 0 à 100%.
• Il génère un dégradé pour fournir une vue «échantillon» plus traditionnelle.
• Il utilise des fonctions SASS intégrées pour extraire les valeurs de saturation et de légèreté.
• Il crée des fonctions de luminance et de contraste (fourchues à partir de composants Web de matériau en plus de lier les valeurs de canal de couleur linéaire précalculé requises).
• Il renvoie la couleur du texte appropriée pour un arrière-plan donné, avec une variable de paramètres pour modifier le rapport utilisé.
• Il fournit des fonctions pour la saturation et la légèreté à l'échelle uniformément à travers une palette donnée.

Utilisation du constructeur de palettes

Pour commencer, vous souhaiterez peut-être passer parmi les palettes d'exemples fournies pour avoir une idée de la façon dont les valeurs du graphique changent pour différents types de gammes de couleurs. Copiez simplement un nom de variable de palette et échangez-le pour $ par défaut car la valeur de la variable de palette $ peut être trouvée sous la variable de palette de commentaire.

Ensuite, essayez de changer la valeur de variable $ contrasterShreshold entre les ratios prédéfinis, surtout si vous êtes moins familier avec la garantie des directives WCAG de contraste.

Essayez ensuite d'ajuster les valeurs de satelle à échelle de palette $ ou de saturation à l'échelle de la palette. Ceux qui alimentent la fonction de palette et évoluent uniformément ces mesures à travers la palette (jusqu'à la limite de la couleur individuelle).

Enfin, essayez d'ajouter votre propre palette ou échangez des couleurs dans les exemples. L'outil est un excellent moyen d'explorer les fonctions de couleur SASS pour ajuster les attributs particuliers d'une couleur, dont certains sont démontrés dans la palette $ par défaut.

Interpréter les graphiques et créer des palettes équilibrées et accessibles

L'outil graphique est par défaut afficher la luminance car il s'agit de l'indicateur le plus fiable d'une palette équilibrée, comme nous l'avons discuté précédemment. Selon vos besoins, la saturation et la légèreté peuvent être des mesures utiles par elles-mêmes, mais ce sont surtout des signaleurs qui peuvent aider à indiquer ce qui doit être ajusté pour apporter davantage la luminance d'une palette. Une exception peut être de créer une échelle de légèreté basée sur chaque valeur de votre palette établie. Vous pouvez échanger à l'exemple $ Stripeblue pour cela.

La palette $ par défaut a en fait besoin de réglage pour se rapprocher de la luminance équilibrée:

Une palette qui montre une luminance bien équilibrée est l'échantillon de Stripe ($ Stripe):

Voici où l'outil invite un changement d'esprit. Au lieu de manipuler une roue chromatique, il exploite les fonctions SASS pour ajuster programmatiquement les attributs de couleur.

Vérifiez le graphique de saturation pour voir si vous avez de la place pour jouer avec l'intensité de la couleur. Mon ajustement recommandé est d'envelopper votre valeur de couleur avec la fonction de couleur de l'échelle et de passer une valeur de saturation de $ ajustée, par exemple, exemple: couleur échelle (# 41B880, $ saturation: 60%). L'avantage de la couleur de l'échelle est qu'il ajuste fluide la valeur en fonction du pourcentage donné.

La légèreté peut aider à expliquer pourquoi deux couleurs se sentent différentes en attribuant une valeur à leur luminosité mesurée contre les mélanger avec du blanc ou du noir. Dans la palette $ par défaut, la fonction de couleur change est utilisée pour que Purple puisse aligner sa valeur relative de légèreté $ avec la légèreté calculée () de la valeur utilisée pour le rouge.

La fonction de couleur d'échelle permet également de regrouper à la fois une valeur de saturation $ ajustée et de la légèreté, ce qui est souvent le plus utile. Notez que les pourcents fournis peuvent être négatifs.

En utilisant les fonctions SASS et en vérifiant les graphiques de saturation et de la légèreté, le $ par défaut FalanancedLuminance atteint une luminance équilibrée. Cette palette utilise également la fonction Map-Get pour copier les valeurs à partir de la palette $ par défaut et appliquer d'autres ajustements au lieu de les écraser, ce qui est pratique pour tester plusieurs variations telles qu'un changement de teinte à travers une palette.

Prenez une minute pour explorer d'autres fonctions de couleur disponibles.

Le contraste entre en jeu lorsque l'on considère comment les couleurs de palette seront réellement utilisées dans une interface utilisateur. L'outil est par défaut le contraste AA le plus approprié pour tout le texte: 4.5. Si vous construisez pour une interface utilisateur légère, considérez que toute couleur utilisée sur le texte doit obtenir un contraste approprié avec le blanc lors de l'ajustement contre la luminance, indiqué par la couleur centrale du point de l'intrigue.

Astuce: le graphique est configuré avec un arrière-plan transparent, vous pouvez donc ajouter une règle d'arrière-plan sur le corps si vous développez une interface utilisateur plus sombre.

Dès la lecture

La couleur est un sujet expansif et cet article ne touche que les aspects liés aux fonctions SASS. Mais pour vraiment comprendre comment créer des systèmes de couleurs harmonieux, je recommande les ressources suivantes:

• Espaces de couleur - est une plongée profonde super impressionnante avec des modèles interactifs de divers espaces de couleurs et comment ils sont calculés.
• Comprendre les couleurs et la luminance - un aperçu des débutants de MDN sur la couleur et la luminance et leur relation à l'accessibilité.
• Espaces de couleurs perpétuellement uniformes - Plus d'informations sur les systèmes de couleurs perceptuellement uniformes, avec une introduction de l'outil HSLUV qui convertit les valeurs de l'espace colorimétrique HSL plus familier à l'espace colorimétrique du Cieluv régalé par la luminance.
• Systèmes de couleurs accessibles - Une étude de cas de Stripe sur leur expérience de création d'un système de couleurs accessible en créant des outils personnalisés (qui ont inspiré cet exploration et cet article).
• A Nerd's Guide to Color sur le Web - Il s'agit d'une exploration fantastique des mécanismes de couleur sur le Web, disponibles ici sur CSS-Tricks.
• Tanaguru Contrast Finder - Un outil incroyable pour vous aider si vous avez du mal à ajuster les couleurs pour obtenir un contraste accessible.
• Colorbox - une application Web de Lyft qui explore en outre les échelles de couleurs via le graphique.
• Concevoir des couleurs systématiques - Décrit l'effort exceptionnel de l'interface utilisateur minéral pour créer des rampes de couleurs pour soutenir le thème cohérent via une palette de luminance.
• Comment nous avons conçu les nouvelles palettes de couleurs de Tableau 10 - Tableau Exposed Fonctionnalités de leur outil personnalisé qui les a aidés à créer une palette actualisée basée sur Cielab, y compris un aperçu accessible de cet espace colorimétrique.

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!