Farb-Nuancen-Generator: Aus einer Farbe eine komplette Palette aufbauen

Jedes Design-System braucht irgendwann eine Farbskala — eine Reihe von Nuancen von hell bis dunkel für jede Markenfarbe. Man braucht sie für Hintergründe, Ränder, Text, Hover-Zustände, Fokusringe und deaktivierte Zustände. Das von Hand zu erstellen, Nuance für Nuance, ist wirklich mühsam. Macht man es nach Augenmaß, ist das Ergebnis meist ungleichmäßig — manche Sprünge sind zu groß, andere zu subtil.

Der Farb-Nuancen-Generator nimmt eine einzige Basisfarbe und erzeugt in etwa einer Sekunde eine vollständig gleichmäßig abgestufte Palette. Dieser Artikel erklärt, wie er funktioniert, wie man die Ausgabe in Projekten einsetzt und wo der Ansatz wirkliche Grenzen hat.

Was Nuancen und Töne eigentlich sind

Bevor es um das Tool geht, lohnt es sich, die Begriffe zu klären, denn "Nuancen" wird oft unscharf verwendet.

Nuancen (Shades) sind dunklere Variationen einer Farbe — technisch gesehen eine Farbe, die mit Schwarz gemischt wird. Töne (Tints) sind hellere Variationen — eine Farbe, die mit Weiß gemischt wird. Zusammen ergeben Nuancen und Töne den vollständigen Bereich von einem nahezu schwarzen Dunkelton bis zu einem nahezu weißen Blassers.

In der Praxis verwenden die meisten Design-Systeme den kombinierten Bereich und nennen das Ganze einfach "Farbskala" oder "Farbpalette". Was zählt, ist nicht die Terminologie, sondern das Ergebnis: ein Satz koordinierter Farben von hell bis dunkel, der konsistent durch die gesamte Benutzeroberfläche verwendet werden kann.

Die typische Struktur sieht so aus:

Stufe	Verwendung
50	Sehr heller Hintergrund, Hover-Zustände auf Weiß
100	Heller Hintergrund, ausgewählte Zustandshintergründe
200	Ränder auf hellen Hintergründen, dezente Füllungen
300	Deaktivierter Text, Platzhaltertext
400	Sekundärer Text, gedämpfte Beschriftungen
500	Primär — meist die Basisfarbe selbst
600	Button-Hover-Zustände, leicht dunkleres Primär
700	Gedrückte Zustände, dunklere interaktive Elemente
800	Dunkler Text auf hellen Hintergründen
900	Sehr dunkel, alternative Überschriftsfarbe
950	Nahezu Schwarz, Basis für den Dunkelmodus

Tailwind hat dieses 11-Stufen-System (50 bis 950) popularisiert, und es ist zum ausreichenden Standard geworden, dass es sich lohnt, es auch ohne Tailwind zu befolgen.

Wie die Generierung funktioniert: HSL-Anpassungen

Der Generator arbeitet im HSL-Farbraum — Farbton (Hue), Sättigung (Saturation), Helligkeit (Lightness). Zur schnellen Erklärung: Der Farbton ist der Farbwinkel (0–360, wobei 0 Rot, 120 Grün und 240 Blau ist), die Sättigung ist die Intensität (0 % ist Grau, 100 % ist voll lebendig), und die Helligkeit reicht von 0 % (Schwarz) bis 100 % (Weiß).

Gegeben eine Basisfarbe:

1. Wird die Basisfarbe in HSL umgewandelt
2. Bleibt der Farbton fixiert (es ist dieselbe Farbfamilie durch die gesamte Skala)
3. Werden Helligkeitswerte über einen Bereich verteilt generiert — ungefähr 95 % für die hellste Stufe bis hinunter zu 10 % für die dunkelste
4. Werden optional subtile Sättigungsanpassungen an den Extremen vorgenommen, um optische Täuschungen auszugleichen

