Farbpaletten-Generator

Was dieser Generator macht

Würfelt eine Fünf-Farben-Palette, die tatsächlich brauchbar ist – nicht das chaotische Rauschen, das man bei einem rein zufälligen RGB-Wurf bekommt. Etwa zwei Drittel der Zeit wird aus einem kuratierten Pool designerprobter Seed-Paletten ausgewählt, der Rest wird algorithmisch mit Harmonieregeln (analog, triadisch, split-komplementär, tetradisch, komplementär mit Neutraltönen) und auf die jeweilige Stimmung abgestimmten Sättigungs- und Helligkeitsbereichen gebaut. Wähle eine Stimmung – warm, kühl, pastell, knallig, Erdtöne, monochrom oder Auto –, um die Ausgabe in eine bestimmte Richtung zu lenken. Sperre eine Farbe, um sie über mehrere Würfe hinweg zu behalten; ungesperrte Slots werden bei jedem Wurf ersetzt.

So nutzt du den Generator

Wähle eine Stimmung (oder lasse sie auf Auto für einen Mix). Klicke auf Generieren oder drücke einfach Leertaste, um eine neue Palette zu würfeln. Klicke auf einen Hex-Code, um ihn in die Zwischenablage zu kopieren. Klicke auf das Schloss-Symbol einer Farbe, die du behalten willst, und würfle dann neu, um die anderen zu ersetzen. Mit CSS kopieren bekommst du einen einfügebereiten :root-Block aus Custom Properties, oder mit JSON kopieren ein Array aus Hex-Strings, das du in eine Konfigurationsdatei oder einen Design-Token-Export ziehen kannst.

Was eine Palette absichtsvoll wirken lässt

Fünf Farben sind der Sweet Spot – genug Vielfalt für Primär / Sekundär / Akzent / Heller Neutralton / Dunkler Neutralton, aber nicht so viel, dass nichts dominiert. Plane innerhalb dieser fünf eine Hierarchie: Eine dominante Farbe trägt 60 % des Layouts, eine sekundäre nimmt 30 % ein, und die übrigen drei teilen sich die letzten 10 %. Die Stimmung Auto eignet sich hervorragend zum Brainstorming; Erdtöne und Pastell funktionieren gut für Editorial- und Wellness-Marken; Knallig für Kinderprodukte, Gaming und CTA-lastige Landingpages; Monochrom, wenn du eine einzelne Farbtonrampe willst.

Wann welche Stimmung passt

Auto – beste Mischung aus kuratierten Seeds und algorithmischen Schemata; der richtige Startpunkt, wenn du noch nicht weißt, was du willst. Warm – Sonnenuntergangs-Paletten, Food-Marken, Energie- und Wärme-Kampagnen. Kühl – Fintech, SaaS, alles, was ruhig und vertrauenswürdig wirken soll. Pastell – Kinderprodukte, Beauty-Marken, weiche Hero-Bereiche. Knallig – Gaming, Musik, alles, was Aufmerksamkeit erregen soll. Erdtöne – Outdoor, Nachhaltigkeit, Landwirtschaft, Immobilien. Monochrom – minimalistisches Editorial, Ein-Farb-Markensysteme, barrierefreies Design.

Häufig gestellte Fragen

Warum sehen die Farben nicht völlig zufällig aus?

Weil rein zufälliges RGB schrecklich aussieht – kollidierende Farbtöne, matschige Mitteltöne, keine Hierarchie. Wir ziehen etwa zwei Drittel der Paletten aus einem kuratierten Pool designer-geprüfter Seeds (mit kleinem Hue-Jitter, damit du nicht zweimal hintereinander dieselben fünf Farben siehst). Das andere Drittel wird mit Harmonieregeln und Sättigungs-/Helligkeitsbereichen gebaut, die auf Brauchbarkeit getestet sind. Das Ergebnis fühlt sich immer noch zufällig an, aber jeder Wurf ist etwas, das du tatsächlich ausliefern könntest.

Kann ich eine Farbe sperren und den Rest neu würfeln?

Ja. Klicke auf das Schloss-Symbol einer Farbe, um sie einzufrieren. Gesperrte Farben bleiben über mehrere Würfe erhalten; ungesperrte Slots bekommen frische Farben. Das ist der Workflow, den die meisten Designer nutzen: die eigene Markenfarbe gesperrt halten und die vier umgebenden Farben so lange neu würfeln, bis es klick macht.

Funktionieren die Paletten in puncto Barrierefreiheit (WCAG)?

Nicht automatisch – die meisten gewürfelten Paletten enthalten mindestens ein Paar, das WCAG bei Text auf Hintergrund nicht besteht. Nutze das Ergebnis als Ausgangspunkt und prüfe konkrete Text-/Hintergrund-Kombinationen mit unserem Kontrast-Checker. Wenn eine Palette für Marketingbilder (kein Text) gedacht ist, hast du mehr Spielraum.

Wie exportiere ich in mein Design-Tool?

CSS kopieren erzeugt einen :root { --color-1: #...; }-Block, fertig zum Einfügen in ein Stylesheet. JSON kopieren liefert ein Array aus Hex-Strings – nützlich für Figma-Plugins, Design-Token-JSON oder beliebige Konfigurationsdateien. Für Tailwind fügst du das JSON in deine tailwind.config.js unter theme.extend.colors ein.

Was erzeugt „Monochrom“ tatsächlich?

Fünf Töne desselben Farbtons – gleicher H-Wert, gleiches S, mit L abgestuft von 0,92 (sehr hell) bis 0,18 (sehr dunkel). Das Ergebnis ist eine vollständige monochromatische Rampe, die sich für ein Ein-Farb-Markensystem oder eine neutrale Flächenpalette eignet. Sperre die mittlere Farbe auf deine Markenfarbe und würfle dann neu, um die Sättigung zu variieren, während die Helligkeitsform gleich bleibt.

Wird etwas an einen Server gesendet?

Nein. Der Seed-Pool, die Harmonie-Mathematik und die Kopierfunktionen laufen alle in deinem Browser. Öffne die DevTools → Netzwerk und würfle neu – es werden keine Anfragen abgesetzt. Würfle Paletten für unveröffentlichte Produkte, ohne etwas zu leaken.

Farbpaletten-Generator