Ein Farbschema erstellen

Ein grundlegender Überblick darüber, wie ein dynamisches und konfigurierbares Farbschema erstellt wird

Adam Argyle

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie mehrere Farbschemas verwalten können. in CSS ein. Demo ansehen.

Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:

Übersicht

Wir entwickeln ein barrierefreies Farbsystem mit benutzerdefinierten Eigenschaften und calc(), eine Webseite erstellen, die sich an die Nutzerpräferenzen anpasst und die Erstellung nicht sehr spürbar ist. Wir beginnen mit einer Basisfarbe und bauen ein System aus Varianten davon: 2 Textfarben, 4 Oberflächenfarben und ein passender Schatten.

Diese Anleitung beginnt mit der Definition aller Farben für jedes Farbschema vorne. Erst am Ende werden sie daran gewöhnt, die Seite zu ändern.

Die Marke

Oft wurde bereits eine Markenfarbe festgelegt und hex oder rgb: GUI-Challenge hat die Basismarkenfarbe #0af. Für dieses Farbsystem muss der Hexadezimalwert auf hsl.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

Um ein Konzept der Abdunkelung oder Aufhellen der Markenfarbe zu ermöglichen, 20 % müssen die 3 Channels des HSL-Farbwerts wie hier gezeigt:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS kann diese Farbeigenschaften berechnen, z. B. calc(var(--brand-lightness) - 20%), um den Helligkeitswert um 20 % zu verringern. Dies ist die Grundlage für den Aufbau einer Farbschema, da CSS alle Farben in derselben Farbfamilie behalten kann, indem das HSL-Sättigung und Helligkeit.

Helles Design

Jede Farbvariante wird mit ihrem entsprechenden Schema gekennzeichnet, in diesem Fall jede mit dem Zusatz -light versehen.

Marke

Ausgehend von der Markenfarbe wird sie neu erstellt, indem --brand-hue und --brand-saturation umschlossen werden. und --brand-lightness in der Klammer der HSL-Funktion (). ohne Berechnungen:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

Schriftfarben

Als Nächstes benötigen die Grundlagen eines Farbschemas Textfarben. In einem hellen Design sehr dunkel sein. Beachten Sie, dass die Helligkeit der folgenden Farben gering ist, 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 bei 10% Helligkeit sehr dunkel ist, bleiben die satten 100 % erhalten damit die Markenfarbe bis ins dunkle Dunkelmarine passt.

--text2-light, sie ist nicht ganz so dunkel wie die erste Farbe, was gut ist eine Sekundärfarbe, und sie ist auch viel weniger gesättigt.

Oberflächenfarben

Oberflächenfarben sind Hintergründe, Rahmen und andere dekorative Oberflächen, auf oder innerhalb von Texten. Bei einem hellen Design sind dies die hellen Farben, im Gegensatz zu den dunklen Textfarben. Um helle Farben mit HSL zu erstellen, verwenden wir im dritten Helligkeitswert höhere Prozentwerte. Außerdem senken wir damit die hellen Grautöne nicht zu färbt 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 erstellt, da dekorative Farben in der Regel mehr benötigen. für interaktive Momente wie :focus oder :hover oder zum Erstellen der das Aussehen von Papierschichten. In diesen Fällen ist es schön, --surface2-light, wenn der Mauszeiger auf --surface3-light bewegt wird. Wenn der Mauszeiger darauf bewegt wird, erscheint eine Kontrasterhöhung (99% bis 92% Helligkeit; macht es dunkler).

Schatten

Die Schatten in einem Farbschema sind unübertroffen, verleihen dem Ganzen aber eine lebensechte Natur. und sorgt dafür, dass er sich von unrealistischen schwarzen Schatten abhebt. Aufgabe wird für die Farbe des Schattens die benutzerdefinierte Eigenschaft "hue" verwendet, mit dem Farbton gesättigt, aber immer noch sehr dunkel. Im Grunde genommen besteht der Aufbau einer sehr dunklen leicht blauer Schatten.

* {
  --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 Der --shadow-strength-Wert wird kombiniert, um die Deckkraft zu erhöhen, und CSS-Anforderungen um Berechnungen durchzuführen. Weiter zum radierenden Schatten finden Sie weitere Informationen.

Helle Farben zusammen

Sie müssen nicht erst lange suchen, um herauszufinden, wie die Lichtfarben hergestellt werden. Sie sind alles 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;
}

</ph>

Dunkles Design

Die meisten Marken beginnen nicht mit einem dunklen Design, es ist eine Variante in der Regel ein helleres Design. Nutzer entscheiden sich hingegen häufig für ein dunkles Design in verschiedenen Kontexten, wie z. B. zur Nacht. Aufgrund dieser Faktoren habe ich zwei mit dunklen Designs:

1. Die Nutzer sind im Dunkeln, wenn sie dieses Design verwenden. dunkel.
2. Die Farben sollten entsättigt werden, um nicht auf dem Bildschirm zu vibrieren. zu intensiv.

Marke

Beim hellen Design wurden die drei Marken-HSL-Farbkanäle unverändert verwendet. beim dunklen Design nicht. Die Sättigung wird halbiert und die Helligkeit verringert relativ 50%.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

