Für diejenigen, die m?glicherweise nicht aus Designhintergrund stammen, basiert die Auswahl einer Farbpalette h?ufig auf pers?nlichen Vorlieben. Die Auswahl von Farben kann mit einem Online -Farbwerkzeug, der Probenahme aus einem Bild, "Ausleihen" von Lieblingsmarken oder einer Art zuf?llig aus einem Farbrad gepflückt, bis sich eine Palette ?einfach richtig anfühlt“.

Unser Ziel ist es, besser zu verstehen, was eine Palette ?richtig anfühlt“, indem sie Schlüsselfarbattribute mit Sass -Farbfunktionen erkunden. Am Ende werden Sie sich besser vertraut machen:

• Der Wert der Grafik der Luminanz, Leichtigkeit und S?ttigung einer Palette, um ausgewogene Paletten zu bauen
• Die Bedeutung des Aufbaus zug?nglicher Kontrastüberprüfungen in Ihre Tools
• Erweiterte Sass -Funktionen, die sich für Ihre eigenen Erkundungen ausdehnen k?nnen, einschlie?lich eines Codeten

Was Sie jedoch letztendlich feststellen werden, ist, dass Farbe im Web eine Schlacht der Hardware gegen menschliche Wahrnehmung ist.

Was macht Farbgrafik nützlich

M?glicherweise sind Sie mit M?glichkeiten vertraut, Farben in Stylesheets wie RGB- und RGBA -Werten, HSL- und HSLA -Werten und HEX -Codes zu deklarieren.

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

Diese Werte geben Ger?te Anweisungen zum Rendern der Farbe. Tiefere Attribute einer Farbe k?nnen programmgesteuert und genutzt werden, um zu verstehen, wie sich eine Farbe auf eine breitere Palette bezieht.

Der Wert von grafischen Farbattributen besteht darin, dass wir ein vollst?ndigeres Bild der Beziehung zwischen Farben erhalten. Dies zeigt, warum sich eine Sammlung von Farben zusammen anfühlen kann oder nicht. Das Diagramm mehrerer Farbattribute hilft darauf, welche Anpassungen vorgenommen werden k?nnen, um eine harmonischere Palette zu erstellen. Wir werden uns beispielsweise ansehen, wie Sie feststellen k?nnen, was in einem sp?teren Abschnitt ge?ndert werden soll.

Zwei nützliche Messungen, die wir mit eingebauten Sass-Farbfunktionen leicht erhalten k?nnen, sind Leichtigkeit und S?ttigung.

• Leichtigkeit bezieht sich auf die Mischung aus Wei? oder Schwarz mit der Farbe.
• Die S?ttigung bezieht sich auf die Intensit?t einer Farbe, wobei eine 100% ige S?ttigung zu der reinsten Farbe führt (kein Grau vorhanden).

 $ Farbe: Rebeccapurple;

@Debug Lightness ($ color);
// 40%

@Debug S?ttigung ($ color);
// 50%;

Luminanz kann jedoch wohl das nützlichste Farbattribut sein. Luminance, wie in unserem Tool dargestellt, wird unter Verwendung der WCAG -Formel berechnet, die einen SRGB -Farbraum annimmt. Die Luminanz wird in den Kontrastberechnungen verwendet und zielt als gr??eres Konzept auch darauf ab, die menschliche Wahrnehmung der relativen Helligkeit zur Bewertung von Farbbeziehungen n?her zu erreichen. Dies bedeutet, dass ein engerer Luminanzwertbereich unter einer Palette wahrscheinlich als ausgewogen für das menschliche Auge wahrgenommen wird. Maschinen sind jedoch fehlbar, und es gibt Ausnahmen von dieser Regel, auf die Sie bei der Manipulation der Palettenwerte begegnen k?nnen. Ausführlichere Informationen über die Luminanz und einen einzigartigen Farbraum namens Cielab, der darauf abzielt, die menschliche Wahrnehmung der Farbuniformit?t noch genauer darzustellen, siehe die Links am Ende dieses Artikels.

Darüber hinaus ist der Farbkontrast au?ergew?hnlich wichtig für die Zug?nglichkeit, insbesondere in Bezug auf Lesbarkeit und Unterscheidung von UI -Elementen, die programmatisch berechnet werden k?nnen. Dies ist wichtig, da es bedeutet, dass Werkzeuge auf Best?tigungspunkte testen k?nnen. Es bedeutet auch, dass Algorithmen beispielsweise eine geeignete Textfarbe zurückgeben k?nnen, wenn sie in der Hintergrundfarbe übergeben werden. In unserem Tool wird also eine Kontrastprüfung als zus?tzliche M?glichkeit enthalten, um zu beurteilen, wie Sie Ihre Palette anpassen k?nnen.

Die in diesem Projekt gezeigten Funktionen k?nnen extrahiert werden, um eine kontrastsichere Designsystempalette zu planen oder in ein SASS-Framework aufgebrannt zu werden, mit dem ein benutzerdefiniertes Thema definiert werden kann.

