Farbpaletten Generator
Harmonische Farbpaletten erstellen. Zufällig generieren oder manuell anpassen.
So funktioniert das Tool
Eine durchdachte Farbpalette macht den Unterschied zwischen einem Interface, das wirkt, und einem, das wie ein zufälliges Tailwind-Demo aussieht. Unser Generator erzeugt harmonische Paletten aus einer Basis-Farbe nach klassischen Farblehre-Schemata: monochromatisch, analog, komplementär, triadisch, tetradisch. Jede Palette zeigt Hex-, RGB- und HSL-Werte; du kannst direkt in die Zwischenablage kopieren oder in CSS-Variablen exportieren.
Typische Anwendungsfälle
Neue Brand-Identity
Von einer Primärfarbe ausgehend Sekundär- und Akzentfarben ableiten, die nicht beliebig aussehen, sondern harmonisch zusammenpassen.
Tailwind-Custom-Theme
Statt der Tailwind-Default-Palette eine eigene erzeugen — HSL-Werte direkt in tailwind.config.ts unter theme.extend.colors.
Datenvisualisierung
5-7 unterscheidbare Farben für ein Chart brauchen Distanz auf dem Farbkreis — triadisches Schema gibt drei gleich-distinkte Töne plus passende Tints.
Marketing-Material in einem Guss
Wenn Print, Website und Social-Cards farblich konsistent wirken sollen, exportierst du die Palette als Hex und nutzt sie in allen Tools.
Häufige Fragen
Welches Farbschema sollte ich wählen?
Monochromatisch (eine Farbe in verschiedenen Helligkeiten) wirkt ruhig und seriös — typisch für Tech-Brands. Analog (Nachbarn auf dem Farbkreis) ist harmonisch ohne zu langweilig zu sein — gut für Lifestyle. Komplementär ist energiegeladen, riskant — zwei sich gegenseitig verstärkende Farben. Triadisch ist die sichere Variante für lebendige UIs.
Warum sehen meine Farben am Bildschirm anders aus als im Print?
Bildschirme zeigen RGB (additiv, leuchtend), Print nutzt CMYK (subtraktiv, gedruckt). Manche RGB-Farben (besonders helle Blautöne, leuchtendes Magenta) sind in CMYK gar nicht darstellbar. Für Print-Material brauchst du eine zusätzliche CMYK-Approximation der Palette oder spezifische Pantone-Farben.
Bekomme ich die Farben auch in HSL?
Ja. Wir zeigen Hex, RGB und HSL nebeneinander. HSL ist oft das beste Format zum manuellen Nachjustieren: H (Hue) für „andere Farbe”, S (Saturation) für „weniger bunt”, L (Lightness) für „heller/dunkler” — ein Achsenwechsel nach Augenmaß ist intuitiver als Hex-Anpassung.
Was sind „Tints” und „Shades”?
Tints sind die Basis-Farbe mit zunehmend Weiß gemischt (heller, pasteller). Shades sind die Basis mit zunehmend Schwarz gemischt (dunkler, intensiver). Eine 11-stufige Tailwind-Skala von 50 (sehr hell) bis 950 (sehr dunkel) ist genau das — für so eine spezielle Skala nutze unseren Tailwind-Shades-Generator.
Erfüllen die Paletten WCAG-Kontrast?
Nicht automatisch. Eine Palette erzeugt nur harmonische Farben — welche davon mit welcher als Text auf Hintergrund funktioniert, muss separat geprüft werden. Nimm den Farbkontrast-Checker als Folgeschritt.
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.