Generator für Aufhellungen, Abdunkelungen & Töne
Gib eine beliebige Farbe ein und du bekommst ihre ganze Familie: Aufhellungen Richtung Weiß, Abdunkelungen Richtung Schwarz, Töne Richtung Grau und eine Farbskala 50–900 im Tailwind-Stil – alle gleichmäßig im wahrnehmungsbasierten OKLCH-Raum gestuft. Klicke ein Farbfeld an, um es zu kopieren. Kostenlos und 100 % im Browser.
Farbskala im Tailwind-Stil (50–900)
Aufhellungen – Richtung Weiß
Abdunkelungen – Richtung Schwarz
Töne – Richtung Grau
Eine Farbe allein reicht nie
Wofür eine Farbe auch gedacht ist – eine Marke, eine Wand, ein Button –, du brauchst sofort ihre Verwandten: eine hellere Variante für Hover-Zustände und flächige Aufheller, eine dunklere für Text und gedrückte Zustände, eine gedämpfte für deaktivierte Elemente. Malerinnen und Maler haben das vor Jahrhunderten mit drei Begriffen gelöst: Aufhellung (Weiß dazu), Abdunkelung (Schwarz dazu), Ton (Grau dazu). Diese Seite berechnet alle drei Familien – dazu die nummerierte Farbskala, die moderne Designsysteme tatsächlich ausliefern.
Warum gleichmäßige Stufen einen wahrnehmungsbasierten Farbraum brauchen
Wer in reinem RGB Richtung Weiß mischt, bekommt Stufen, die sich ballen: Die ersten sehen identisch aus, die letzten springen. Diese Streifen interpolieren in OKLab, und die Farbskala rastet auf festen OKLCH-Helligkeitsankern ein – jeder Schritt ist damit für dein Auge gleich groß. Genau deshalb wirken eine gelbe und eine blaue Skala von hier wie Geschwister: Auf jeder nummerierten Stufe teilen sie dieselbe wahrgenommene Helligkeit – etwas, das HSL-basierte Generatoren nicht versprechen können.
Die Skala 50–900 in der Praxis
- 50–100 – Seiten- und Kartenhintergründe, dezente Akzente.
- 200–300 – Rahmen, Trennlinien, Flächen deaktivierter Elemente.
- 400–600 – die Markenzone: Buttons, Links, aktive Zustände. Deine eingegebene Farbe rastet hier unverändert ein.
- 700–900 – Text auf hellen Hintergründen, Flächen im Dark Mode.
Eine Konvention, die es zu übernehmen lohnt: Benenne Variablen nach der Stufe (--color-500), nie nach dem Aussehen („Hellblau“) – das Aussehen ändert sich, die Rolle nicht. „CSS-Variablen kopieren“ gibt genau diese Struktur aus.
Töne: die unterschätzte Familie
Aufhellungen und Abdunkelungen bekommen die ganze Aufmerksamkeit, doch Töne – gleiche Helligkeit, weniger Buntheit – sind die Art, wie Oberflächen flüstern. Eine getonte Variante deiner Akzentfarbe ergibt den perfekten Hintergrund für eine ausgewählte Zeile oder eine Gitterlinie im Diagramm: klar verwandt, nie laut. Weil der Ton-Streifen die OKLCH-Helligkeit konstant hält, besteht jeder Text, der den Kontrast auf der Ausgangsfarbe bestanden hat, ihn auch auf deren Tönen.
Jedes Farbfeld kopiert seinen HEX-Wert per Klick, und die Ausgangsfarbe lässt sich in „Meine Farben“ ablegen, um sie überall auf dieser Seite zu nutzen – prüfe etwa Stufe 700 gegen Stufe 50 im Kontrast-Checker oder vergleiche zwei Kandidaten nebeneinander. Alles läuft zu 100 % in deinem Browser.
Häufige Fragen
Was ist der Unterschied zwischen Aufhellungen, Abdunkelungen und Tönen?
Aufhellungen mischen eine Farbe Richtung Weiß, Abdunkelungen Richtung Schwarz und Töne Richtung Grau. Aufhellungen machen heller und weicher, Abdunkelungen tiefer und erdiger, Töne dämpfen die Farbe, ohne ihre Helligkeit zu verändern.
Was bedeutet die Skala von 50–900?
Es ist das von Tailwind und Material bekannt gemachte Benennungsschema: 50 ist der fast weiße Hauch, 500 liegt in der gut nutzbaren Mitte, 900 ist die dunkelste Stufe. Designsysteme verweisen über diese Stufen auf Farben statt über rohe HEX-Werte.
Warum werden diese Stufen in OKLCH statt in HSL berechnet?
Die Helligkeit in HSL ist nicht wahrnehmungsbezogen – stuft man sie, entstehen Skalen mit matschiger Mitte und Neonrändern, und verschiedene Farbtöne landen bei sichtbar unterschiedlicher Helligkeit. Die Helligkeit in OKLCH entspricht der Wahrnehmung, deshalb ändert sich jede Stufe der Skala um denselben visuellen Betrag. Tailwind v4 hat seine Palette selbst auf OKLCH umgestellt.
Warum taucht genau meine eingegebene Farbe in der Skala auf?
Der Generator rastet deine Farbe auf der nächstgelegenen Helligkeitsstufe ein und baut die übrigen neun darum herum. So enthält die Skala garantiert deine echte Markenfarbe unverändert – und nicht bloß eine gute Annäherung.
Kann ich die Skala direkt im Code verwenden?
Ja – „CSS-Variablen kopieren“ gibt die zehn Stufen als Custom Properties aus, jedes Farbfeld kopiert seinen HEX-Wert per Klick, und nichts von dem, was du hier tust, verlässt deinen Browser.