Farbpaletten-Generator: Harmonische Farbschemata erstellen
Von den Grundlagen der Farbtheorie zur praktischen UI-Anwendung — generiere professionelle Paletten mit komplementären, analogen und triadischen Harmonien.
Eine gut gewählte Farbpalette ist das Fundament jedes kohärenten Designsystems. Das Wählen von Farben ohne theoretischen Hintergrund führt zu Paletten, die kollidieren, die Augen ermüden oder das falsche emotionale Register kommunizieren. Farbharmonie ist das Prinzip, nach dem bestimmte Farbbeziehungen visuell angenehme, ausgewogene Ergebnisse erzeugen — und es kann systematisch angewendet werden.
Dieser Leitfaden führt durch die wesentlichen Farbtheoriekonzepte für professionelle Paletten, erklärt jeden Harmonietyp mit konkreten Beispielen und zeigt, wie man sie in realen UI-Designentscheidungen anwendet.
Grundlagen der Farbtheorie
Die Farbtheorie ist die Sammlung praktischer Anleitungen zur Farbkombination. Sie hat ihren Ursprung in der Arbeit von Johann Wolfgang von Goethe (1810). Die Schlüsselerkenntnis: Farben interagieren — derselbe Farbton sieht neben warmen oder kühlen Nachbarn anders aus. Die drei Eigenschaften im HSL-Modell sind Farbton (0–360°), Sättigung (0–100%) und Helligkeit (0–100%). Professionelle Palettengenerierung arbeitet hauptsächlich mit Farbtonbeziehungen und steuert Sättigung und Helligkeit unabhängig.
Kostenloses Tool Farbpaletten-Generator Erzeuge komplementäre, analoge und triadische Paletten aus jeder FarbeFarbrad und Harmonien
Das Farbrad ordnet Farbtöne in einem Kreis an, sodass ihre Beziehungen geometrisch werden. Farbharmonien werden durch Winkel definiert: 0° (monochromatisch), 30° (analog), 60° (split-komplementär), 120° (triadisch), 180° (komplementär), 90°/270° Paare (tetrardisch). Jedes Schema erzeugt einen vorhersehbaren emotionalen Charakter. Generatoren wie das PixCode Color Palette Tool berechnen diese Winkel von jedem Ausgangsfarbton.
Komplementärfarben
Komplementärfarben liegen sich auf dem Farbrad direkt gegenüber — 180° voneinander entfernt. Blau und Orange, Rot und Grün, Lila und Gelb sind klassische Paare. Der Kontrast ist maximal, was Komplementärpaare ideal für Calls to Action macht. Die Herausforderung: vollgesättigte Komplementärpaare können visuell vibrieren. Der professionelle Ansatz: eine Seite entsättigen und die lebhafte Version nur für Akzente verwenden.
Kostenloses Tool HEX zu RGB Konverter Konvertiere Paletten-HEX-Werte in RGB für die Verwendung im CodeAnaloge Schemata
Analoge Farben liegen benachbart auf dem Farbrad — typischerweise im Bereich von 30–60°. Diese Schemata wirken kohärent, ruhig und natürlich, weil sie in natürlichen Gradienten vorkommen. Im UI-Design eignen sich analoge Paletten gut für Informations-Dashboards und Markenidentitäten, die Vertrauen und Ruhe kommunizieren. Das Risiko ist Monotonie — füge einen einzelnen Akzent von der Komplementärseite hinzu.
Triadische und tetrardische Paletten
Eine triadische Palette verwendet drei gleichmäßig im Abstand von 120° angeordnete Farben. Triadische Paletten sind lebendig und dynamisch — sie bieten mehr Vielfalt als Komplementär bei gleichzeitiger Balance. Im UI: eine Farbe als Dominante (60–70%), eine als Sekundär (20–30%) und eine als Akzent (5–10%). Eine tetrardische Palette verwendet vier Farben im 90°-Abstand und bietet die größte Vielfalt, erfordert aber sorgfältige Balance.
Kostenloses Tool Tint & Shade Generator Erweitere jede Palettenfarbe zu einer vollständigen HelligkeitsskalaPaletten im UI-Design anwenden
Die 60-30-10-Regel ist das praktischste Framework: 60% dominante Farbe (Hintergründe, große Flächen), 30% Sekundärfarbe (Karten, Seitenleisten), 10% Akzentfarbe (CTAs, Links). Teste immer Kontrastverhältnisse gegen WCAG 2.1: 4,5:1 für normalen Text (AA), 3:1 für großen Text (AA), 7:1 für AAA. Design-Tokens speichern Palettenwerte in HEX oder HSL.