Farbabstufungen erzeugen

Gib eine Markenfarbe an, und es entstehen zehn Stufen, heller (Tints) und dunkler (Shades). Die Ausgabe kommt in der Form 50 · 100 · … · 900, die Tailwind und die meisten Designsysteme erwarten.

🎨 Alles läuft in deinem Browser. Keine Installation, keine Anmeldung.

Grundfarbe (deine Markenfarbe)

Wozu welche Stufe dient

· 50~200 Hintergründe, sanfte Hervorhebungen, inaktive Zustände
· 400~600 Buttons und Links — die Markenfarbe selbst
· 700~900 Gedrückte Zustände und Text auf dunklem Grund
Der Hinweis rechts in jeder Zeile sagt, ob weißer oder schwarzer Text auf diesem Hintergrund die Barrierefreiheitsschwelle (4,5:1) erreicht.

Was dieses Werkzeug macht

Zehn Stufen von 50 bis 900
HEX und HSL pro Stufe
Zeigt, ob weißer oder schwarzer Text lesbar ist
Satz als CSS-Variablen kopieren

Weitere Farbwerkzeuge

Farbpaletten-GeneratorPassende Farben zu einer Grundfarbe, nach Regel FarbmischerDie Farbe zwischen zwei Farben finden Zufallsfarben-GeneratorGute Farben festhalten, den Rest neu würfeln Kontrast-PrüferLesbarkeit von Text nach WCAG prüfen

Farben können je nach Bildschirm und Farbprofil etwas anders aussehen.