Sass als Palettengeb?udewerkzeug

SASS bietet mehrere traditionelle Programmierfunktionen, die es perfekt für unsere Bedürfnisse machen, z. B. das Erstellen und Iterieren durch Arrays und Manipulation von Werten mit benutzerdefinierten Funktionen. In Verbindung mit einer Online-IDE wie CodePen, die in Echtzeit verarbeitet wird, k?nnen wir im Wesentlichen eine Web-App erstellen, um spezifische Probleme wie das Erstellen einer Farbpalette zu l?sen.

Hier ist eine Vorschau des Tools, das wir verwenden werden:

Merkmale des Sass Palette Builder

• Es gibt ein Seitenverh?ltnis-kontrolliertes Responsive-Diagramm aus, um eine genaue Vergleichung der Diagrammpunkte und des Werts zu vergleichenden.
• Es nutzt das Ergebnis von Sass -Farbfunktionen und Mathematikberechnungen, um Punkte auf einer Skala von 0–100% korrekt zu zeichnen.
• Es erzeugt einen Gradienten, um eine traditionellere Swatch -Sicht zu bieten.
• Es verwendet integrierte Sass-Funktionen, um S?ttigungs- und Helligkeitswerte zu extrahieren.
• Es erzeugt Luminanz- und Kontrastfunktionen (von materiellen Webkomponenten aus der Verknüpfung in den erforderlichen vorkundigten linearen Farbkanalwerten).
• Es gibt eine geeignete Textfarbe für einen bestimmten Hintergrund zurück, wobei eine Einstellungsvariable das verwendete Verh?ltnis ?ndern kann.
• Es bietet Funktionen, um die S?ttigung und Leichtigkeit gleichm??ig über eine bestimmte Palette zu skalieren.

Verwenden Sie den Palettenbauer

Zu Beginn m?chten Sie m?glicherweise unter den bereitgestellten Beispielpaletten ausgetauschen, um ein Gefühl dafür zu bekommen, wie sich die Graphenwerte für verschiedene Arten von Farbbereichen ?ndern. Kopieren Sie einfach einen Palettenvariablennamen und tauschen Sie ihn gegen $ Standard als Wert der $ Palette -Variablen aus, die unter dem Kommentar die Palettenvariable auszutauschen.

Versuchen Sie als n?chstes, den Variablenwert des $ -Kontrast -Threshold -Variablens zwischen den vordefinierten Verh?ltnissen zu wechseln, insbesondere wenn Sie weniger vertraut sind, um die WCAG -Richtlinien für Kontrastüberg?nge zu erhalten.

Versuchen Sie dann, die Werte für die Abs?ttigung von $ paletten oder $ palette-scale-s?ttigend anzupassen. Diejenigen, die sich in die Palettenfunktion einfügen und diese Messungen gleichm??ig über die Palette (bis zur Limit der einzelnen Farbe) skalieren.

Schlie?lich versuchen Sie es, Ihre eigene Palette hinzuzufügen, oder tauschen Sie einige Farben innerhalb der Beispiele aus. Das Tool ist eine gro?artige M?glichkeit, SASS -Farbfunktionen zu erkunden, um bestimmte Attribute einer Farbe anzupassen, von denen einige in der $ -Tialt -Palette demonstriert werden.

Interpretieren der Grafiken und Erstellen von ausgewogenen, zug?nglichen Paletten

Das Graphing -Tool ist standardm??ig, um die Luminanz anzuzeigen, da es der zuverl?ssigste Indikator für eine ausgewogene Palette ist, wie wir zuvor diskutiert haben. Abh?ngig von Ihren Bedürfnissen k?nnen S?ttigung und Leichtigkeit selbst nützliche Metriken sein, aber meistens sind sie Signaler, die darauf hinweisen, was sich an die Anpassung eines Paletten -Luminanzs in Anspruch nimmt. Eine Ausnahme kann darin bestehen, eine Helligkeitsskala zu erzeugen, die auf jedem Wert in Ihrer etablierten Palette basiert. Sie k?nnen das Beispiel $ stripeBlue dafür tauschen.

Die $ Standard -Palette muss tats?chlich angepasst werden, um n?her an die ausgewogene Luminanz heranzukommen:

Eine Palette, die eine ausgewogene Luminanz zeigt, ist die Probe von Stripe ($ Stripe):

Hier l?dt das Tool zu einer Verschiebung des Geistes ein. Anstatt ein Farbrad zu manipulieren, nutzt es Sass -Funktionen, um die Farbattribute programmgesteuert anzupassen.

