Farbabstufungs-Generator

Was ist Farbabstufungs-Generator?

Der Farbabstufungs-Generator verwandelt eine HEX-Basisfarbe in eine vollständige Tint- und Shade-Skala für ein Designsystem. Statt nur linear in RGB zu mischen, kann er in OKLCH oder HSL interpolieren, sodass der Farbton stabil bleibt und die Helligkeit gleichmäßig verteilt wird – eine wahrnehmungsgerecht ausgewogene Reihe ohne matschige oder ausgewaschene Stufen. Du wählst, wie viele Stufen entstehen – von 2 bis 24 oder eine eigene, komma-getrennte Liste von Labels –, verschiebst den Farbton oder skalierst die Sättigung und liest pro Stufe einen WCAG-Kontrasthinweis, der zeigt, welche Töne als Text auf Weiß und auf Schwarz funktionieren. Die fertige Skala lässt sich mit einem Klick als CSS-Custom-Properties, als Tailwind-Farbkonfigurationsobjekt oder als JSON kopieren.

So verwendest du Farbabstufungs-Generator

1. Gib im Feld Basisfarbe (HEX) eine Basisfarbe im Format #rrggbb oder #rgb ein oder klicke auf das große Farbfeld, um sie visuell zu wählen.
2. Wähle einen Farbraum: OKLCH oder HSL für eine wahrnehmungsgleichmäßige Reihe mit stabilem Farbton, oder RGB für die klassische lineare Mischung.
3. Lege fest, wie viele Stufen du willst (2–24), oder öffne die Einstellungen für eine eigene komma-getrennte Stufenliste, die Farbtonverschiebung, die Sättigungsskalierung und den Export-Farbnamen.
4. Lies in jeder Zeile die zwei Kontrastzellen – den Buchstaben A auf Weiß und auf Schwarz –, die hervorgehoben werden, wenn dieser Ton das WCAG AA für Text erreicht.
5. Kopiere den HEX-Wert einer einzelnen Stufe oder die ganze Skala als CSS-Variablen, Tailwind-Konfig oder JSON über die Kopierbuttons.

Beispiele

Häufig gestellte Fragen

Was ist der Unterschied zwischen den Optionen RGB, HSL und OKLCH?

RGB mischt deine Farbe linear zu Weiß und Schwarz, was schnell ist, in den Mitteltönen aber ungleichmäßig aussehen kann. HSL und OKLCH halten stattdessen den Farbton stabil und verteilen die Helligkeit gleichmäßig; OKLCH ist wahrnehmungsgleichmäßig, sodass jede Stufe wie ein gleich großer Helligkeitssprung wirkt. Wähle OKLCH für die ausgewogenste Reihe.

Wie viele Töne kann ich erzeugen, und kann ich sie benennen?

Stelle eine beliebige Stufenzahl von 2 bis 24 ein. Eine Zahl von 11 nutzt die bekannte Tailwind-Nummerierung (50, 100…900, 950); andere Zahlen werden gleichmäßig von 50 bis 950 verteilt. In den Einstellungen kannst du auch eine eigene komma-getrennte Liste von Labels eingeben, die die Stufenzahl überschreibt und jede Stufe genau so benennt, wie du sie schreibst.

Wie wird der WCAG-Kontrasthinweis berechnet?

Für jeden Ton berechnet das Tool aus der relativen Leuchtdichte das WCAG-Kontrastverhältnis gegen reines Weiß und reines Schwarz. Die zwei kleinen Zellen in jeder Zeile zeigen den Buchstaben A auf Weiß und auf Schwarz und werden hervorgehoben, wenn das Verhältnis 4,5:1 erreicht (AA für normalen Text); beim Überfahren siehst du das genaue Verhältnis und ob es AA oder AAA ist.

Werden meine Farbdaten irgendwohin hochgeladen?

Nein. Die Farbmathematik, die Kontrastprüfungen und alle drei Exporte laufen vollständig in deinem Browser, sodass kein Farbwert je an einen Server gesendet wird. Es funktioniert offline und hält deine Palette privat.