Farbpaletten-Generator

Erstellen Sie harmonische Farbpaletten aus einer Basisfarbe. Generieren Sie komplementäre, analoge, triadische, tetradische und monochromatische Schemata mit HEX-/RGB-/HSL-Codes.

Base color (HEX)

Color harmony

Generated Palette

Base

hsl(217, 91%, 60%)

#3C83F6

Complement

hsl(37, 91%, 60%)

#F6AF3C

CSS Variables

:root {
  --color-1: #3C83F6;
  --color-2: #F6AF3C;
}

So verwenden Sie Farbpaletten-Generator

1Geben Sie eine Basisfarbe mit der Farbauswahl oder HEX-Eingabe ein.
2Wählen Sie einen Harmonietyp: komplementär, analog, triadisch usw.
3Sehen Sie die generierte Palette mit allen Farbcodes.
4Kopieren Sie einzelne Farben oder die vollständige Palette als Variablen.

ZenovayAnalytics

Machen Sie aus Besuchern Kunden.

Besucher-Tracking in Echtzeit
Datenschutz zuerst, kein Cookie-Banner
In zwei Minuten eingerichtet

Zenovay entdecken

Häufig gestellte Fragen

Was ist Farbharmonie?▾

Farbharmonie ist die ästhetisch ansprechende Kombination von Farben basierend auf ihrer Position auf dem Farbkreis. Die wichtigsten Harmonietypen: Komplementär (gegenüberliegende Farben, hoher Kontrast – z. B. Blau + Orange), Analog (benachbarte Farben, harmonisch – z. B. Blau, Blaugrün, Grün), Triadisch (3 Farben gleichmäßig im Abstand von 120° – z. B. Rot, Gelb, Blau), Tetradisch/Quadratisch (4 Farben im Abstand von 90°), Komplementär-Split (Basisfarbe + zwei Farben neben der Komplementärfarbe). Monochromatisch verwendet Töne und Schattierungen einer einzigen Farbgebung.

Wie funktionieren Komplementärfarben?▾

Komplementärfarben liegen sich auf dem Farbkreis direkt gegenüber (180° voneinander entfernt). Beispiele: Rot + Grün, Blau + Orange, Gelb + Lila. Nebeneinander gestellt erzeugen sie maximalen Kontrast – jede lässt die andere lebendiger erscheinen. Zu viel Komplementärpaarung ist überwältigend; verwenden Sie eine als dominant (70 %) und die andere als Akzent (30 %). Analoge Farben (15–30° auseinander) lassen sich leichter kombinieren, sind aber weniger dynamisch.

Was ist die 60-30-10-Farbregel?▾

Die 60-30-10-Regel ist ein Designprinzip für ausgewogene Farbverwendung: 60 % dominante Farbe (meist neutral oder Markenfarbe), 30 % Sekundärfarbe (ergänzt die dominante), 10 % Akzentfarbe (für Betonung, Call-to-Actions, Hervorhebungen). Dies schafft eine visuelle Hierarchie und verhindert, dass eine einzige Farbe das Design überwältigt. Beispiel: 60 % Weiß, 30 % Marineblau, 10 % leuchtendes Orange. Das Verhältnis sorgt dafür, dass das Auge natürlich durch die Komposition geführt wird.

Was sind Tints, Shades und Tones?▾

Tint: eine mit Weiß gemischte Farbe – erhöht die Helligkeit. Shade: eine mit Schwarz gemischte Farbe – verringert die Helligkeit. Tone: eine mit Grau gemischte Farbe – reduziert die Sättigung. In HSL: Tints erhöhen L Richtung 100 %, Shades verringern L Richtung 0 %, Tones verringern S Richtung 0 %. Designsysteme (Tailwind, Material, Radix) verwenden eine Skala von 10 Tints/Shades (50–950) für jede Basisfarbe. Dies erzeugt ein konsistentes visuelles Gewicht über UI-Elemente hinweg.

Wie wähle ich Farben für Barrierefreiheit aus?▾

WCAG 2.1 erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt/14pt fett) gegenüber dem Hintergrund. Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05), wobei L die relative Leuchtdichte ist. Berücksichtigung des Dunkelmodus: Eine auf Weiß lesbare Farbe ist möglicherweise nicht auf Schwarz lesbar – testen Sie immer beide. Vermeiden Sie es, sich ausschließlich auf Farbe für Bedeutungen zu stützen (Rot = Fehler, Grün = Erfolg) – verwenden Sie auch Symbole oder Textbeschriftungen.

Bild-Tools