Tints, Tones und Shades: so baust du eine Farbskala

Tints, Tones und Shades sind die drei Wege, eine Farbe zu verändern, ohne ihren Farbton zu ändern. Ein Tint ist die Farbe mit Weiß gemischt, sie wird heller und weicher. Ein Shade ist die Farbe mit Schwarz gemischt, sie wird tiefer. Ein Tone ist die Farbe mit Grau gemischt, sie wird leiser und gedämpfter. Stell dir Tints, Tones und Shades als Weiß, Grau und Schwarz vor, die einem Farbton beigemischt werden. Ordnest du eine Reihe von Tints und Shades, hast du eine Farbskala: das Werkzeug, das aus einer einzelnen Markenfarbe etwas macht, mit dem du wirklich gestalten kannst.

Tint, Tone und Shade im direkten Vergleich

Den Unterschied siehst du am leichtesten, wenn du von einer Farbe ausgehst und sie in drei Richtungen schiebst. Hier ist die Basis ein Violett, #7c3aed, in Schritten von 20 Prozent gemischt.

Was Tints, Tones und Shades mit einem Design machen

Jede Richtung ändert die Stimmung genauso wie die Farbe. Tints wirken sanft, jung und offen, deshalb bestehen Pastell-Farbpaletten meist aus Tints. Shades wirken reich, ernst und hochwertig, das Terrain dunkler Farbpaletten. Tones wirken erwachsen und natürlich, die Basis fast jeder gedämpften Farbpalette.

So baust du eine Farbskala aus einem Hex-Wert

Die meisten Designsysteme nummerieren ihre Skala von 50 oder 100 (am hellsten) bis 900 (am dunkelsten), mit der Markenfarbe irgendwo um 500. Einheitlichkeit zählt mehr als die Zahlen: Jede Farbe in deinem System sollte dieselben Stufen haben, damit 200 immer einen hellen Hintergrund meint und 700 immer Text. Fünf gut gewählte Stufen schlagen elf, die niemand unterscheiden kann, und Zwischenstufen kannst du ergänzen, sobald echte Designs zeigen, wo sie fehlen.

1. 1

   Platziere deine Markenfarbe

   Entscheide, zu welcher Stufe sie gehört. Eine mittlere Farbe wie #7c3aed sitzt bei 500; ein sehr dunkles Marken-Navy vielleicht bei 800.

2. 2

   Mach das helle Ende

   Misch für 400 bis 50 in Richtung Weiß. Die hellste Stufe sollte kaum gefärbt sein, hell genug für einen Seitenhintergrund.

3. 3

   Mach das dunkle Ende

   Misch für 600 bis 900 in Richtung Schwarz. Die dunkelste Stufe sollte dunkel genug für Fließtext auf der hellsten sein.

4. 4

   Gleich die Stufen an

   Sieh dir die Reihe aus der Entfernung an. Wirken zwei Nachbarn fast gleich und eine andere Lücke wie ein Sprung, korrigiere sie nach Auge.

5. 5

   Verschieb den Farbton an den Enden leicht

   Reines Schwarz kann Shades schmutzig wirken lassen. Viele Designer schieben dunkle Stufen ein paar Grad Richtung Blau oder Violett und helle Richtung warm.

6. 6

   Prüfe die Paare, die aufeinandertreffen

   Teste Textstufen auf Hintergrundstufen auf Kontrast, mit Farbkontrast und Barrierefreiheit als Leitfaden.

Tints und Shades in CSS machen

Du musst nicht mehr jede Stufe von Hand berechnen. CSS color-mix() mischt zwei Farben in einem gewählten Farbraum, sodass eine ganze Skala einer Variable folgen kann. Mischen in OKLCH hält die Stufen fürs Auge gleichmäßiger als normales sRGB, ein Punkt, den OKLCH erklärt behandelt. Die Browserunterstützung ist breit; Details findest du unter color-mix() bei MDN.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Tints und Shades in Farbverläufen

Die saubersten Verläufe sind oft nur ein Farbton, der vom Tint zum Shade wandert. Weil nichts den Farbkreis kreuzt, entsteht in der Mitte kein grauer Streifen, und das Ergebnis wirkt wie Licht, das auf ein einziges Material fällt. Monochrome Farbschemata nutzen dieselbe Idee für ganze Paletten.

Ein Gradiently Mark funktioniert ähnlich: ein Rezept verwandter Farben, durch das Licht läuft. Wenn du darauf gestaltest, vertiefen sich die Farben nahe deinen Worten oder hellen auf, sodass Text ohne Kasten dahinter lesbar bleibt.