Wie Sie eine Farbpalette für Ihr Design erstellen

Farbe ist eines der ersten Dinge, die Menschen an einer Website, App oder einem Design bemerken. Eine gut gewählte Palette schafft einen stimmigen, professionellen Eindruck. Eine schlecht gewählte lässt selbst guten Inhalt schief wirken, und Barrierefreiheitsprobleme können Millionen Nutzer leise ausschließen. Sie müssen kein Designer sein, um gute Farben zu wählen. Farbtheorie gibt Ihnen verlässliche Formeln, und Werkzeuge, die diese Formeln mit Barrierefreiheitsprüfungen kombinieren, machen eine brauchbare Palette zu einer Fünf-Minuten-Aufgabe.

Eine kurze Geschichte der Farbtheorie

Isaac Newton baute um 1666 das erste Farbrad, indem er das sichtbare Spektrum zu einem Kreis bog, den linearen Regenbogen auf sich selbst zurückbiegend. Johann Wolfgang von Goethe erweiterte die Idee 1810 mit seiner Farbenlehre, mit Fokus darauf, wie Farben wirken, statt wie sie physikalisch zusammengesetzt sind. Albert Munsell systematisierte sie 1905, indem er Farbton, Wert und Chroma trennte und Designern Vokabular für «dunkleres Rot» vs. «gesättigteres Rot» gab.

Das 20. Jahrhundert ergänzte perzeptive Farbräume. CIE Lab (1976) war der erste, der «gleiche numerische Distanz = gleiche wahrgenommene Differenz» zu einem echten Ziel machte. HSL und HSV (1978) gaben Programmierern einfachere Abstraktionen. Modernes Webdesign hat sich zu OKLCH (2020) und OKLAB verschoben, perzeptiv einheitlichen Farbräumen, die endlich «Helligkeit 50%» wirklich gleich hell aussehen lassen, unabhängig vom Farbton. Diese Entwicklung ist wichtig, weil sie Paletten-Generatoren erlaubt, Abstufungen zu erzeugen, die zwischen Farben konsistent aussehen, nicht nur numerisch verwandt.

Farbharmonie-Modi

Harmonie-Modi basieren auf den Beziehungen zwischen Farben auf dem Farbrad. Jeder erzeugt ein anderes Gefühl:

Komplementär, zwei direkt gegenüberliegende Farben (z. B. Blau und Orange, Rot und Grün). Hoher Kontrast, energetisch. Gut für Call-to-Action-Elemente, die hervortreten sollen, aber sparsam einsetzen, weil die Spannung laut wirken kann.

Analog, drei Farben nebeneinander auf dem Rad (z. B. Blau, Blaugrün, Grün). Harmonisch und beruhigend. Gut für Hintergründe, naturthematische Designs und Paletten, in denen alles verwandt wirken soll.

Triadisch, drei gleichmäßig auf dem Rad verteilte Farben (z. B. Rot, Gelb, Blau). Lebhaft und ausgewogen. Gut für verspielte, kreative oder Kinder-Designs.

Geteilt-komplementär: eine Farbe plus die beiden Farben neben ihrem Komplement. Ähnlicher Kontrast wie komplementär, aber weniger Spannung; oft besser in Interfaces nutzbar.

Tetradisch (oder Rechteck): vier Farben als zwei Komplementärpaare. Reich und variiert, aber schwer auszubalancieren; meist dominiert eine, die anderen wirken als Akzente.

Quadratisch: vier Farben gleichmäßig auf dem Rad verteilt. Maximale Vielfalt, gleiche Betonung. Schwer gut zu nutzen, es sei denn, drei der vier bleiben kleine Akzente.

Monochromatisch: verschiedene Nuancen, Tönungen und Tönungsabstufungen einer einzigen Farbe. Immer harmonisch, raffiniert, kann aber bei Überbeanspruchung visuelles Interesse verlieren. Hervorragend für Editorial-Layouts und minimalistische Markensysteme.

Achromatisch: nur Schwarz, Weiß und Grau. Der klassische Zeitungs- oder kontrastreiche Magazin-Look. Häufig mit einem einzigen leuchtenden Akzent kombiniert.

So erzeugen Sie eine Palette

