Farbtongenerator

Tönungen vs. Schattierungen

Tönungen entstehen durch Mischen einer Farbe mit Weiß, sodass sie schrittweise heller wird. Schattierungen entstehen durch Mischen mit Schwarz, sodass sie dunkler wird. Zusammen bilden sie eine vollständige Tonleiter, die für UI-Design, Verläufe, Hover-Zustände und barrierefreie Farbsysteme nützlich ist.

Häufig gestellte Fragen

Wie verwende ich diese Schattierungen?

Verwenden Sie hellere Tönungen für Hintergründe, Hover-Zustände und Rahmen. Verwenden Sie dunklere Schattierungen für Text, aktive Zustände und Hervorhebungen. Klicken Sie auf „Alle als CSS-Variablen kopieren", um ein einsatzbereites CSS-Snippet zu erhalten.

Kann ich einzelne Farben kopieren?

Ja! Klicken Sie auf eine beliebige Farbprobe, um ihren HEX-Wert in die Zwischenablage zu kopieren.

Tint, Shade und Tone, die formalen Definitionen

Drei Begriffe werden lose verwendet; die klassische Farbenlehre unterscheidet sie präzise:

• Tint = Grundfarbe + Weiß. Heller und blasser. Rosa ist ein Tint von Rot; Himmelblau ist ein Tint von Blau.
• Shade = Grundfarbe + Schwarz. Dunkler und tiefer. Kastanienbraun ist ein Shade von Rot; Marineblau ist ein Shade von Blau.
• Tone = Grundfarbe + Grau. Weniger gesättigt, gedämpfter. Fügt Nuance hinzu, ohne die Helligkeit stark zu verändern.

Dieser Generator erzeugt Tints (heller als die Grundfarbe) und Shades (dunkler). Tones (durch Hinzufügen von Grau statt Weiß oder Schwarz) sind nützlich für gedämpfte, anspruchsvolle Paletten (denken Sie an Farbsysteme der Innenarchitektur der 1970er-Jahre), werden aber bei typischer UI-Arbeit selten benötigt.

Warum moderne Designsysteme numerische Skalen verwenden

Tailwind CSS machte die numerische Skala 50-100-200-…-900-950 pro Farbe populär, wobei der Stopp „500“ konventionell als Grundfarbe behandelt wird. Material Design verwendet ein paralleles System 50-100-…-900; Bootstrap 5 verwendet 100-…-900; IBM Carbon verwendet 10 Stopps pro Farbmuster. Die gemeinsame Idee: Eine einzelne Markenfarbe reicht selten aus, Benutzeroberflächen benötigen konsistente Varianten für Hover-Zustände, Hintergründe, Rahmen, Fokusringe, deaktivierte Zustände, Badges und Dark-Mode-Entsprechungen. Eine vorhersehbare numerische Skala liefert diese Varianten auf eine Weise, die über Komponenten hinweg portierbar, beim Weiterentwickeln der Marke refaktorierbar und für jeden, der die Codebasis liest, auffindbar ist.

Wie verschiedene Algorithmen die Skala berechnen

Es gibt drei gängige Wege, eine Tint-/Shade-Skala zu berechnen, mit unterschiedlichen visuellen Ergebnissen:

• RGB-Mischung mit Weiß / Schwarz. Die kunsttheoretische Definition. Erzeugt getreue Tints und Shades, berücksichtigt aber keine wahrnehmungsbezogene Gleichmäßigkeit, Gelbtöne entsättigen schnell, Blautöne bleiben kräftig.
• HSL-Helligkeitsanpassung. Schnell und einfach: den L-Kanal für Tints nach oben, für Shades nach unten schieben. Der häufigste Ansatz in älteren Werkzeugen. Der Nachteil ist, dass die Helligkeit von HSL nicht wahrnehmungsgleichmäßig ist, Gelb bei 50 % L wirkt viel heller als Blau bei 50 % L, sodass eine durch HSL-Schrittweite aufgebaute Palette über die Farbtöne hinweg ungleichmäßig aussieht.
• OKLCH- oder CIELAB-Helligkeitsskalierung. Der moderne, wahrnehmungsgleichmäßige Ansatz. Das L in OKLCH ist so kalibriert, dass sich „200 → 300 → 400“ wie derselbe Schritt anfühlt, unabhängig vom Farbton. Tailwind v4 (veröffentlicht im Januar 2025) baute alle seine Standardpaletten genau aus diesem Grund um OKLCH herum neu auf.