Der letzte Punkt verdient eine Erklärung. Die menschliche Farbwahrnehmung ist nicht-linear. In reinem HSL sieht ein helles Blau bei 90 % Helligkeit oft nahezu weiß aus und verliert vollständig seine Farbe — die Sättigung "verschwindet" bei hohen Helligkeitswerten wahrnehmungsmäßig. Viele professionelle Palettengeneratoren kompensieren das, indem sie am hellen Ende die Sättigung leicht anheben, damit der Farbton sichtbar bleibt, und am dunklen Ende zurückziehen, wo er zu trüb wirkt.

Das Ergebnis ist eine Palette, die für menschliche Augen gleichmäßig abgestuft wirkt, nicht nur mathematisch gleichmäßig verteilt ist.

Warum die 50–950-Konvention

Tailwind CSS gebührt der Verdienst, das standardisiert zu haben. Vor Tailwind verwendete jeder andere Benennungskonventionen: "hellblau", "blue-lighter", "blue-dark", "blue-darkest" — was bedeutete, dass jedes Projekt sein eigenes eigenartiges System hatte, das sich nirgendwo anders übertragen ließ.

Das nummerierte System (50, 100, 200 … 900, 950) hat mehrere praktische Vorteile:

Es ist einfach, Stufen hinzuzufügen. Braucht man etwas zwischen 200 und 300, fügt man 250 ein. Es gibt einen natürlichen Platz dafür.

Es vermittelt den Zweck auf einen Blick. Ein Entwickler, der color-100 sieht, weiß sofort, dass es sich um eine helle Hintergrundnuance handelt. color-900 ist offensichtlich Territorium für dunklen Text. Die Zahlen tragen semantisches Gewicht, ohne beschreibende Namen zu brauchen.

Es ist werkzeugkompatibel. Figma-Variablen, CSS-Custom-Properties, JavaScript-Theme-Objekte — alle funktionieren natürlich mit numerischen Skalen. Und weil Tailwind dieselben Zahlen verwendet, sprechen Designer und Entwickler dieselbe Sprache.

Es verhindert Übergenauigkeit. Wenn Farben Namen wie "primary-blue" und "primary-blue-leicht-heller-für-hover" haben, tendieren Teams dazu, immer mehr benannte Varianten hinzuzufügen. Ein nummeriertes System drängt dazu, die definierte Skala konsistent zu verwenden.

Die Ausgabe im Projekt verwenden

Der Generator liefert mehrere Ausgabeformate. So verwendet man jedes davon.

CSS-Custom-Properties

Die CSS-Variablen-Ausgabe sieht so aus:

:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-200: #bfdbfe;
  --color-300: #93c5fd;
  --color-400: #60a5fa;
  --color-500: #3b82f6;
  --color-600: #2563eb;
  --color-700: #1d4ed8;
  --color-800: #1e40af;
  --color-900: #1e3a8a;
  --color-950: #172554;
}

Diese in die Haupt-CSS-Datei in einem :root-Block einfügen, und die Variablen stehen überall im Stylesheet zur Verfügung:

.button-primary {
  background-color: var(--color-500);
  border-color: var(--color-600);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-600);
  border-color: var(--color-700);
}

.button-primary:focus {
  outline-color: var(--color-300);
}

Dieser Ansatz ist besonders mächtig für Theming. Wer Markenfarben als CSS-Custom-Properties definiert, kann Themes wechseln, indem einfach die Werte in einem [data-theme="dark"]- oder .dark-mode-Selektor überschrieben werden.

Tailwind-CSS-Konfiguration

Bei Tailwind-Nutzung kann die Palette direkt in tailwind.config.js oder tailwind.config.ts eingefügt werden:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ... und so weiter
          950: '#172554',
        },
      },
    },
  },
}

Das schaltet das vollständige Tailwind-Utility-Klassen-System für die Markenfarbe frei: bg-brand-100, text-brand-700, border-brand-300, hover:bg-brand-600 und alles weitere. Die benutzerdefinierte Farbe verhält sich genau wie Tailwinds eingebaute Palettenfarben.

JavaScript/TypeScript-Objekte

Für Komponentenbibliotheken oder Design-Tokens ist ein JavaScript-Objekt oft praktischer als reines CSS. Man kann Farbwerte direkt in Komponentencode importieren, an Styled-Components weitergeben oder mit CSS-in-JS-Bibliotheken verwenden.