1. Harmonie-Modus wählen: Wählen Sie Zufall, Analog, Komplementär, Triadisch, Geteilt-komplementär, Tetradisch oder Monochromatisch, um die Beziehungen zwischen Farben festzulegen.
2. Startfarbe wählen: Geben Sie eine Markenfarbe ein, picken Sie eine Farbe aus einem Referenzbild, oder lassen Sie den Generator eine auswählen.
3. Farben sperren, die Ihnen gefallen: Wenn Sie eine Farbe finden, die Sie behalten möchten, sperren Sie sie und regenerieren Sie die anderen, bis die gesamte Palette zusammenpasst.
4. Helligkeit und Sättigung anpassen: Die meisten Generatoren lassen Sie Helligkeit und Sättigung jeder Farbe unabhängig feinjustieren, damit die Palette genug Helligkeitsvariation für UI-Arbeit hat.
5. Barrierefreiheits-Check durchführen: Überprüfen Sie, dass Text-auf-Hintergrund-Kombinationen WCAG AA (4,5:1) oder AAA (7:1) Kontrast erfüllen.
6. Exportieren, kopieren Sie die HEX-Codes, CSS-Variablen, die Tailwind-Konfiguration, ASE-Swatches, oder speichern Sie die Palette als Bild für Design-Tools wie Figma, Sketch oder Canva.

Eine nutzbare Palette aufbauen

Eine Palette ist mehr als eine Sammlung hübscher Farben. Für ein echtes Projekt brauchen Sie normalerweise:

Ein verbreitetes modernes Muster ist eine 10-stufige Helligkeitsskala (50, 100, 200, ..., 900) für jede Farbe, die genug Nuance für Buttons, Hover-Zustände, Disabled-Zustände und Dark-Mode-Äquivalente bietet, ohne von Hand zu schrauben.

Farbräume und ihr Einfluss auf Paletten

Der Raum, in dem Sie generieren, prägt, wie die Farben sich zueinander verhalten. Moderne Paletten-Tools lassen Sie wechseln.

Für die meiste Webarbeit 2024 in OKLCH generieren und für Kompatibilität nach HEX exportieren. CSS akzeptiert oklch() jetzt nativ in modernen Browsern, sodass Sie die OKLCH-Werte auch direkt in Ihrem Stylesheet behalten können für reichhaltigere Farbmanipulation.

Barrierefreiheit, nicht nur Ästhetik

Eine wunderschöne Palette ist nutzlos, wenn ein Teil Ihres Publikums sie nicht lesen kann. Drei Checks machen aus einer hübschen Palette eine inklusive.

WCAG-Kontrastverhältnisse messen, wie unterscheidbar Text von seinem Hintergrund ist. Die Standardschwellen:

Farbenblindheits-Simulation: 8% der Männer und 0,5% der Frauen haben eine Form von Farbsehschwäche, am häufigsten Rot-Grün. Lassen Sie Ihre Palette durch einen Simulator laufen (Deuteranopie, Protanopie, Tritanopie), um sicherzustellen, dass Information nicht allein durch Farbe vermittelt wird.

APCA (Advanced Perceptual Contrast Algorithm) ist der Kandidaten-Ersatz für WCAG-Kontrast in WCAG 3.0. Er modelliert Perzeption besser als die alte Formel und zählt für Text auf subtil unterschiedlichen Hintergründen; nutzen Sie ihn als Zweitmeinung neben WCAG 2.x.

Tipps für die besten Ergebnisse

• Mit einer Farbe beginnen, wählen Sie eine Primärfarbe, die Ihnen gefällt, und nutzen Sie dann einen Harmoniemodus, um Farben zu finden, die sie ergänzen. Das ist einfacher, als 5 Farben unabhängig zu wählen.
• An echtem Inhalt testen, eine Palette, die als Swatches großartig aussieht, funktioniert vielleicht nicht auf echtem Text, Buttons und Hintergründen. Immer mit echter UI testen.
• Helligkeitsskalen erzeugen, statt nur ein «Blau» zu wählen, erzeugen Sie eine 10-stufige Skala vom sehr Hellen zum sehr Dunklen. Helle Stufen für Hintergründe, dunkle für Text, Mitte für Akzente.
• Weniger ist mehr, ein Design mit 3 gut gewählten Farben wirkt professioneller als eines mit 7. Verwenden Sie Neutrale für den Großteil des Interfaces und sparen Sie kräftige Farben für das Wichtige auf.
• Aus Fotos pipettieren, picken Sie Farben aus einem Referenzfoto, um Paletten zu erhalten, die in der echten Welt verankert sind. Coolors, Color Hunt und spezielle Foto-Extraktoren machen das per Klick.
• Auf den Dark Mode achten, helle und dunkle Varianten zusammen generieren. Eine Primärfarbe, die auf Weiß funktioniert, kann auf Schwarz unangenehm strahlen; OKLCH erlaubt, nur die Helligkeit anzupassen, ohne den Farbton zu verschieben.
• Das Warum festhalten, dokumentieren Sie, warum jede Farbe so ist (Markenkonsistenz, Barrierefreiheitsvorgabe, Stimmung). Ihr zukünftiges Ich wird dem heutigen danken.

