Farbpalette Generator – Harmonische Farben erstellen

Inhaltsverzeichnis

             Schnellübersicht
            Farbpalette Generator: 6 Harmonie-Modi
Harmonien: Komplementär, Analog, Triadisch, Tetradisch, Monochrom, Split-Komplementär
Live-Vorschau: Sofortige Aktualisierung
Export: CSS, SCSS, JSON, Tailwind, PNG
Kopieren: Jede Farbe per Klick
Theorie: Was ist Farbharmonie? (Anfängerfreundlich)
Geschichte: Von Newtons Farbkreis zu Material Design
FAQ: Häufige Fragen zur Farbpalette

        

1. Farbpalette Generator

Wähle eine Basisfarbe und einen Harmonie-Modus – die Palette wird sofort generiert.

Basisfarbe wählen

Basisfarbe

#EC4899

hsl(330, 81%, 60%)

Harmonie-Modus wählen

Live-Vorschau

Farbnamen anzeigen

Basisfarbe fixieren

HEX anzeigen

Export & Code

/* Wähle einen Modus und eine Basisfarbe */

Wussten Sie schon?

Der Farbkreis geht auf Isaac Newton zurück (1666) – er ordnete die Spektralfarben kreisförmig an.
Komplementärfarben liegen sich im Farbkreis gegenüber – z.B. Rot und Grün.
Analoge Farben liegen nebeneinander – wirken harmonisch und ruhig.
Triadische Paletten nutzen drei gleichmäßig verteilte Farben (120° Abstand).
Die 60-30-10-Regel ist ein Klassiker: 60% Hauptfarbe, 30% Sekundär, 10% Akzent.

2. Theorie – Farbharmonie einfach erklärt

Verstehe die Grundlagen von Farbharmonie – ohne Vorkenntnisse.

Was ist Farbharmonie?

Farbharmonie bedeutet, dass Farben so kombiniert werden, dass sie angenehm für das Auge wirken.

Farbkreis: Die Basis aller Harmonien
Beziehungen: Positionen der Farben zueinander
Ziel: Ästhetik und Lesbarkeit

Rot + Grün = Komplementär

Warum braucht man das?

Harmonische Farben sind wichtig für:

Websites: Professionelles Design
Branding: Wiedererkennungswert
Marketing: Emotionale Wirkung
Lesbarkeit: Kontrast und Nutzerfreundlichkeit

Farbpaletten definieren ein Design-System

Wo wird es eingesetzt?

Farbpaletten begegnen dir überall:

Webdesign: Material Design, Tailwind
Apps: iOS Human Interface, Material You
Branding: Corporate Identity
Präsentationen: PowerPoint, Keynote
Illustration: Moodboards

Google verwendet Blau, Rot, Gelb, Grün

Tipps für Anfänger

Weniger ist mehr: 3-5 Farben reichen
60-30-10-Regel: Haupt-, Sekundär-, Akzentfarbe
Neutraltöne: Grau, Weiß, Schwarz für Kontrast
Kontrast: WCAG AA (4.5:1) für Text
Konsistenz: Immer die gleiche Palette nutzen

