Ein grundlegender Überblick über das Erstellen eines dynamischen und konfigurierbaren Farbschemas
In diesem Beitrag möchte ich Ihnen Möglichkeiten zur Verwaltung mehrerer Farbschemas in CSS vorstellen. Demo ansehen.
Falls du lieber ein Video hast, findest du hier eine YouTube-Version dieses Beitrags:
Überblick
Wir erstellen ein barrierefreies Farbsystem mit benutzerdefinierten Eigenschaften und calc(). So wird eine Webseite erstellt, die sich an die Nutzereinstellungen anpasst und dabei wenig Arbeitsaufwand für die Erstellung hat. Wir beginnen mit einer Grundfarbe der Marke und erstellen ein System mit Varianten davon: 2 Textfarben, 4 Flächenfarben und einen passenden Schatten.
In dieser Anleitung werden zuerst alle Farben für jedes Farbschema definiert. Erst am Ende werden sie dazu gewöhnt, die Seite zu ändern.
Die Marke
Oft wurde bereits eine Markenfarbe festgelegt und wird als Hexadezimalwert oder RGB-Wert bereitgestellt. Diese GUI-Challenge hat die Basismarkenfarbe #0af. Für dieses Farbsystem muss zuerst der Hexadezimalwert in hsl umgewandelt werden.
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
Um ein Konzept der Abdunkelung oder Aufhellung der Markenfarbe zu ermöglichen (z. B. 20 %), müssen die drei Channels des HsL-Farbwerts in eigene benutzerdefinierte Eigenschaften extrahiert werden:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS kann Berechnungen für diese Farbeigenschaften durchführen, z. B. calc(var(--brand-lightness) -
20%), um den Helligkeitswert um 20 % zu verringern. Dies ist die Grundlage für das Erstellen eines Farbschemas, da mit CSS alle Farben in derselben Farbtonfamilie gehalten werden können. Dazu werden die HSL-Sättigung und -Helligkeit angepasst.
Helles Design
Jede Farbvariante wird mit dem passenden Schema markiert, in diesem Fall wird jede Farbvariante mit -light angehängt.
Marke
Beginnend mit der Markenfarbe wird sie neu erstellt, indem die benutzerdefinierten Eigenschaften --brand-hue, --brand-saturation und --brand-lightness in die Klammern der Funktion () der HTML-Datei eingefügt werden, ohne dass Berechnungen erforderlich sind:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Schriftfarben
Als Nächstes brauchen die Grundlagen eines Farbschemas Textfarben. In einem hellen Design sollte der Text sehr dunkel sein. Die Helligkeit der folgenden Farben ist gering und liegt deutlich unter 50%.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light, da es mit einer Helligkeit von 10% sehr dunkel ist, behält die hohe Sättigung von 100 % bei, damit die Markenfarbe weiterhin in das dunkle, dunkle Marineblau eindringen kann.
--text2-light ist nicht ganz so dunkel wie die erste Farbe. Das ist gut, da es sich um eine sekundäre Farbe handelt. Außerdem ist sie viel weniger gesättigt.
Oberflächenfarben
Oberflächenfarben sind die Hintergründe, Rahmen und andere dekorative Oberflächen, auf denen Text liegt oder in denen sich Text befindet. Im hellen Design sind dies die hellen Farben im Gegensatz zu den dunklen Textfarben. Um mit „hsl“ helle Farben zu erzeugen, verwenden wir für den dritten Helligkeitswert höhere Prozentwerte. Außerdem verringern wir die Sättigung, damit die Hellgrautöne nicht zu stark erscheinen.
* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}
Es wurden vier Oberflächenfarben entwickelt, da dekorative Farben in der Regel mehr Varianten benötigen, z. B. für interaktive Elemente wie :focus oder :hover oder für das Aussehen von Papierschichten. In diesen Szenarien ist es angenehm, --surface2-light beim Bewegen des Mauszeigers auf --surface3-light zu übertragen, sodass der Kontrast erhöht wird (99% Helligkeit bis 92% Helligkeit, wodurch er dunkler wird).
Schatten
Schatten in einem Farbschema sind über und über hinaus, verleihen dem Effekt jedoch einen lebensechten Charakter und heben sich von unrealistischen, schwarzen Schatten ab. Dazu wird für die Farbe des Schattens die benutzerdefinierte Eigenschaft „hue“ verwendet. Diese ist leicht mit dem Farbton gesättigt, aber immer noch sehr dunkel. Im Grunde wird ein sehr dunkler, hellblauer Schatten erstellt.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light ist nicht in eine Hsl-Funktion eingebunden. Das liegt daran, dass der --shadow-strength-Wert zu einer etwas Deckkraft kombiniert wird und CSS die Teile benötigt, um Berechnungen durchzuführen. Weitere Informationen finden Sie im Abschnitt radschatten.
Helle Farben zusammen
Sie müssen nicht erst lange suchen, um herauszufinden, wie die hellen Farben hergestellt werden. Sie finden sie alle an einem Ort im CSS.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}
Dunkles Design
Die meisten Marken beginnen nicht mit einem dunklen Design, es ist eine Variante des primären, meist helleren Designs. Nutzer hingegen wählen oft ein dunkles Design für verschiedene Kontexte wie Nacht. Diese Faktoren haben mich dazu veranlasst, bei dunklen Designs zwei Dinge zu beachten:
- Da sich die Nutzer während der Verwendung dieses Designs im Allgemeinen im Dunkeln befinden, sollten Sie es im Dunkeln testen.
- Die Farben sollten entsättigt werden, damit sie nicht auf dem Bildschirm vibrieren, weil sie zu intensiv sind.
Marke
Beim hellen Design wurden die drei Werte für die HSL-Farbkanäle unverändert verwendet, beim dunklen Design nicht. Die Sättigung wird halbiert und die Helligkeit um 50 % reduziert.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Schriftfarben
In einem dunklen Design sollten die Textfarben hell sein. Die folgenden Farben haben hohe Helligkeitswerte, sodass sie näher an Weiß liegen.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
Oberflächenfarben
Bei einem dunklen Design sollten die Oberflächenfarben dunkel sein. Die folgenden Farben haben eine geringe Helligkeit und Sättigung, wobei die erste Oberfläche mit 10 % die dunkelste ist.
* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}
Schatten
In einem dunklen Design sind Schatten manchmal sehr schwer zu erkennen. Das macht Sinn, da es schwer ist,
etwas abzudunkeln, das bereits ziemlich dunkel ist. Hier ist --shadow-strength-dark besonders praktisch, da wir die Schatten durch Ändern einer Variablen abdunkeln können.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Prüfen Sie auch, wie stark die Sättigung in diesem Schatten ist. Erkennen Sie die Farbe in der Benutzeroberfläche? Versuchen Sie, die Sättigung der Entwicklertools zu beseitigen.
Dunkle Farben zusammen
* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Design dimmen
Bei diesem Farbschema geht es darum, Helligkeit und Sättigung zu orchestrieren. Es sollte genügend Sättigung vorhanden sein, damit ein Farbton weiterhin sichtbar ist, aber die Kontrastwerte sollten kaum erreicht werden, da ohnehin gedimmt und wenig Kontrast verwendet werden soll.
Marke
* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}
Schriftfarben
* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}
Oberflächenfarben
* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}
Schatten
* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Farben abdunkeln
* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Barrierefreie Farben
Beachten Sie, dass die geringste Helligkeit in der dunklen Textfarbe 65% und die höchste Helligkeit in den dunklen Oberflächen 25 % beträgt. Das sind 40% der Helligkeit, die Raum zwischen ihnen bildet. Beim hellen Design gibt es 55% Raum zum Durchatmen. Wenn die Helligkeitsunterschiede zwischen Text- und Oberflächenfarben bei etwa 40 bis 50% liegen, können die Farbkontraste hoch bleiben und auch bei schlechteren Punktzahlen lassen sich sie problemlos anpassen.
Ich nenne es „bump bump til ya pass“, also die Interaktion, mit der der Helligkeitswert erhöht wird, bis ein Tool anzeigt, dass
Alle Themen, die in diesem Wettkampf erstellt wurden, bestehen die unterschiedlichen Ergebnisse. Das abgedunkelte Farbschema hat den niedrigsten Kontrast, erfüllt aber dennoch die Mindestanforderungen. Um den anderen Teammitgliedern zu helfen, gute Kontrastfarben zu verwenden, empfiehlt es sich, einen Klassennamen zu erstellen, der eine Oberflächenfarbe mit einer barrierefreien Textfarbe kombiniert.
.surface1 {
background-color: var(--surface1);
color: var(--text2);
}
.surface2 {
background-color: var(--surface2);
color: var(--text2);
}
.surface3 {
background-color: var(--surface3);
color: var(--text1);
}
.surface4 {
background-color: var(--surface4);
color: var(--text1);
}
Starker Schatten
Die Designs verwenden eine Dienstprogrammklasse namens .rad-shadow. Der Schatten wurde mit dem Tool Smooth Shadow generiert, was ich sehr schätze. Ich habe das generierte Snippet mit meinen eigenen Farben und Deckkraftberechnungen angepasst. Der Grund dafür war, einen Schatten zu schaffen,
den ich in jedem Farbschema anpassen kann.
Dazu habe ich zwei Variablen für jedes anzupassende Farbschema erstellt: eine Schattenfarbe und eine Schattenstärke. Die Farbe dient der Anpassung von Sättigung und Dunkelheit, während die Stärke eine einfache Möglichkeit ist, die Schattenintensität zu erhöhen, wenn es sich um ein dunkles Farbschema handelt. Das Endergebnis war in etwa so.
:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}
Mit Schatten in meinem Farbschema würde ich auch die Schattenwinkel zu einer Konstanten machen, da die Lichtrichtung zwischen allen Schattenn des Designs gleich sein sollte.
Verwendung der Farbschemata
Nachdem die Farben vorab definiert wurden, ist es an der Zeit, sie in schemaunabhängige Eigenschaften umzuwandeln. Als CSS-Autor in diesem Farbschemaprojekt sollte man nur selten auf den Wert eines bestimmten Farbschemas zugreifen müssen. Es soll einfach sein, beim Design zu bleiben.
Dazu sollte das Farbschema ausschließlich über die generischen benutzerdefinierten Eigenschaften verwendet werden, die wir gleich definieren werden. Auf diese Weise müssen sich Nutzer, die die Designvariablen verwenden, nie darüber Gedanken machen, welches Farbschema aktuell festgelegt ist. Sie müssen nur die Oberflächen- und Textfarben verwenden. Verwenden Sie anstelle von color: var(--text1-light) color: var(--text1). Alle Anpassungen und Neuausrichtungen
von Farben werden in CSS vorgenommen.
Die Verbindungsstile des hellen Designs im folgenden Codeblock verbinden eine generische benutzerdefinierte Eigenschaft mit der spezifischen Farbe des hellen Designs. Jetzt wird bei jeder Verwendung von var(--brand) die helle Markenfarbe verwendet.
Helles Design (automatisch)
:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Für die Website wird jetzt das helle Design verwendet. Das ist ein sehr erfolgreicher Moment! Wir haben noch ein paar Momente, in denen wir unsere vordefinierten Farben in anderen Kontexten von Farbschemata verwenden.
Dunkles Design (automatisch)
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}
Helles Design
[color-scheme="light"] {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Dunkles Design
[color-scheme="dark"] {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
Design dimmen
[color-scheme="dim"] {
color-scheme: dark;
--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}
An dieser Stelle können die Autoren die bereitgestellten generischen Farbschemata nach Bedarf verwenden und sollten sich nie wieder Gedanken über Themen machen müssen.
Fazit
Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du es tun?! 🙂
Diversifizieren wir unsere Ansätze und lernen Sie alle Möglichkeiten kennen, wie wir das Web nutzen können. Erstelle einen Codepen oder veranstalte deine eigene Demo, twittere mich mit ihr und ich füge sie unten zum Abschnitt „Community-Remixe“ hinzu.
Quelle
Community-Remixe – @chris-kruining hat einen Farbtonregler, Statusfarben und Kontrastmodi für no-preference, more und less hinzugefügt: Demo.