Farbpaletten-Generator

Die Harmonie-Schemata

• Komplementär: Basis + Gegenteil auf dem Farbkreis (180°). Hoher Kontrast, lebhaft. Gut für Call-to-Action-Buttons gegen eine Markenfarbe.
• Analog: 3-5 Farbtöne innerhalb von 30° voneinander. Ruhig, harmonisch, normalerweise warme oder kühle Familie. Gut für Hintergründe und Illustrationen mit einem Familienthema.
• Triadisch: 3 Farbtöne gleichmäßig verteilt (120°). Lebhaft und ausgewogen. Häufig in Kinderprodukten und mutigen Marken.
• Split-komplementär: Basis + zwei Farbtöne, die die Komplementärfarbe flankieren (150° und 210°). Reichhaltiger als komplementär, weniger angespannt.
• Tetradisch / quadratisch: 4 Farbtöne bei 90°. Schwieriger auszubalancieren — wählen Sie einen als dominant.
• Monochromatisch: einzelne Farbe, variierte Sättigung und Helligkeit. Elegant und kohärent; fehlt der Akzent, es sei denn, es wird mit einem Neutralton kombiniert.

Palettenstruktur für echte Arbeit

Designsysteme benötigen typischerweise:

• Primär (Basismarke)
• Sekundär (unterstützende Marke)
• Akzent (CTA, Highlights)
• Neutrale Skala (Hintergründe, Text, Ränder — 5-10 Grautöne)
• Semantisch (Erfolg, Warnung, Fehler, Info)
• Oberfläche (Panel-Hintergründe, Überlagerungen)

Eine Harmoniepalette gibt Ihnen primär + sekundär + akzentuiert. Neutrale und semantische Farben stammen normalerweise aus separaten Konventionen (entsättigte nahe Grautöne; standardisierte semantische Farbtöne).

Exportformate

CSS benutzerdefinierte Eigenschaften:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Tailwind-Konfiguration:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Kontrast und Barrierefreiheit

Harmonie-Schemata garantieren keine Barrierefreiheit. Überprüfen Sie die Palettenkombinationen gegen die WCAG-Kontrastanforderungen:

• Fließtext gegen Hintergrund: 4.5:1 Mindestanforderung (AA).
• Großer Text: 3:1.
• Nicht-Text (Buttons, Icons, Fokus-Ringe): 3:1.

Kombinieren Sie den Generator mit dem Kontrastprüfer, um konforme Kombinationen zu finden.

Tipps

• Beginnen Sie mit einer definierten Basisfarbe, nicht zufällig — Harmonien wirken zielgerichtet, wenn die Basis Bedeutung hat (Ihre Marke, ein Foto, das Ihnen gefällt, ein kultureller Bezug).
• Testen Sie die Palette in der realen Anwendung: auf einem Button, gegen Text, in einem Diagramm. Gut auszusehen in Mustern garantiert nicht, dass es in einer UI funktioniert.
• Reduzieren Sie die Sättigung leicht für Paletten, die für große Flächen bestimmt sind — vollständig gesättigte Hintergründe sind ermüdend.
• Halten Sie Akzente selten: Wenn 80% einer UI primär und sekundär sind, verwenden Sie die Akzentfarbe in 10% der Berührungspunkte (CTAs) für maximale Wirkung.