:root { --primary: #ec4899; }

Wussten Sie schon? Die 60-30-10-Regel stammt aus dem Interior Design und besagt, dass eine harmonische Farbverteilung aus 60% Hauptfarbe, 30% Sekundärfarbe und 10% Akzentfarbe besteht. Sie wird heute in Webdesign und UI-Design verwendet. Google Material Design empfiehlt sogar 60% Neutral, 30% Primär, 10% Akzent für mobile Apps.

3. Die 6 Harmonie-Typen im Detail

Jeder Harmonie-Typ erzeugt eine andere Stimmung und Wirkung:

Komplementär

Zwei Farben, die sich im Farbkreis gegenüberliegen (180°). Erzeugt einen starken Kontrast.

Wirkung: Aufmerksamkeitsstark, spannungsreich

Verwendung: Buttons, Call-to-Action, Akzente

Analog

Drei Farben, die im Farbkreis nebeneinander liegen (±30°). Wirkt harmonisch und ruhig.

Wirkung: Harmonisch, sanft, elegant

Verwendung: Hintergründe, Illustrationen

Triadisch

Drei Farben mit 120° Abstand. Bildet ein gleichseitiges Dreieck im Farbkreis.

Wirkung: Lebendig, ausgewogen, bunt

Verwendung: Spiele, Kinderprodukte, Logos

Tetradisch

Vier Farben mit 90° Abstand. Bildet ein Quadrat im Farbkreis.

Wirkung: Reich, vielfältig, dynamisch

Verwendung: Datenvisualisierung, Charts

Monochrom

Verschiedene Helligkeitsstufen einer einzigen Farbe.

Wirkung: Minimalistisch, elegant, ruhig

Verwendung: Corporate Design, Branding

Split-Komplementär

Eine Basisfarbe und zwei Farben, die zur Komplementärfarbe benachbart sind (±150°).

Wirkung: Spannend, aber weniger hart als Komplementär

Verwendung: Moderne Websites, Portfolios

4. Geschichte der Farbharmonie

Von Newtons Farbkreis bis zu modernen Design-Systemen.

1666

Newtons Farbkreis

Isaac Newton zerlegt mit einem Prisma weißes Licht in Spektralfarben und ordnet sie im ersten Farbkreis an – die Grundlage aller Farbharmonien.

1810

Goethes Farbenlehre

Johann Wolfgang von Goethe beschreibt in seiner Farbenlehre die psychologische Wirkung von Farben und ihre Beziehungen zueinander.

1839

Chevreuls Farbkontrast

Michel Eugène Chevreul entdeckt das Gesetz des simultanen Farbkontrasts – Grundlage für Komplementärfarben in der Kunst.

1908

Munsell-Farbsystem

Albert Munsell entwickelt ein systematisches Farbsystem mit Hue, Value und Chroma – der Vorläufer moderner Farbräume wie HSL.

1963

Ittens Farbkreis

Johannes Itten entwickelt am Bauhaus seinen berühmten 12-teiligen Farbkreis, der bis heute in der Kunstpädagogik verwendet wird.

2014

Material Design

Google veröffentlicht Material Design mit einer 500+ Farben umfassenden Palette und klaren Regeln für Farbkombinationen in Apps und Web.

Heute

Design-Systeme

Moderne Tools wie Tailwind CSS, Radix Colors und Material You bieten vordefinierte Farbpaletten mit bis zu 11 Helligkeitsstufen pro Farbe – dynamisch generiert und barrierefrei.

5. FAQ – Spannende Fragen & Antworten

Häufige Fragen zu Farbpaletten

Welche Harmonie ist die beste für meine Website?

Das hängt vom Ziel und der Stimmung ab:

Ziel	Empfehlung	Wirkung
Professionell	Monochrom + Akzent	Seriös, klar
Auffällig	Komplementär	Spannend, aktiv
Freundlich	Analog	Harmonisch, warm
Kreativ	Triadisch	Bunt, lebendig
Modern	Split-Komplementär	Frisch, ausgewogen

Bewährter Ansatz für Einsteiger:

Eine Hauptfarbe als Basis (60%)
Eine Akzentfarbe für Buttons (10%)
Neutraltöne für Hintergrund und Text (30%)

Tipp: Weniger ist mehr! Die meisten erfolgreichen Websites verwenden nur 2-3 Farben + Neutraltöne.

Was ist die 60-30-10-Regel?

Die 60-30-10-Regel ist ein bewährtes Verhältnis für Farbverteilung:

60% Hauptfarbe: Der dominante Farbton (meist neutral oder hell)
30% Sekundärfarbe: Eine zweite Farbe für Flächen und Kontraste
10% Akzentfarbe: Die auffällige Farbe für Buttons und Highlights

Beispiel einer Website:

60% → Weißer Hintergrund
30% → Graue Überschriften
10% → Pinke Buttons

Warum funktioniert das?

Das Auge hat eine klare Hierarchie
Die Akzentfarbe bleibt wirkungsvoll
Die Seite wirkt nicht überladen

Variante für Apps: 60% Neutral, 30% Primär, 10% Akzent (Google Material Design).

Wie viele Farben sollte eine Palette haben?

Die optimale Anzahl hängt vom Projekt ab:

Palette	Anzahl	Verwendung
Minimal	2-3 Farben	Einfache Websites
Standard	4-5 Farben	Die meisten Websites
Erweitert	6-8 Farben	Apps, Dashboards
Design-System	10-12 Farben	Große Produkte

Faustregel: Starte mit 3 Farben:

Primärfarbe: Deine Markenfarbe
Sekundärfarbe: Für Kontraste
Neutral: Für Text und Hintergrund

Tipp: Erweitere deine Palette durch Helligkeitsstufen (heller/dunkler) statt durch neue Farben. Das wirkt professioneller und konsistenter.

Beispiel: Tailwind CSS nutzt 11 Stufen pro Farbe (50, 100, 200, ..., 900, 950).

Warum wirken manche Farbkombinationen unangenehm?

Unangenehme Farbkombinationen haben oft physiologische oder psychologische Ursachen:

Vibrationseffekt: Bestimmte Farben wie Rot und Grün oder Blau und Orange "flimmern" an den Kanten, weil unser Auge sie nicht gleichzeitig scharf stellen kann.
Zu ähnliche Helligkeit: Zwei Farben mit gleicher Helligkeit sind schwer zu unterscheiden.
Zu viele gesättigte Farben: Mehr als 3 kräftige Farben wirken überladen.
Kulturelle Assoziationen: Rot/Grün kann an Weihnachten erinnern, Lila/Gelb an Ostern.

Wie vermeide ich das?

Unterschiedliche Helligkeitsstufen verwenden
Neutraltöne als Puffer einbauen
60-30-10-Regel befolgen
Kontrast-Check mit Tools wie WebAIM

Interessant: Der Vibrationseffekt tritt nur bei gesättigten Farben mit gleicher Helligkeit auf. Mit unterschiedlicher Helligkeit verschwindet er.

Wie exportiere ich meine Palette für verschiedene Tools?

Unser Tool bietet mehrere Export-Formate:

Format	Verwendung	Tool
CSS	Webdesign	Browser, VS Code
SCSS	Sass-Projekte	Webpack, Vite
JSON	Daten-Export	Figma, Adobe XD
Tailwind	Tailwind-Projekte	tailwind.config.js
SVG	Grafikprogramme	Illustrator, Figma

Tipps für den Export:

CSS: Als :root-Variablen verwenden
SCSS: Als $variablen in _variables.scss
Figma: JSON importieren oder Farben manuell anlegen
Tailwind: In tailwind.config.js erweitern

Profi-Tipp: Speichere deine Palette in einem Design Token-Format (z.B. W3C Design Tokens) – so kannst du sie in allen Tools synchronisieren.

Was ist der Unterschied zwischen Farbpalette und Farbschema?

Die Begriffe werden oft synonym verwendet, aber es gibt einen feinen Unterschied:

Farbpalette: Eine Sammlung von Farben, die gut zusammenpassen. Oft ohne feste Regeln. Beispiel: "Unsere Markenfarben".
Farbschema: Eine strukturierte Zuordnung von Farben zu UI-Elementen. Mit Rollen wie Primary, Secondary, Background, Text, Error, Success.

Beispiel einer Palette:

#EC4899, #8B5CF6, #22C55E, #F59E0B

Beispiel eines Schemas:

primary: #EC4899
secondary: #8B5CF6
success: #22C55E
warning: #F59E0B
error: #EF4444

Fazit: Eine Palette ist die Grundlage, ein Schema die Anwendung. Beide sind wichtig für konsistentes Design!

Wie finde ich die perfekte Basisfarbe für meine Marke?

Die Basisfarbe deiner Marke sollte folgende Faktoren berücksichtigen:

1. Farbpsychologie:

Farbe	Wirkung	Branche
Blau	Vertrauen, Ruhe	Banken, Tech
Rot	Energie, Dringlichkeit	Food, Sales
Grün	Natur, Nachhaltigkeit	Öko, Gesundheit
Gelb	Optimismus, Wärme	Kinder, Food
Lila	Kreativität, Luxus	Beauty, Kunst
Orange	Freundlich, dynamisch	Sport, Jugend

2. Zielgruppe:

Jung: Kräftige, lebendige Farben
Erwachsen: Dezente, elegante Töne
Kinder: Helle, bunte Farben
Business: Blau, Grau, Dunkelgrün

3. Wettbewerbsanalyse: Schau dir die Farben deiner Konkurrenten an. Hebe dich ab oder ordne dich ein?

4. Testen: Erstelle 2-3 Varianten und teste sie mit Nutzern.

Tipp: Die beste Markenfarbe ist auffällig, aber nicht ablenkend – und funktioniert in allen Formaten (Web, Print, App).

Welche Rolle spielt Barrierefreiheit bei Farbpaletten?

Barrierefreiheit ist essentiell – etwa 8% der Männer und 0,5% der Frauen haben eine Farbfehlsichtigkeit (meist Rot-Grün-Schwäche).

WCAG-Kontrastanforderungen:

Level	Text (klein)	Text (groß)
AA (Minimum)	4.5:1	3:1
AAA (Erhöht)	7:1	4.5:1

Regeln für barrierefreie Paletten:

Kontrast: Text immer gut lesbar
Nicht nur Farbe: Auch Icons, Muster, Text verwenden
Farbfehlsichtigkeit simulieren: Tools wie Coblis nutzen
Alternative Zustände: Hover, Focus, Active unterscheidbar

Tools zum Testen:

WebAIM Contrast Checker (online, kostenlos)
Chrome DevTools (Farbwähler prüft Kontrast)
Figma Plugin "Contrast"
Adobe Color mit Accessibility-Check

Fazit: Barrierefreie Paletten sind nicht nur ethisch wichtig – sie verbessern auch die Nutzererfahrung für alle!

Zusammenfassung

Die wichtigsten Punkte

6 Harmonie-Typen: Komplementär, Analog, Triadisch, Tetradisch, Monochrom, Split-Komplementär
60-30-10-Regel: 60% Haupt, 30% Sekundär, 10% Akzent
Weniger ist mehr: 3-5 Farben reichen meist
Barrierefreiheit: WCAG AA (4.5:1) für Text
Export: CSS, SCSS, JSON, Tailwind, SVG
Farbpsychologie: Blau = Vertrauen, Rot = Energie, Grün = Natur
Design-Systeme: Tailwind, Material Design als Vorbilder
Unser Tool: 6 Harmonien mit Live-Vorschau und Export

Weitere Tools

Farbkonverter

Konvertiere Farben zwischen HEX, RGB, HSL, HSV, CMYK und mehr.

Zum Tool

Timestamp Converter

Unix-Zeitstempel in lesbare Daten umwandeln und umgekehrt.

Zum Tool

.gitignore Generator

Erstelle .gitignore-Dateien für alle gängigen Sprachen und Tools.

Zum Tool

QR-Code Generator

Erstelle QR-Codes mit Logo, Farben und Fehlerkorrektur-Level.

Zum Tool