Farbpaletten-Generator (5 Schemata aus einer Basisfarbe)

Wähle eine Basisfarbe, wähle ein farbtheoretisches Schema aus und erhalte eine abgestimmte Palette. Klicke auf Farbfelder, um einzelne Hex-Werte zu kopieren, oder kopiere alle auf einmal für Design-Tools und CSS-Variablen.

Basisfarbe

Farbschema

Generierte Palette

#3BDFF6
#3B82F6
#513BF6

Wie es funktioniert

Die fünf farbtheoretischen Schemata

Komplementär: zwei Farben an gegenüberliegenden Enden des Farbrads (180° auseinander). Hoher Kontrast, lebendig. Wird für Akzente, Call-to-Action-Buttons und zur Schaffung von Brennpunkten verwendet.

Analog: drei nebeneinanderliegende Farben auf dem Rad (30° auseinander). Harmonisch und angenehm, geringer Kontrast. In der Natur üblich; ideal für Hintergründe und UI-Oberflächen.

Triadisch: drei gleichmäßig verteilte Farben (120° auseinander). Lebendig und ausgewogen. Wird in spielerischen oder energetischen Designs verwendet.

Tetradisch (Rechteck): vier Farben, die ein Rechteck bilden (90° auseinander). Reiche Palette, aber schwieriger auszubalancieren – typischerweise eine als dominierend und andere als Akzente verwenden.

Monochrom: Töne, Tönungen und Schattierungen eines einzigen Farbtons. Anspruchsvoll und einheitlich. Üblich in minimalistischen Designs und Corporate-Branding.

Eine Ausgangsfarbe wählen

Markenfarben: Die meisten Projekte starten von einer bestehenden Logo- oder Markenfarbe. Teste sie als Basis über alle 5 Schemata, um die beste Passform für dein Design zu finden.

Inspiration: Wähle eine Farbe aus Fotografie, Kunst oder Natur. Lebendige Farben (hohe Sättigung, mittlere Helligkeit) funktionieren am besten als Basis; sehr helle oder sehr dunkle Farben erzeugen ausgewaschene Paletten.

Barrierefreiheit: Stelle sicher, dass deine endgültige Palette genügend Kontrast für Text hat. Verwende unsere Kontrastprüfung, um sicherzustellen, dass Vordergrund-/Hintergrund-Kombinationen WCAG AA erfüllen (4,5:1 für normalen Text).

Die Palette verwenden

CSS-Variablen: Definiere die Palettenfarben als :root-Variablen (--color-primary, --color-accent usw.), sodass du Themes ändern kannst, indem du einen einzigen Ort änderst.

Design-Tools: Füge Hex-Werte in Figma, Sketch oder Adobe XDs Farbbibliotheken ein. Die meisten Tools akzeptieren Hex direkt; einige akzeptieren auch HSL oder benannte CSS-Farben.

Nutzung begrenzen: Selbst mit 5 Farben verwenden echte Designs typischerweise 2–3 prominent und den Rest sparsam. Die 60-30-10-Regel (60 % dominant, 30 % sekundär, 10 % Akzent) ist eine nützliche Ausgangsbalance.

Häufige Fragen

›Welches Schema soll ich verwenden?

Analog ist die sicherste Wahl für die meisten Designs – drei benachbarte Farben erzeugen Harmonie ohne Monotonie. Komplementär funktioniert gut für Hervorhebungen (CTA-Buttons). Monochrom ist am besten für minimale/anspruchsvolle Marken. Triadisch für spielerisches/energetisches Gefühl.

›Kann ich mehr als 5 Farben erhalten?

Nicht mit diesem Tool – wir generieren die kanonischen 2–5-Farben-Schemata. Für größere Paletten verwende die analoge Ausgabe und erstelle monochromatische Schattierungen jeder Farbe (Schemata kombinieren).

›Verwendet der Algorithmus einen wahrnehmungsgleichmäßigen Farbraum?

Wir verwenden HSL-Mathematik, die schnell und vorhersehbar ist. Für wahrnehmungsgleichmäßige Ergebnisse (besser für barrierefreiheitsoptimierte Paletten) verwenden fortgeschrittene Tools OKLCH oder CIELAB. HSL ist für die meisten Design-Arbeiten ausreichend.

›Ist meine Palette barrierefrei?

Nicht automatisch. Farbtheoretische Schemata garantieren ästhetische Harmonie, keinen Kontrast für Text. Überprüfe Text-auf-Hintergrund-Kombinationen immer mit unserer Kontrastprüfung, bevor du sie verwendest.

›Kann ich meine Lieblingspaletten speichern?

Noch nicht – kopiere die Hex-Codes in dein Design-System oder deine Notizen. Bookmarkbare Paletten-URLs sind geplant.

›Was ist mit Material Design- oder Tailwind-Paletten?

Das sind vorgefertigte Systeme. Generiere hier ein Basisschema und suche dann ähnliche Material/Tailwind-Farben. Einige Apps exportieren Hex-Codes, die direkt mit diesen Systemen kompatibel sind.

›Warum sieht meine Palette 'flach' aus?

Wenn deine Basisfarbe sehr hell (hohe Helligkeit) oder sehr dunkel (niedrige Helligkeit) ist, hat die generierte Palette einen begrenzten Dynamikbereich. Wähle eine Basis mit mittlerer Helligkeit (40–60 %) und hoher Sättigung (70 %+) für lebendige Ergebnisse.

›Verlassen die Daten meinen Browser?

Nein. Alle Berechnungen laufen lokal; nichts wird an einen Server gesendet.