Farbschema-Generator

Eine Farbe eingeben – heraus kommt ein vollständiges Schema: drei bis fünf harmonisch zueinander stehende Farben, jede in elf Abstufungen, dazu passende Neutral- und Statusfarben und die Rollen für Hell- und Dunkelmodus. Fertig zum Herunterladen für CSS, Tailwind, SCSS, Less, shadcn/ui und Material UI. Alles lokal in deinem Browser.

Wie aus einer Farbe ein Schema wird

Der Weg geht über zwei getrennte Schritte, und es lohnt sich, sie auseinanderzuhalten – die meisten Paletten scheitern daran, dass sie vermischt werden.

Erstens die Farbtöne. Sie ergeben sich aus einer Harmonieregel: festen Winkeln auf dem Farbkreis, gemessen von deiner Basisfarbe aus. Das ist klassische Farbenlehre und beantwortet die Frage, welche Farben zusammenpassen.

Zweitens die Abstufungen. Aus jeder dieser Farben entstehen elf Stufen von 50 (fast weiß) bis 950 (fast schwarz). Entscheidend ist, dass alle Farben dabei derselben Helligkeitskurve folgen: Nur dann ist primary-600 genauso dunkel wiedanger-600, und nur dann kannst du im Entwurf eine Stufe gegen dieselbe Stufe einer anderen Farbe tauschen, ohne dass das Layout kippt.

Die Harmonieregeln im Überblick

Warum die Abstufungen in OKLCH gerechnet werden

HSL hat einen Konstruktionsfehler, der genau hier zuschlägt: Seine „Helligkeit“ ist ein reiner Rechenwert, keine wahrgenommene. hsl(60 100% 50%) (ein knalliges Gelb) undhsl(240 100% 50%) (ein sattes Blau) haben denselben Helligkeitswert – das Gelb blendet, das Blau ist fast schwarz. Eine Palette, die in HSL mit gleichen Stufen gebaut wird, ist deshalb sichtbar ungleichmäßig, und ihre 500er taugen nicht als austauschbares Set.

OKLCH (2020 von Björn Ottosson entwickelt, seit CSS Color Level 4 in allen aktuellen Browsern) behebt das: Sein L entspricht der wahrgenommenen Helligkeit, und eine Änderung daran verschiebt den Farbton nicht. Genau darauf beruhen die Stufen hier – sie entstehen, indem allein L einer festen Kurve folgt.

Eine Folge davon sieht man an den Rändern: Nicht jede Kombination aus Helligkeit und Buntheit ist auf einem Bildschirm darstellbar. Ein sattes Gelb bei 5 % Helligkeit gibt es schlicht nicht. Statt die Farbkanäle hart abzuschneiden – was den Farbton verzöge – wird die Buntheit so weit zurückgenommen, bis die Farbe wieder in sRGB passt. Deshalb laufen die Skalen an beiden Enden gegen Grau, und deshalb eignen sich 50 und 950 als Hintergrundfarben.

Was noch im Schema steckt

Neutralfarben sind kein reines Grau, sondern tragen einen Hauch der Basisfarbe – zwischen 0,022 und 0,045 Buntheit in OKLCH. Das ist wenig genug, um als Grau durchzugehen, und genug, damit Flächen und Rahmen zur Palette gehören statt daneben zu stehen. Zum Vergleich: Tailwinds getöntes slate liegt bei 0,046, sein fast neutraleszinc bei 0,016. Wer reines Grau braucht, schaltet die Einfärbung ab.

Statusfarben für Erfolg, Warnung, Fehler und Info liegen dagegen auf festen Winkeln. Rot für Fehler und Grün für Erfolg sind erlernte Bedeutungen; eine Fehlermeldung in Türkis wäre harmonisch, aber unverständlich. Aus deinem Schema übernehmen sie nur die Buntheit, damit sie nicht wie Fremdkörper wirken.

Die Rollen (--background, --foreground,--primary, --border, …) sind der Schritt, der aus Skalen ein Theme macht. Eine Skala allein sagt nicht, welche Stufe der Seitenhintergrund ist und welche die Schrift. Für Hell und Dunkel ist diese Zuordnung nicht spiegelbildlich: Im Dunkelmodus wird die Markenfarbe eine Stufe heller genommen, weil dieselbe Farbe auf dunklem Grund sonst matt wirkt.

Kontrast im Blick behalten

Jedes Feld zeigt beim Überfahren sein Kontrastverhältnis zur besser lesbaren der beiden Schriftfarben. Die Web Content Accessibility Guidelines fordern für Fließtext 4,5:1 (Stufe AA) beziehungsweise 7:1 (AAA), für großen Text ab 18 pt und für Bedienelemente 3:1. In Deutschland sind diese Werte über die BITV 2.0 für öffentliche Stellen verbindlich und gelten mit dem Barrierefreiheitsstärkungsgesetz seit Juni 2025 auch für viele private Anbieter. Als Faustregel für die erzeugten Skalen: Ab Stufe 600 trägt weiße Schrift, bis Stufe 300 trägt schwarze; die Stufen 400 und 500 sind der Graubereich, in dem sich das Nachmessen lohnt.

Die Exportformate

Häufige Fragen

Warum sieht meine Basisfarbe im Schema leicht anders aus?
Weil die Stufen festen Helligkeiten folgen und deine Eingabe selten exakt auf einer davon liegt. Das eingerahmte Feld markiert die Stufe, die ihr am nächsten kommt. Wenn du die Farbe exakt brauchst, nimm sie unverändert und lass die Skala nur die Umgebung liefern.

Warum sind bei „Monochrom“ nicht alle Farben gleich?
Weil sie es sonst wären. Bei identischem Farbton bleibt als Unterscheidung nur die Buntheit – derselbe Ton, gestaffelt kräftig. Das entspricht dem, was eine monochrome Palette ausmacht.

Kann ich ein Schema wieder aufrufen?
Ja. „Link zum Schema kopieren“ schreibt Basisfarbe, Harmonie, Anzahl und Einfärbung in die Adresse – hinter dem #, das heißt: Der Teil wird nie an einen Server geschickt.

Werden meine Eingaben hochgeladen?
Nein. Die gesamte Berechnung ist JavaScript in deinem Browser; es gibt keinen Server, der etwas entgegennehmen könnte. Gemerkt werden nur Harmonie, Anzahl, Einfärbung und das zuletzt gewählte Exportformat.

Verwandt: Der Farb-Konverter rechnet eine einzelne Farbe zwischen HEX, RGB, HSL, OKLCH, Lab und CMYK um und prüft ihren Kontrast im Detail.