Farbabstufungs-Generator

Was ist Farbabstufungs-Generator?

Der Farbabstufungs-Generator ist ein kostenloses Online-Tool, das eine HEX-Basisfarbe in eine vollständige Tint- und Shade-Skala verwandelt, nummeriert von 50, 100, 200 bis 900 und 950 – genau wie die Farbtokens von Tailwind CSS. Er erstellt den Verlauf, indem er deine Basisfarbe für die helleren Stufen (50–400) linear zu Weiß und für die dunkleren Stufen (600–950) zu Schwarz mischt, wobei 500 die Basisfarbe selbst bleibt. Designer und Frontend-Entwickler nutzen ihn, um eine konsistente Farbskala für ein Designsystem zu erzeugen, CSS-Custom-Properties oder Tailwind-Themenfarben einzurichten und zugängliche helle/dunkle Varianten einer Markenfarbe zu wählen. Jede Stufe wird als Farbfeld neben ihrem HEX-Wert mit einem Ein-Klick-Kopierbutton angezeigt.

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 Farbwähler-Feld, um sie visuell auszuwählen.
2. Die Skala 50–950 aktualisiert sich sofort: Helle Töne (50–400) werden zu Weiß gemischt, 500 ist deine Basisfarbe, und dunkle Töne (600–950) werden zu Schwarz gemischt.
3. Lies jede Zeile, um die Stufennummer (50 … 950), ihr Farbfeld und ihren HEX-Wert nebeneinander zu sehen.
4. Klicke auf den Kopierbutton am Ende einer beliebigen Zeile, um den HEX-Wert dieser Stufe in die Zwischenablage zu kopieren.
5. Kopiere den HEX-Wert der Basisfarbe mit dem Kopierbutton neben dem Eingabefeld, wenn du nur Stufe 500 brauchst.

Beispiele

#4f86f7

#f6f9ff

#4f86f7

#0b1323

Häufig gestellte Fragen

Welche Farbformate kann ich eingeben?

Die Basisfarbe wird als HEX-Wert im Format #rrggbb (sechs Stellen) oder als Kurzform #rgb (drei Stellen) eingegeben. Ist der Wert keine gültige HEX-Farbe, erscheint die Meldung 'Invalid HEX color' und es wird keine Skala erzeugt. Jede Stufe der Ausgabe wird als #rrggbb-HEX-Wert angezeigt.

Wie werden die Abstufungen berechnet?

Jede Stufe ist eine lineare Mischung zwischen deiner Basisfarbe und reinem Weiß oder reinem Schwarz. Die Stufen 50–400 werden mit abnehmenden Anteilen zu Weiß gemischt, Stufe 500 ist die unveränderte Basisfarbe, und die Stufen 600–950 werden mit zunehmenden Anteilen zu Schwarz gemischt. Die Nummerierung entspricht den Farbskalen von Tailwind CSS.

Warum entspricht Stufe 500 manchmal nicht genau der Nummer meiner Basisfarbe?

Stufe 500 ist immer exakt deine Basisfarbe. Das Tool zentriert deine Farbe nicht auf eine wahrnehmungsbasierte Helligkeitskurve, sodass bei sehr hellen oder sehr dunklen Eingaben die hellere oder dunklere Hälfte der Skala einen kleineren Bereich hat – wähle eine Basis im mittleren Tonbereich für den gleichmäßigsten Verlauf.

Kann ich eine Farbe visuell auswählen, statt HEX einzutippen?

Ja. Klicke auf das große Farbfeld mit dem integrierten Farbwähler, um eine Farbe zu wählen; das HEX-Feld aktualisiert sich automatisch und die gesamte Skala 50–950 wird sofort neu berechnet, während du sie änderst.

Werden meine Farbdaten irgendwohin hochgeladen?

Nein. Alles läuft mit lokaler Farbmathematik vollständig in deinem Browser – kein Farbwert wird je an einen Server gesendet, sodass es offline funktioniert und deine Palette privat bleibt.