Korbinian Polk • mail: mail@korbinianpolk.eu • tel: +49 176 / 3957 72 63

Farben

Namenskonventionen

Das Farbsystem besteht aus 2 Schichten:

  1. Hue-Farbpalette: 11 vordefinierte Grundfarben (+ Grau) und jeweils 9 Helligkeitsabstufungen – sie definiert alle benutzbaren Farben.
  2. „Semantische“ Farbpalette: Jede semantische Farbe referenziert eine der Grundfarben.

Dieser Ansatz erlaubt es Farben im Nachhinein zu ändern ohne dass die Webseite visuell inkonsistent wird und Farbalternativen für den Dark-Mode zu definieren.

Die Hue-Farbpalette

Die 11 Grundfarben werden im HSL-Farbmodell (H = Hue/Farbwert, S = Saturation/Farbsättigung, L = Lightness/Hellwert) definiert. Die Farbwerte liegen dabei in diskreten Abständen von 15° auf dem Hue-Kreis voneinander entfernt, die Sättigungs- und Helligkeitswerte ungefähr im gleichen Bereich damit die Farben gut harmonieren.

Alle Farben sind als Custom Properties (aka CSS Variables) angelegt, die hellen/dunklen Varianten werden automatisch berechnet.

  • Für helle Varianten wird der Lightness-Wert erhöht und die Saturation verringert.
  • Für dunkle Varianten wird Lightness reduziert und Saturation erhöht.

Damit das funktioniert sind die Werte für H/S/L getrennt voneinander angegeben. z.B.:


  // Nur diese Werte sollten verändert werden:

  --color-red-h: 0; 
  --color-red-s: 80%; 
  --color-red-l: 50%;

  // Automatische Farbwertberechnung, bitte nicht anfassen:

  --color-red: hsl(var(--color-red-h), var(--color-red-s), var(--color-red-l));

  --color-red-100: hsl(var(--color-red-h), calc(var(--color-red-s) - 20%), calc(var(--color-red-l) + 40%));
  --color-red-200: hsl(var(--color-red-h), calc(var(--color-red-s) - 15%), calc(var(--color-red-l) + 30%));
  --color-red-300: hsl(var(--color-red-h), calc(var(--color-red-s) - 10%), calc(var(--color-red-l) + 20%));
  --color-red-400: hsl(var(--color-red-h), calc(var(--color-red-s) - 05%), calc(var(--color-red-l) + 10%));
  --color-red-500: hsl(var(--color-red-h), calc(var(--color-red-s) + 00%), calc(var(--color-red-l) - 0%));
  --color-red-600: hsl(var(--color-red-h), calc(var(--color-red-s) + 05%), calc(var(--color-red-l) - 10%));
  --color-red-700: hsl(var(--color-red-h), calc(var(--color-red-s) + 10%), calc(var(--color-red-l) - 20%));
  --color-red-800: hsl(var(--color-red-h), calc(var(--color-red-s) + 15%), calc(var(--color-red-l) - 30%));
  --color-red-900: hsl(var(--color-red-h), calc(var(--color-red-s) + 20%), calc(var(--color-red-l) - 40%));

Für jede Farbe ist eine Klasse und ein SASS-Mixin vordefiniert damit man schnell Blöcke einfärben kann. Die Textfarbe wird automatisch so gesetzt dass der Kontrast hoch genug ist.z.B:

@mixin bg-red-600 {
  background-color: var(--color-red);  
  color: var(--color-white); 
}

.bg-red-600 {
  @include bg-red-600;
}

Grey HSL(225, 10%, 50%)

Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900

Red HSL(0, 80%, 50%)

Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900

Orange HSL(30, 80%, 55%)

Orange 100
Orange 200
Orange 300
Orange 400
Orange 500
Orange 600
Orange 700
Orange 800
Orange 900

Yellow HSL(45, 100%, 55%)

Yellow 100
Yellow 200
Yellow 300
Yellow 400
Yellow 500
Yellow 600
Yellow 700
Yellow 800
Yellow 900

Lime HSL(60, 65%, 50%)

Lime 100
Lime 200
Lime 300
Lime 400
Lime 500
Lime 600
Lime 700
Lime 800
Lime 900

Green HSL(135, 55%, 50%)

Green 100
Green 200
Green 300
Green 400
Green 500
Green 600
Green 700
Green 800
Green 900

Cyan HSL(180, 80%, 45%)

Cyan 100
Cyan 200
Cyan 300
Cyan 400
Cyan 500
Cyan 600
Cyan 700
Cyan 800
Cyan 900

Teal HSL(195, 70%, 55%)

Teal 100
Teal 200
Teal 300
Teal 400
Teal 500
Teal 600
Teal 700
Teal 800
Teal 900

Blue HSL(225, 60%, 50%)

Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900

Indigo HSL(240, 70%, 52%)

Indigo 100
Indigo 200
Indigo 300
Indigo 400
Indigo 500
Indigo 600
Indigo 700
Indigo 800
Indigo 900

Purple HSL(270, 80%, 50%)

Purple 100
Purple 200
Purple 300
Purple 400
Purple 500
Purple 600
Purple 700
Purple 800
Purple 900

Pink HSL(330, 80%, 50%)

Pink 100
Pink 200
Pink 300
Pink 400
Pink 500
Pink 600
Pink 700
Pink 800
Pink 900

Beispiel für eine „semantische“ Farbpalette:

  --color-text: var(--color-indigo-900);
  --color-links: var(--color-blue);
  --color-links-hover: var(--color-blue-800);
  --color-primary: var(--color-indigo-800);
  --color-accent: var(--color-pink);
  --color-neutral: var(--color-grey-300);
  --color-error: var(--color-red);
  --color-warning: var(--color-yellow);
  --color-success: var(--color-green);
  --color-info: var(--color-teal);

Weiterführende Informationen