Häufige Fallstricke

• In HSL wählen und in HSL rendern, gleiche Helligkeitswerte in HSL sehen ungleich aus, weil der Farbraum nicht der menschlichen Perzeption entspricht. Gelb bei 50% Helligkeit sieht viel heller aus als Blau bei 50%. Wechseln Sie für gleichmäßige Tönungen zu OKLCH.
• Sich nur auf das Farbrad verlassen, das Rad ist ein Ausgangspunkt, keine Garantie. Prüfen Sie vor dem Festlegen immer den Kontrast mit echtem Text.
• Kulturelle Bedeutung ignorieren, Rot bedeutet in China Glück, im Westen Warnung. Weiß steht im Westen für Reinheit, in Teilen Asiens für Trauer. Wenn Sie global ausliefern, lokal recherchieren.
• Zu viele Grautöne, vier oder fünf neutrale Stufen decken meist alles ab, von Text bis zu subtilen Rändern. Zwölf verwirren alle, inklusive Ihres zukünftigen Ichs.
• Reines Schwarz auf reinem Weiß, der extreme Kontrast kann Augen ermüden. Nutzen Sie Fast-Schwarz (#1A1A1A) auf Fast-Weiß (#FAFAFA) für lange Lesetexte.
• Ungeprüfte Kombinationen, eine Farbe, die den Kontrast gegen den Hintergrund besteht, besteht ihn nicht automatisch gegen jede andere Oberfläche. Testen Sie jede Paarung, die Ihr Design tatsächlich erzeugt.
• Ein einziger Akzent pro Seite, ein starker Akzent, der den Fokus zieht, ist gut. Zwei, die um Aufmerksamkeit kämpfen, sind schlecht. Wählen Sie den wichtigsten Call-to-Action.
• Markenfarben, die Barrierefreiheit verfehlen, das Firmenlogo darf aus emotionalen Gründen eine kontrastarme Paarung nutzen; die Website nicht. Erzeugen Sie barrierefreie Varianten für die UI und reservieren Sie die Marken-Paarung fürs Logo-Lockup.
• Links und besuchte Zustände vergessen, beide müssen vom Fließtext und voneinander unterscheidbar sein. Testen Sie alle drei.
• Den Generator semantische Farben wählen lassen, Erfolg/Warnung/Fehler-Farben haben kulturelle und Barrierefreiheits-Erwartungen. Per Konvention wählen (Grün/Bernstein/Rot) und prüfen, dass sie zur Palette passen.

Alternative Werkzeuge und Ansätze

Für polierte Markenarbeit einen Paletten-Generator mit einem Kontrast-Checker und einem Farbenblindheits-Simulator kombinieren. Werkzeuge, die alle drei an einem Ort tun, sparen die meiste Zeit.

Datenschutz und der Paletten-Generator

Der Paletten-Generator läuft vollständig in Ihrem Browser. Jedes Quellbild, das Sie für die Farbextraktion hochladen, wird mit der FileReader-API gelesen, auf einem Offscreen-Canvas abgetastet und verworfen, sobald die Farben extrahiert sind. Nichts wird hochgeladen, nichts protokolliert, und die Palette, die Sie bauen, wird nicht mit Ihnen verknüpft. Für unveröffentlichte Markenarbeit, geleakte Moodboard-Bilder oder Kundenfotos bleibt mit diesem rein lokalen Ablauf alles auf Ihrer Maschine, wo es hingehört. Für eine so routinierte Aufgabe wie Farben aussuchen sollte die Datenschutz-Voreinstellung sein: nichts verlässt die Seite, nichts wird gespeichert, nichts wird geteilt.