Ein Design-System mit Farbskalen aufbauen

Ein Design-System braucht typischerweise mindestens drei oder vier Farbskalen:

• Primär: Die Haupt-Markenfarbe
• Neutral/Grau: Für Text, Hintergründe, Ränder — meist ein leicht warmes oder kühles Grau statt reinem Neutral
• Semantische Farben: Erfolg (Grün), Warnung (Bernstein/Gelb), Fehler (Rot), Info (Blau)

Jede einzeln durch den Nuancen-Generator laufen lassen, einheitlich benennen — und man hat die Farbgrundlage eines Design-Systems.

Das typische Verwendungsmuster:

• primary-50, primary-100 → Hintergründe, ausgewählte Zustandsfüllungen
• primary-200, primary-300 → dezente Ränder, Tags, Badges
• primary-500, primary-600 → interaktive Elemente, Buttons, Links
• primary-700, primary-800 → gedrückte Zustände, dunklere interaktive Elemente
• neutral-100 bis neutral-900 → Seitenhintergründe bis hin zu Fließtext

Mit dieser Grundlage kann jede Komponente aus der Palette schöpfen, ohne dass jemand eine willkürliche Farbe auswählen muss. Konsistenz über eine große Codebasis hinweg ist damit viel einfacher zu pflegen.

Vergleich mit dem Farbpaletten-Generator

Die Website bietet auch einen Farbpaletten-Generator, und beide sind ähnlich genug, dass es sich lohnt, den Unterschied zu klären.

Der Farbpaletten-Generator erzeugt typischerweise eine Reihe komplementärer oder harmonischer Farben — analoge, triadische, aufgespaltene Komplementärfarbschemata. Man gibt eine Farbe ein und erhält Vorschläge für andere Farben, die gut dazu passen. Es geht mehr um Farbtheorie und das Finden einer guten Farbkombination.

Der Farb-Nuancen-Generator nimmt eine Farbe und gibt einen vollständigen Bereich dieser einzelnen Farbe von hell bis dunkel. Es geht nicht darum, andere Farben zu finden — sondern darum, alle Nuancen der bereits gewählten Farbe zu erhalten.

In der Praxis kann man beide kombinieren: den Palettengenerator, um die Markenfarb-Kombination zu finden, und den Nuancen-Generator, um für jede dieser Farben die vollständige Skala aufzubauen.

Wissenswerte Einschränkungen

Wer solche Tools ausreichend verwendet hat, weiß, wo sie schwächeln. Hier ist, worauf man achten sollte.

Reines Schwarz und Weiß erzeugen nutzlose Paletten. Gibt man #000000 (reines Schwarz) oder #FFFFFF (reines Weiß) ein, hat der Generator keine Farbton-Information. Die gesamte Palette wird nur Graustufen sein. Das ist technisch korrekt, aber selten gewünscht. Für Neutrale empfiehlt sich eine Farbe mit mindestens ein bisschen Farbton und Sättigung — ein leicht warmes Grau wie #f5f0eb ergibt eine viel interessantere Neutralskala als reines Weiß.

Farben mit sehr geringer Sättigung wirken flach. Eine Farbe, die bereits nahe an Grau liegt (etwa hsl(220, 8%, 50%)), erzeugt keine lebhaften Töne und Nuancen. Das helle Ende der Skala sieht nahezu weiß aus, das dunkle Ende nahezu schwarz, mit nur geringer sichtbarer Differenzierung dazwischen. Das ist kein Fehler — es liegt einfach in der Natur von Farben mit geringer Sättigung. Wirkt die Palette flach, sollte man eine gesättigtere Basisfarbe ausprobieren.

Die generierte Palette ist ein Ausgangspunkt, kein Endprodukt. Die HSL-basierte Generierung ist systematisch und schnell, weiß aber nichts über den spezifischen Kontext. Einige generierte helle Nuancen haben möglicherweise keinen ausreichenden Kontrast für Text. Manche Dunkelwerte können in einem bestimmten Kontext leicht unpassend wirken. Immer gegen reale UI-Verwendung prüfen und Text-Hintergrund-Kombinationen durch einen Kontrast-Checker laufen lassen.

