Farbabstufungen-Generator

So nutzen Sie den Farbabstufungen-Generator

1. Wählen Sie eine Grundfarbe über das Farbfeld oder tippen Sie einen Wert in Farbcode: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) oder einen CSS-Namen wie teal.
2. Wählen Sie eine Schrittweite: 5 %, 10 %, 20 % oder 25 %. Mit 10 % erhalten Sie Aufhellungen bei 10 %, 20 % … 100 % und genauso viele Abdunklungen.
3. Legen Sie unter Mischen in fest, wie gemischt wird: OKLCH (wahrnehmungsbasiert) oder sRGB (klassisch). Die beiden Reihen aktualisieren sich sofort: Aufhellungen (mit Weiß gemischt) und Abdunklungen (mit Schwarz gemischt), jeweils ausgehend von der Grundfarbe.
4. Klicken Sie unter einem Farbfeld auf Kopieren, um seinen HEX-Code zu kopieren.
5. Wählen Sie unter Exportieren als eines der Formate CSS-Variablen, Tailwind-Config (v3), Tailwind @theme (v4), SCSS-Variablen oder JSON, vergeben Sie einen Name wie primary oder brand und nutzen Sie dann Kopieren oder Herunterladen.

Aufhellungen, Abdunklungen und Abtönungen

In der Farbenlehre ist eine Aufhellung (englisch „tint“) eine mit Weiß gemischte Farbe, eine Abdunklung („shade“) eine mit Schwarz gemischte und eine Abtönung („tone“) eine mit Grau gemischte. Der Prozentwert gibt an, wie viel Weiß oder Schwarz hinzukommt: Eine Aufhellung von 30 % besteht aus 70 % Grundfarbe und 30 % Weiß. Bei 100 % erreichen Sie reines Weiß bzw. reines Schwarz. Deshalb ist das letzte Farbfeld jeder Reihe immer #FFFFFF oder #000000 – es markiert das Ende der Skala.

Aufhellungen und Abdunklungen sind der schnellste Weg, aus einer einzigen Markenfarbe eine stimmige Farbskala zu bauen: helle Hintergründe und Hover-Zustände aus den Aufhellungen, Rahmen, gedrückte Zustände und dunklen Text aus den Abdunklungen.

Mischen in OKLCH oder sRGB?

sRGB (klassisch) mischt die Rot-, Grün- und Blauwerte direkt. So arbeiten die meisten älteren Generatoren, und es entspricht CSS color-mix(in srgb, …). Die Formel für eine Aufhellung lautet einfach channel + (255 − channel) × p, für eine Abdunklung channel × (1 − p). Das ist berechenbar, aber die Stufen sind für das Auge nicht gleichmäßig: Blautöne driften beim Aufhellen oft Richtung Lila, und dunkle Abstufungen wirken häufig schmutzig.

OKLCH (wahrnehmungsbasiert) mischt im Farbraum OKLCH, den Björn Ottosson 2020 entwickelt hat, wie CSS color-mix(in oklch, …). Helligkeit, Buntheit (Chroma) und Farbton werden getrennt interpoliert. Weiß und Schwarz haben keinen Farbton, daher bleibt der Farbton der Grundfarbe bis zum Ende erhalten, und jede Stufe ändert die Helligkeit um einen optisch ähnlichen Betrag. Farben, die außerhalb des sRGB-Farbraums lägen, werden durch Verringern der Buntheit zurückgeholt statt durch Abschneiden einzelner Kanäle, sodass der Farbton stabil bleibt. Für Designsysteme ergibt das meist sauberere und gleichmäßigere Skalen.

Den Export nutzen

• CSS-Variablen erzeugen einen :root-Block mit Variablen wie --primary-tint-20 und --primary-shade-40, bereit zum Einfügen in ein Stylesheet.
• Tailwind-Config (v3) liefert ein colors-Objekt für theme.extend.colors; anschließend schreiben Sie Klassen wie bg-primary-tint-20 oder text-primary-shade-60. DEFAULT enthält die Grundfarbe, daher funktioniert auch bg-primary.
• Tailwind @theme (v4) liefert --color-…-Variablen für die CSS-basierte Konfiguration von Tailwind 4.
• SCSS-Variablen und JSON eignen sich für andere Build-Tools und Design-Tokens.

Namen werden in Kleinbuchstaben umgewandelt und Leerzeichen durch Bindestriche ersetzt, aus „Brand Blue“ wird also brand-blue.