Wenn Ihre Skala jemals „flach“ aussieht (Gelbschritte, die ausbleichen, Blauschritte, die sich alle als dasselbe Dunkelblau lesen), liegt das fast immer daran, dass die zugrunde liegende Mathematik HSL-basiert statt OKLCH-basiert ist. Modernes CSS (CSS Color Module Level 4) stellt oklch(), lab() und color-mix(in oklch, …) direkt bereit, was wahrnehmungsgleichmäßige Skalen zu einem Einzeiler ohne externes Werkzeug macht.

Anwendungsfälle

• Ein Designsystem aus einer einzelnen Markenfarbe aufbauen. Wählen Sie den Marken-HEX, erzeugen Sie die Skala, kopieren Sie die CSS-Variablen, liefern Sie aus.
• Eine Tailwind-colors-Map anpassen. Ersetzen Sie die Standard-Markenfarbe durch Ihre eigene Skala mit 11 Stopps.
• UI-Hover- und Fokuszustände. Ein gängiges Muster: Der Schaltflächenhintergrund verwendet die 500, Hover die 600, Aktiv die 700, der Fokusring die 400 bei geringer Deckkraft.
• Hintergründe und Elevation. Kartenhintergründe verwenden die 50; dezente Rahmen die 200; deaktivierter Text die 400.
• Dark-Mode-Entsprechungen. Viele Systeme erzeugen eine parallele Dark-Mode-Skala, statt die helle mathematisch zu invertieren, Farben, die auf Weiß ausgewogen aussehen, sehen auf Fast-Schwarz nicht immer ausgewogen aus.
• Mockup-Varianten. Vergleichen Sie schnell drei Markenkandidaten, indem Sie für jeden die Skala erzeugen und sie in dasselbe UI-Mockup einsetzen.
• Druck-Farbfächer. Prüfen Sie eine Druckpalette im Pre-Flight, um zu sehen, wie subtil die Schritte tatsächlich erscheinen, wenn sie nebeneinander liegen.

Barrierefreiheit und Kontrast

Eine erzeugte Skala ist nur so nützlich wie die Text-auf-Hintergrund-Paare, die sie hervorbringt. Die WCAG-2.1-Mindestwerte, die man im Kopf behalten sollte:

• Normaler Fließtext: 4,5:1 gegen seinen Hintergrund (Stufe AA).
• Großer oder fetter Text (ab 18 pt / 14 pt fett): 3:1 (Stufe AA).
• UI-Komponenten und grafische Objekte: 3:1 (Stufe AA, SC 1.4.11).

Zuverlässige Regeln über die meisten gut gebauten Skalen hinweg: Das Paar 50 + 900 besteht für Fließtext immer, das Paar 100 + 800 fast immer. Das Paar 400 + 500 fast nie. Testen Sie die konkreten Paare, die Sie verwenden möchten, das Werkzeug Farbkontrast-Prüfer berechnet WCAG-Verhältnisse für beliebige zwei HEX-Werte.

Die Ausgabe in Ihre Codebasis einbinden

Drei gängige Wege, eine erzeugte Skala zu nutzen:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Häufige Fehler

