Über dieses Tool
Eine gute Farbpalette beginnt meist mit einer einzigen Farbe – etwa der Markenfarbe. Der Generator leitet daraus passende Begleitfarben nach den klassischen Regeln der Farbenlehre ab: komplementär, analog, triadisch, geteilt komplementär, tetradisch oder monochrom. Gerechnet wird im OKLCH-Farbraum, der sich am menschlichen Sehen orientiert – so wirken die Farben gleich hell und gleich kräftig.
Zu jeder Farbe der Palette erzeugt das Tool eine Abstufung von 50 (fast weiß) bis 950 (fast schwarz), wie man sie aus Tailwind CSS kennt, und exportiert sie als CSS-Variablen, SCSS, Tailwind-Theme oder JSON. Einzelne Farben rechnest du mit dem Farbkonverter & Kontrastprüfer in andere Formate um, Farben aus einem Foto liefert Farben aus Bild.
So funktioniert’s
- Gib eine Grundfarbe ein, wähle sie mit dem Farbwähler oder lass den Zufall entscheiden.
- Wähle eine Harmonie, z. B. triadisch für drei gleichmäßig verteilte Farben.
- Klicke auf eine Farbe der Palette, um ihre Abstufungen von 50 bis 950 zu sehen.
- Vergib einen Namen, wähle das Exportformat und kopiere den Code in dein Projekt.
Häufige Fragen
Welche Harmonie passt wofür?
Komplementär erzeugt starke Kontraste, gut für Akzente und Buttons. Analog wirkt ruhig und zusammenhängend. Triadisch und tetradisch sind lebendig und bunt, brauchen aber eine klare Hauptfarbe. Monochrom bleibt in einem Farbton und wirkt besonders elegant.
Warum OKLCH statt HSL?
Im HSL-Farbraum wirken Farben mit gleicher Helligkeit unterschiedlich hell – Gelb strahlt, Blau wirkt dunkel. OKLCH ist wahrnehmungsgleich: Gleiche Werte bedeuten gleichen Eindruck. Dadurch passen gedrehte Farbtöne und Abstufungen besser zusammen.
Was bedeuten die Stufen 50 bis 950?
Das ist die von Tailwind CSS bekannte Skala: 50 ist ein sehr heller Ton für Hintergründe, 500 bis 600 die kräftige Hauptfarbe, 900 und 950 sehr dunkle Töne für Text. Deine Grundfarbe landet exakt auf der Stufe, deren Helligkeit am besten passt.
Sind die Farben barrierefrei?
Eine Palette allein garantiert keine ausreichenden Kontraste. Prüfe Text- und Hintergrundfarben mit der Kontrastprüfung im Farbkonverter & Kontrastprüfer – für normalen Text verlangt WCAG mindestens 4,5 : 1.