Schriftfarben

Bei einem dunklen Design sollten die Textfarben hell sein. Die folgenden Farben haben hohe für Helligkeit, sodass sie dem Weißwert näher kommen.

* {
  --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 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 sehr schwer zu erkennen. Sinnvoll, da es schwierig ist, etwas verdunkeln, das schon ziemlich dunkel ist. Hier finden Sie --shadow-strength-dark ist sehr praktisch, denn damit können wir indem Sie eine Variable ändern.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

Sehen Sie sich auch an, wie viel Sättigung in diesem Schatten ist. Siehst du die Farbe? wenn Sie sich die Benutzeroberfläche ansehen? Versuchen Sie, die Sättigung des devtools, was bevorzugen Sie?

Dunkle Farben insgesamt

* {
  --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;
}

</ph>

Design dimmen

Bei diesem Farbschema geht es darum, Helligkeit und Sättigung zu koordinieren. Es Die Sättigung sollte so groß sein, dass ein Farbton sichtbar ist. Kontrastwerte werden nur knapp erreicht, sollte trotzdem gedimmt und mit geringem Kontrast verwendet werden.

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;
}

</ph>

Barrierefreie Farben

Beachten Sie, dass die niedrigste Helligkeit der dunklen Textfarbe bei 65% liegt und Die höchste Helligkeit in den dunklen Oberflächen beträgt 25%. Das entspricht 40% der Helligkeit und Raum zwischen ihnen schaffen. Beim hellen Thema haben wir 55 % das helle Design. Helligkeitsunterschiede zwischen Text- und Oberflächenfarben beibehalten von etwa 40 bis 50% kann dazu beitragen, die Farbkontrastverhältnisse hoch zu halten, und gleichzeitig wenn die Werte niedrig sind.

Ich nenne es „bump bump til ya pass“, also die Interaktion bis das Tool anzeigt, dass ich übergebe.

Jedes der in diesem Wettkampf erstellten Themen besteht gegen die Punktzahlen. Das abgedunkelte Farbschema hat den niedrigsten Kontrast, erfüllt aber dennoch die Mindestanforderungen. Um anderen im Team dabei zu helfen, gute Kontrastfarben zu verwenden, empfiehlt es sich, einen Klassennamen zu erstellen, der eine Oberflächenfarbe mit einer barrierefreien Textfarbe verbindet.

.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);
}

</ph>

Strahlender Schatten

In den Designs wird eine Dienstprogrammklasse namens .rad-shadow verwendet. Dieser Schatten wurde generiert. Smooth Shadow-Tool, das ich sehr . Ich habe das generierte Snippet mit eigenen Farben angepasst und Deckkraftberechnungen. Der Grund dafür war, einen Schatten zu erstellen, den ich anpassen konnte. in jedem Farbschema.

Um dies zu erreichen, habe ich zwei Variablen für jedes Farbschema erstellt, die angepasst werden sollte. Farbe und Stärke des Schattens. Die Farbe ist für Sättigung und Dunkelheit bestimmt. Anpassungen, während die Stärke eine einfache Möglichkeit darstellt, den Schatten nach oben zu treiben wenn es sich um ein dunkles Farbschema handelt. Das Endergebnis sah in etwa so aus.

: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 den Schatten Winkeln ein Designtoken konstant, da die Lichtrichtung gleich sein sollte alle Schatten des Designs zu erkennen.

Verwendung der Farbschemata

Nachdem die Farbvorgabe abgeschlossen ist, ist es an der Zeit, sie in Schema-unabhängige Eigenschaften. Ich meine, als Preisvergleichsportal innerhalb dieses Farbschemaprojekts verwendet, sollte man nur selten auf ein eines bestimmten Farbschemas angeben. Ich möchte dafür sorgen, dass es ganz einfach ist, beim Design zu bleiben.

Hierzu sollte die Verwendung des Farbschemas den generischen benutzerdefinierten Eigenschaften, die wir gleich definieren werden. Auf diese Weise Menschen, die die Designvariablen verwenden, müssen sich keine Gedanken darüber machen, welches Farbschema müssen nur die Oberflächen- und Textfarben verwendet werden. Anstelle von color: var(--text1-light) verwenden color: var(--text1). Alle Anpassungen und Neuausrichtungen auf einer viel höheren Ebene in der CSS festzulegen.

Sehen wir uns die Verbindungsstile des hellen Designs im folgenden Codeblock an. eine generische benutzerdefinierte Eigenschaft mit der spezifischen Farbe des hellen Designs verbinden. Jetzt alle wird bei 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 verwenden unsere vordefinierten Farben in anderen Kontexten für Farbschemata.

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 wie folgt verwenden: und sollte sich nie wieder Gedanken über Themen machen.

Fazit

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! 🙂

Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstellen Sie einen Codepen oder hosten Sie Ihre eigene Demo, twittern Sie mich mit dem Code und ich füge ihn zur Community-Remixe weiter unten.

Quelle

• Quelle für GUI Challenges auf GitHub
• Farbschema: Codepen-Auslöser

Community-Remixe – @chris-kruining hat einen Farbtonregler hinzugefügt. Statusfarben und Kontrastmodi für no-preference, more und less: Demo