CodeKitHubWas ist dieses Tool?
Eine Abstufungsrampe ist eine Reihe von Varianten einer Farbe bei unterschiedlichen Helligkeitsstufen, wie sie im UI-Design durchgehend verwendet wird — etwa für Hover-Zustände, deaktivierte Zustände, Rahmen und Hintergründe, die sich auf eine Markenfarbe beziehen sollen, ohne identisch mit ihr zu sein.
Dieses Tool wandelt Ihre Grundfarbe in HSL um, hält Farbton und Sättigung fest und lässt die Helligkeit von etwa 95 % (fast-weißer Ton) bis etwa 10 % (fast-schwarze Abstufung) durchlaufen, wobei Ihre Ursprungsfarbe an ihrer natürlichen Position in der Mitte der Rampe platziert wird.
Warum sollte man es nutzen?
- Erzeugt eine Rampe im Stil eines Designsystems (wie Tailwinds 50/100/200.../900-Skala) aus jeder einzelnen Farbe, nicht nur aus einer festen voreingestellten Palette.
- Wählen Sie 7, 9 oder 11 Stufen, je nachdem wie feinabgestuft die Rampe sein soll.
- Jede Stufe zeigt ihren exakten HEX-Code und Helligkeitsprozentwert — zum Kopieren anklicken.
- Hält Farbton und Sättigung über die gesamte Rampe konstant, sodass alle Abstufungen klar erkennbar mit der Grundfarbe verwandt bleiben, statt ins Graue abzudriften.
- Kostenlos, sofort und vollständig lokal.
Anleitung
- Wählen Sie Ihre Grundfarbe über den Farbwähler oder durch Eingabe eines HEX-Codes.
- Wählen Sie die gewünschte Anzahl an Stufen für die Rampe (7, 9 oder 11).
- Lesen Sie HEX-Code und Helligkeitsprozentwert jeder Abstufung direkt am Farbmuster ab.
- Klicken Sie auf ein beliebiges Muster, um dessen HEX-Code zu kopieren.
Beispiel
Eingabe
#3B82F6 (ein mittleres Blau), 9 StufenAusgabe
9 Abstufungen von einem fast-weißen Ton (~95 % Helligkeit) bis zu einer fast-schwarzen Abstufung (~10 % Helligkeit), wobei #3B82F6 selbst als mittlere Stufe positioniert istFarbton und Sättigung bleiben über alle 9 Stufen konstant — nur die Helligkeit ändert sich —, sodass jede Abstufung klar als Teil derselben Farbfamilie erkennbar ist.
Häufig gestellte Fragen
Ist das dasselbe System, das Tailwind CSS für seine Farbskalen verwendet?
Es ist derselbe Grundgedanke (fester Farbton/feste Sättigung, variable Helligkeit), aber keine exakte Nachbildung von Tailwinds konkreter Palette — Tailwinds 50-900-Skalen wurden von Designern von Hand abgestimmt, nicht per einheitlicher Formel generiert. Dieses Tool liefert eine vergleichbare Struktur aus jeder von Ihnen gewählten Farbe, nützlich wenn Ihre Grundfarbe keine der Tailwind-Voreinstellungen ist.
Warum sehen zwei benachbarte Stufen fast gleich aus?
Das kann an den sehr hellen oder sehr dunklen Enden der Rampe passieren, wo sich die wahrgenommene Helligkeit langsamer ändert, als der numerische Prozentwert vermuten lässt (eine bekannte Eigenschaft der menschlichen Farbwahrnehmung, nicht spezifisch für dieses Tool). Weniger Stufen zu wählen (7 statt 11) spreizt die Helligkeitswerte weiter auseinander und reduziert nahezu identische Muster.
Kann ich diese Abstufungen direkt als CSS Custom Properties verwenden?
Ja — kopieren Sie jeden HEX-Code und fügen Sie ihn in Ihre CSS-Variablen ein (z. B. --color-brand-100 bis --color-brand-900), wobei Sie die Position in der Rampe mit dem Namensschema Ihres Projekts abgleichen.
Sollte ich dieses Tool oder den Farbmischer verwenden?
Wenn Sie hellere und dunklere Versionen einer einzigen Farbe erstellen — Hover-Zustände, dezente Hintergründe, an eine Markenfarbe angelehnte Rahmen — nutzen Sie diesen Abstufungs-Generator. Wenn Sie stattdessen die Farbe zwischen zwei unterschiedlichen Farben brauchen (etwa eine Stufe zwischen Ihrem primären Blau und einem sekundären Orange), verwenden Sie den Farbmischer, der die RGB-Kanäle zweier Farben in beliebigem Verhältnis interpoliert, statt die Helligkeit einer einzelnen Farbe zu variieren.
Was passiert, wenn meine Grundfarbe bereits sehr hell oder sehr dunkel ist?
Die Grundfarbe steht immer in der mittleren Zeile, mit Auftönungen, die darüber bis etwa 95 % Helligkeit reichen, und Abstufungen, die darunter bis etwa 10 % reichen. Wenn Ihre Grundfarbe bereits fast weiß ist, wird die Auftönungs-Hälfte der Rampe in einen schmalen Helligkeitsbereich gepresst (nahezu identische Zeilen), während sich die Abstufungs-Hälfte breit auffächert — und umgekehrt bei einer sehr dunklen Grundfarbe. Für die gleichmäßigste Rampe starten Sie mit einer Version mittlerer Helligkeit Ihrer Farbe (etwa 40-60 % Helligkeit).
Kann es auch Töne erzeugen (die Farbe mit Grau gemischt)?
Nein — dieses Tool variiert nur die Helligkeit bei fester Sättigung, was Auf- und Abtönungen erzeugt, aber keine Töne. Für eine gedämpftere Rampe entsättigen Sie zunächst Ihre Grundfarbe (wählen Sie im Farbwähler eine grauere Version) und erzeugen Sie die Rampe daraus; jede Stufe übernimmt dann die niedrigere Sättigung.