1. Zu viele Stopps erzeugen. Tailwinds 11 sind ein idealer Wert. 20 Stopps sind übertrieben, die meisten sind visuell nicht unterscheidbar, und Sie werden sie nie verwenden.
2. HSL-basierte Skalen für gelbe / orange / fluoreszierende Farben verwenden. Sie bleichen bei hellen Stopps aus und dunkeln nicht sauber ab. Greifen Sie zur OKLCH-basierten Erzeugung, wenn Ihre Markenfarbe in den „kniffligen“ Farbtonbereich fällt.
3. Die Skala als endgültig behandeln, ohne den Textkontrast zu prüfen. Schöne Farbbeziehungen kombinieren weißen Text manchmal mit dem Stopp 400 und scheitern an WCAG 4,5:1. Testen Sie jede Kombination, die Sie tatsächlich verwenden.
4. Die helle Palette invertieren, um eine Dark-Mode-Palette zu erstellen. Mathematisch verlockend, visuell falsch, Farben, die sich auf Weiß ausgewogen anfühlen, wirken auf Fast-Schwarz grell. Erzeugen Sie eine parallele Dark-Mode-Skala oder stimmen Sie sie von Hand ab.
5. Die Grundfarbe als „500“ verwenden, wenn sie wahrnehmungsbezogen besser zu einem anderen Stopp passt. Wenn Ihre Markenfarbe wirklich dunkel ist, könnte sie die 700 ihrer Skala sein; lassen Sie die wahrnehmungsbezogene Beziehung bestimmen, welchen Platz sie einnimmt, nicht die Konvention.
6. Den Stopp 50 vergessen. Der hellste Tint ist der nützlichste für Hintergründe und dezente Hervorhebungen. Schneiden Sie Ihre Skala nicht bei 100 ab.

Weitere häufig gestellte Fragen

Warum sieht meine Skala flach aus, alle Stopps wirken ähnlich?

Zwei häufige Ursachen: (1) zu viele Schritte in einem zu engen Bereich, versuchen Sie weniger Schritte, besonders wenn die Farbe bereits eine mittlere Luminanz hat; (2) HSL-basierte Skalierung bei einem Farbton, bei dem HSL schlecht kalibriert ist (Gelb-, Orange-, Neonfarben). Der Griff zu einem OKLCH-basierten Palettengenerator behebt meist beides.

Wie erzeuge ich eine Dark-Mode-Palette aus einer Light-Mode-Skala?

Invertieren Sie nicht einfach. Die naive Invertierung (helle und dunkle Stopps vertauschen) erzeugt Dark-Mode-Paletten, die grell wirken oder ausbleichen. Die Konvention in Material 3, Radix Colors und Tailwinds Dark-Varianten besteht darin, eine parallele Skala zu erzeugen, die auf den dunklen Hintergrund abgestimmt ist, meist mit leicht reduzierter Sättigung und verschobenem Farbton, um auszugleichen, wie Farben vor dunklen Flächen wahrgenommen werden. Die meisten großen Designsysteme veröffentlichen beide Paletten nebeneinander.

Kann ich die erzeugten Farben kommerziell verwenden?

Ja. Farbwerte sind nicht urheberrechtlich schützbar; HEX-Codes sind Fakten über Pixel. Verwenden Sie die erzeugte Palette überall, Open-Source-Projekte, kommerzielle Websites, Markensysteme, Druck, Verpackung.

Was ist eine gute Anzahl von Schritten?

Für UI-Design sind 9 bis 11 Stopps pro Farbe die etablierte Konvention (Tailwind, Bootstrap, Carbon liegen alle in diesem Bereich). Material Design verwendet 13. Unter 7 Stopps wirkt die Skala zu grob aufgelöst; über 13 werden die Stopps schwer voneinander zu unterscheiden.

Werden Daten an einen Server gesendet?

Nein. Die Farbmathematik läuft in Ihrem Browser; der eingegebene HEX, die erzeugten Stopps und das kopierte CSS berühren niemals einen Server. Nützlich, wenn die Markenfarbe noch nicht veröffentlicht ist oder unter Sperrfrist steht.

Wie unterscheidet sich das von einem Farbpaletten-Generator?

Ein Palettengenerator wählt mehrere verschiedene Farben, die zusammenwirken (komplementär, analog, triadisch usw.), völlig unterschiedliche Farbtöne. Ein Shades-Generator (dieser hier) behält einen einzelnen Farbton und erzeugt hellere und dunklere Varianten davon. Unterschiedliche Aufgaben: Palettengeneratoren liefern Ihnen die Markenprimärfarbe plus Akzente; Shade-Generatoren liefern Ihnen die Variationen einer dieser Farben.

Verwandte Tools