überprüfen Sie das S?ttigungsdiagramm, um festzustellen, ob Sie Platz für die Intensit?t der Farbe haben. Meine empfohlene Einstellung besteht darin, Ihren Farbwert mit der Skala-Farbenfunktion zu wickeln und einen angepassten $ s?ttigenden Wert zu übergeben, z. B. Beispiel: Skalierungsfarb (Nr. 41B880, $ S?ttigung: 60%). Der Vorteil der Skalierung besteht darin, dass er den Wert basierend auf dem angegebenen Prozentsatz flüssig anpasst.

Leichtigkeit kann helfen, zu erkl?ren, warum sich zwei Farben unterschiedlich anfühlen, indem sie ihrer Helligkeit einen Wert zuweist, der gegen das Mischen mit Wei? oder Schwarz gemessen wird. In der $ -Tialt-Palette wird die ?nderungsfarbenfunktion verwendet, damit Purpur den relativen $ Lightness-Wert mit der berechneten Helligkeit () des für den Rot verwendeten Wertes ausrichtet.

Die Skalorfarbenfunktion erm?glicht auch eine angepasste $ s?ttigung als auch $ hellnesswert, was h?ufig am nützlichsten ist. Beachten Sie, dass die Gew?hrleistung negativ sein kann.

Durch die Verwendung von SASS -Funktionen und die überprüfung der S?ttigungs- und Helligkeitsgrafiken erreicht der $ default BalancedLuminance eine ausgewogene Leuchtdichte. Diese Palette verwendet auch die MAP-GET-Funktion, um Werte aus der $ -Stypault-Palette zu kopieren und weitere Anpassungen anzuwenden, anstatt sie zu überschreiben. Dies ist praktisch, um mehrere Variationen wie m?glicherweise eine Farbtonverschiebung über eine Palette zu testen.

Nehmen Sie sich eine Minute Zeit, um andere verfügbare Farbfunktionen zu erkunden.

Kontrast kommt ins Spiel, wenn man überlegt, wie die Palettenfarben tats?chlich in einer Benutzeroberfl?che verwendet werden. Das Tool ist standardm??ig für den AA -Kontrast für den gesamten Text geeignet: 4.5. Wenn Sie für eine leichte Benutzeroberfl?che bauen, sollten Sie bei der Anpassung gegen die Luminanz, die durch die mittlere Farbe des Handlungspunkts angezeigt wird, eine angemessene Farbe für eine angemessene Farbe mit Wei? erzielen.

TIPP: Das Diagramm ist mit einem transparenten Hintergrund eingerichtet, sodass Sie eine Hintergrundregel am K?rper hinzufügen k?nnen, wenn Sie sich für eine dunklere Benutzeroberfl?che entwickeln.

Weitere Lesen

Farbe ist ein expansives Thema und dieser Artikel trifft nur die Aspekte in Bezug auf SASS -Funktionen. Um jedoch wirklich zu verstehen, wie man harmonische Farbsysteme kreiert, empfehle ich die folgenden Ressourcen:

• Farbr?ume-ist ein super beeindruckendes Tiefe mit interaktiven Modellen verschiedener Farbr?ume und ihrer Berechnung.
• Verst?ndnis von Farben und Luminanz-Ein Anf?nger-freundlicher überblick von MDN über Farbe und Luminanz und ihre Beziehung zur Zug?nglichkeit.
• Ewig gleichm??ige Farbr?ume-Weitere Informationen zu Wahrnehmungsuniform-Farbsystemen mit einem Intro-HSLUV, das Werte aus dem bekannteren HSL-Farbraum in den leuchtend abgestimmten Cieluv-Farbton umwandelt.
• Barrierefreie Farbsysteme - Eine Fallstudie von Stripe über ihre Erfahrung auf dem Erstellen eines zug?nglichen Farbsystems durch Erstellen eines benutzerdefinierten Werkzeugs (das diese Erkundung und diesen Artikel inspirierte).
• Ein Nerd's Leitfaden zur Farbe im Web-Dies ist eine fantastische Erkundung der Farbmechanik im Web, die hier auf CSS-Tricks erh?ltlich ist.
• Tanaguru -Kontrastfinder - ein unglaubliches Werkzeug, das hilft, wenn Sie Schwierigkeiten haben, Farben anzupassen, um zug?nglicher Kontrast zu erreichen.
• Colorbox - Eine Web -App von Lyft, die die Farbskalen durch Grafik weiter untersucht.
• Das Entwerfen systematischer Farben-Beschreibt die au?ergew?hnliche Anstrengung der Mineral-UI, Farbrampen zu erstellen, um die konsistente Themen über eine palette mit Luminanz zu unterstützen.
• Wie wir die neuen Farbpaletten in Tableau 10 entworfen haben - Tableau Exponierte Funktionen ihres benutzerdefinierten Tools, die ihnen geholfen haben, eine aktualisierte Palette zu erstellen, die auf Cielab basiert, einschlie?lich eines zug?nglichen überblicks über diesen Farbraum.

Das obige ist der detaillierte Inhalt vonEin handliches Sass-angetriebenes Werkzeug zur Herstellung ausgewogener Farbpaletten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!