Für professionelle Design-Systeme ist Wahrnehmungsgleichmäßigkeit wichtiger. Tailwinds v3-Palette wurde von Designern von Hand feinabgestimmt, nicht automatisch generiert. Tools wie Radix Colors verwenden OKLCH (ein wahrnehmungsgleichmäßiger Farbraum), der für gleichmäßig wirkende Stufen genauer ist als HSL. Der Nuancen-Generator liefert einen guten Ausgangspunkt, aber für ein Produktions-Design-System in großem Maßstab möchte man eventuell die Extremwerte von Hand feinabstimmen.

CSS-Variablen namens --color-500 sind generisch. Das Tool gibt Variablennamen wie --color-500 aus. Hat ein Projekt mehrere Farbskalen, sollte man sie umbenennen: --brand-500, --error-500, --neutral-200 usw. Mehrere Paletten sollten nicht ohne Namensräume einfach in :root eingefügt werden, sonst überschreiben sie sich gegenseitig.

Verwandte Tools für die Farbarbeit

Der Nuancen-Generator fügt sich in einen breiteren Farbworkflow ein:

• Farbwähler: Die Basisfarbe visuell auswählen und den Hex- oder HSL-Wert erhalten, dann in den Nuancen-Generator einfügen.
• Farbpaletten-Generator: Zuerst eine harmonische Farbkombination finden, dann für jede Farbe einzeln Nuancen generieren.
• Farbkonverter: Falls die generierten HEX-Werte in HSL oder RGB umgewandelt werden müssen.
• CSS-Verlaufs-Generator: Wenn man die Farbskala hat, sehen Verläufe zwischen benachbarten Stufen oft sehr gut aus — das Verlaufs-Tool ermöglicht die direkte Zusammenstellung und Vorschau.

Ein praktisches Beispiel: Eine benutzerdefinierte Farbe zu Tailwind hinzufügen

Hier ist ein vollständiger Workflow für das Hinzufügen einer benutzerdefinierten Markenfarbe zu einem Tailwind-Projekt:

1. Die Markenfarbe wurde ausgewählt: #0D6EFD (ein kräftiges Blau).
2. /tools/color-shades-generator öffnen und #0D6EFD eingeben.
3. Das Tool generiert die vollständige 50–950-Skala.
4. Die Ausgabe im Tailwind-Konfigurationsformat kopieren.
5. In tailwind.config.ts unter theme.extend.colors.brand einfügen.
6. Jetzt kann man bg-brand-500 für Buttons, text-brand-700 für dunklen Text, bg-brand-50 für Hover-Hintergründe auf weißen Oberflächen und ring-brand-300 für Fokusringe verwenden.

Ohne den Generator müsste man alle elf Nuancen manuell auswählen und hoffen, dass sie kohärent wirken. Mit ihm dauert der gesamte Prozess vielleicht zwei Minuten.

Fazit

Eine Farbskala von Grund auf aufzubauen ist die Art von Aufgabe, die unkompliziert aussieht — bis man es wirklich versucht und merkt, dass mehr Sorgfalt erforderlich ist als das stufenweise Abdunkeln eines Hex-Wertes um einen festen Betrag. Die Schritte visuell gleichmäßig erscheinen zu lassen, den Farbton konsistent zu halten ohne langweilig zu wirken, und sicherzustellen, dass die Extremwerte wirklich verwendbar sind — das alles braucht mehr Aufmerksamkeit.

Der Farb-Nuancen-Generator erledigt das alles automatisch und liefert CSS-fertige Ausgaben in mehreren Formaten. Er ist eine solide 80-Prozent-Lösung, die die Mehrheit realer Projekte abdeckt, und der richtige Ausgangspunkt selbst dann, wenn man plant, anschließend von Hand nachzujustieren.

Wer ein Design-System aufbaut, bekommt mit der Kombination aus diesem Tool, dem Farbpaletten-Generator zur Farbauswahl und dem Farbkonverter zur Formatvalidierung alles, was nötig ist, um schnell eine professionell wirkende Farbgrundlage zu etablieren.