Farbton-Skalen-Generator (Tints & Shades)
Aus einer Markenfarbe eine 50-900-Design-System-Skala erzeugen — zehn Auf- und Abtönungen mit Hex-Codes, Klick zum Kopieren.
730 Aufrufe
Klicken Sie auf ein Muster, um den Hex-Wert zu kopieren
Von einer Farbe zu einem System
Design-Systeme (Tailwind, Material) liefern nie nur eine Markenfarbe — sie liefern eine Skala von 50 (fast Weiß) bis 900 (fast Schwarz), wobei die Markenfarbe bei etwa 500 sitzt. Helle Stufen (Tints) mischen die Basis Richtung Weiß, dunkle Stufen (Shades) Richtung Schwarz. Dieser Generator erzeugt die zehn Standardstufen mit Hex-Codes und CSS-Variablen; Klick auf ein Muster kopiert den Wert.
So wird die Skala genutzt: 50-100 für Hintergründe und Hover-Flächen, 200-300 für Rahmen, 500-600 für Buttons und Links, 700-900 für Text auf hellem Grund. Stufen derselben Skala zu kombinieren hält die Oberfläche stimmig, und Stufen ≥700 auf ≤100 bestehen meist den WCAG-Kontrast — das genaue Paar mit unserem Kontrastprüfer verifizieren.
Häufig gestellte Fragen
Warum wirkt meine kräftige Farbe in hellen Tints blass?
Die Mischung Richtung reines Weiß entzieht Sättigung — das ist bei Hintergründen erwünscht. Für lebhaftere Tints die Basisfarbe vor der Erzeugung etwas satter wählen.
Wo sollte meine Markenfarbe auf der Skala liegen?
Zielen Sie auf 500-600. Ist Ihre Markenfarbe sehr hell oder dunkel, platzieren Sie sie auf der zu ihrer Helligkeit passenden Stufe — der Generator füllt beide Richtungen.
Sind das dieselben Werte wie bei Tailwind?
Nicht identisch — Tailwind-Paletten sind pro Farbton von Hand abgestimmt. Diese Skala nutzt eine konsistente Mischung, was bei individuellen Markenfarben vorhersagbar und für echte Projekte nah genug ist.
Ähnliche Tools
Problem melden
Farbton-Skalen-Generator (Tints & Shades)