Anleitung

1. Klicken Sie irgendwo auf den Farbkreis, um eine Farbe zu wählen, oder verstellen Sie die Schieberegler für Farbton, Sättigung und Helligkeit.
2. Sehen Sie die ausgewählte Farbe in den Formaten HEX, RGB und HSL unter dem Farbkreis.
3. Klicken Sie auf eine Harmonie-Farbprobe, um komplementäre, analoge, triadische und Split-Komplementär-Schemata zu sehen.

Häufig gestellte Fragen

Was ist eine Farbharmonie?

Farbharmonie bezeichnet eine ansprechende Anordnung von Farben basierend auf ihrer Position im Farbkreis. Häufige Harmonien sind komplementär (gegenüberliegend), analog (benachbart) und triadisch (gleichmäßig verteilt).

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX ist ein 6-stelliger Hex-Code (#RRGGBB). RGB verwendet Rot-, Grün- und Blau-Werte (0-255). HSL verwendet Farbton (0-360°), Sättigung (0-100 %) und Helligkeit (0-100 %).

Kann ich diese Farben in meinen Designs verwenden?

Ja! Kopieren Sie jeden Farbwert und fügen Sie ihn direkt in Ihr CSS, Ihre Designsoftware oder Ihre Webanwendung ein. Alle Werte sind standardkonform und weit unterstützt.

Eine kurze Geschichte des Farbkreises

Isaac Newton zeichnete den ersten. In Opticks (1704) berichtete er über die Prismenexperimente, die er der Royal Society erstmals 1672 gezeigt hatte, und wies nach, dass weißes Licht eine Mischung von Spektralfarben ist, und ordnete das Spektrum zu einem geschlossenen Kreis an, sodass das rote Ende auf das violette Ende treffen konnte. Er benannte sieben Farben (Rot, Orange, Gelb, Grün, Blau, Indigo, Violett), in Analogie zu den sieben Tönen der diatonischen Tonleiter ausgewählt, da er glaubte, Farbe und Harmonie teilten dieselbe mathematische Struktur. Indigo als eigenes Band neben Blau ist das berühmteste Opfer dieser ästhetischen Entscheidung.

Goethes Zur Farbenlehre (1810) richtete den Kreis eher an der Wahrnehmung als an der Physik aus. Er ordnete Farben symmetrisch in „plus“-warme und „minus“-kühle Hälften und merkte an, dass gegensätzliche Farben „sich im Auge wechselseitig hervorrufen“, eine frühe Formulierung der Gegenfarbtheorie, die das Gesetz des Simultankontrasts vorwegnahm, das Michel Eugène Chevreul 1839 von der Gobelin-Manufaktur aus veröffentlichen sollte.

Albert Munsells A Color Notation (1905) war der erste Kreis, der auf gemessener menschlicher Wahrnehmung statt auf Konvention beruhte, und trennte Farbton, Helligkeitswert (value) und Buntheit (chroma) in unabhängige Dimensionen, der direkte Vorfahr jedes modernen wahrnehmungsbezogenen Farbraums, einschließlich CIELAB und OKLCH. Der Kreis, den die meisten Designer in der Schule gelehrt bekamen, ist jünger: Johannes Itten kodifizierte am Bauhaus zwischen 1919 und 1922 den 12-Farben-RYB-Kreis und identifizierte drei Primärfarben (Rot, Gelb, Blau), drei Sekundärfarben, sechs Tertiärfarben und sieben Arten von Farbkontrast. Die tatsächlich am Bildschirm verwendeten Kreise sind wiederum andere: HSL und HSV sind zylindrische Umparametrisierungen von RGB, in den 1970er-Jahren bei PARC und anderen Grafiklaboren erfunden, damit ein Designer in drei intuitiven Schiebereglern denken konnte („dieser Farbton, kräftiger, heller“) statt in drei undurchsichtigen RGB-Kanälen. Der jüngste Schritt ist OKLCH (Björn Ottosson, Dezember 2020), jetzt in CSS Color Module Level 4, ein Kreis, bei dem gleiche Winkelschritte wie gleiche wahrnehmungsbezogene Farbtonschritte aussehen.

Drei Familien von Farbkreisen

„Farbkreis“ verbirgt die Tatsache, dass es drei verschiedene Arten gibt, jede korrekt für eine andere physikalische Situation:

• RYB (Rot, Gelb, Blau), der künstlerische Lehrkreis, den Itten populär machte. Es ist eine Konvention, die auf Erfahrung mit Pigmenten beruht, kein physikalisches Modell. Keine Kombination aus roten, gelben und blauen Farben kann jede sichtbare Farbe mischen.
• RGB (Rot, Grün, Blau), additiv. Wird überall dort verwendet, wo Farbe emittiert wird: Monitore, Telefone, Projektoren, Bühnenbeleuchtung. In der Physiologie verankert: Menschliche Netzhäute haben drei Zapfentypen, die für lange, mittlere und kurze Wellenlängen empfindlich sind. Browser und CSS arbeiten in RGB, daher ist der HSL-Kreis dieses Werkzeugs eine polare Umparametrisierung von sRGB.
• CMY / CMYK (Cyan, Magenta, Gelb + Key/Schwarz), subtraktiv. Wird überall dort verwendet, wo Farbe reflektiert wird: Druck, Tinte, Farbstoff. Das Mischen verringert die Helligkeit; kommerzielle Drucker fügen Schwarz für echte Schwarztöne und zum Tintensparen hinzu.

Die praktische Folge: Die von diesem Kreis exportierten HEX-, RGB- und HSL-Werte sind bildschirmgenau. Sie sind nicht farbgenau, und ein CMYK-Druckdurchlauf braucht seine eigene Umwandlung, ein Schritt, den Druckereien meist für Sie übernehmen.

Wie HSL auf einen Kreis abgebildet wird

HSL steht für Farbton, Sättigung, Helligkeit (hue, saturation, lightness). Der Farbton ist ein Winkel um eine zentrale Achse mit Rot bei 0°, Grün bei 120°, Blau bei 240° und Rückkehr zu Rot bei 360°. Die Sättigung reicht von 0 % (grau) bis 100 % (voll kräftig). Die Helligkeit reicht von 0 % (schwarz) über den natürlichen Farbton bei 50 % bis Weiß bei 100 %. Geometrisch ist das Modell ein Doppelkegel (zwei Kegel Spitze an Spitze) mit den gesättigtsten Farben am Äquator. HSV ist ähnlich, verwendet aber Value (Hellwert) statt Lightness, mit voll gesättigten Farben bei V=100 und dem gesamten Modell in Form eines einzelnen Kegels.

Die hsl()-Funktion von CSS nimmt dieselben drei Zahlen. Die moderne Syntax ist durch Leerzeichen getrennt, mit einem optionalen Alpha nach einem Schrägstrich:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

Die alte, durch Kommas getrennte hsl(210, 80%, 50%) und der hsla()-Alias werden aus Gründen der Abwärtskompatibilität weiterhin unterstützt. CSS Color Module Level 4 ist für einfaches HSL seit etwa 2015 browserübergreifend breit verfügbar, wobei die moderne Syntax später kam.

Ehrlicher Vorbehalt: HSL ist nicht wahrnehmungsgleichmäßig. Ein Gelb bei L=50 % sieht viel heller aus als ein Blau bei L=50 %, obwohl beide dieselbe Helligkeitszahl haben, und ein nach Farbton bei konstantem S und L geschnittener Kreis hat visuell schwere Gelbtöne und schwache Blautöne. Für Datenvisualisierung und sorgfältig kalibrierte Markenpaletten ist der neue Farbraum oklch() die bessere Wahl, gleiche Winkelschritte sehen wie gleiche wahrnehmungsbezogene Farbtonschritte aus. Um eine Farbe auszuwählen und ein HEX abzugreifen, ist HSL in Ordnung.

Die klassischen Harmonien, mit der Mathematik

Jedes Harmonieschema wird durch eine Reihe von Winkelversätzen von einem Grundfarbton definiert. Sei B der von Ihnen gewählte Farbton:

Schema	Farbtöne	Stimmung
Monochromatisch	B (nur S und L variieren)	Dezent, kontrastarm, friedlich
Analog	B − 30°, B, B + 30°	Satt, harmonisch, Sonnenuntergänge, Laub
Komplementär	B, B + 180°	Dynamisch, aufmerksamkeitsstark
Geteilt-komplementär	B, B + 150°, B + 210°	Starker Kontrast, aber weicher als reines Komplementär
Triadisch	B, B + 120°, B + 240°	Scharfer Kontrast mit Ausgewogenheit und Sattheit
Tetradisch (rechteckig)	B, B + 60°, B + 180°, B + 240°	Zwei Komplementärpaare, lassen Sie eines dominieren
Quadratisch	B, B + 90°, B + 180°, B + 270°	Gleichmäßige Vierteilung, Ausgewogenheit ist schwieriger

Diese Winkel sind Lehrkonventionen, die von Goethe und Itten übernommen wurden, keine psychophysischen Gesetze. Sie erzeugen zuverlässig Kontrast und Ausgewogenheit, weshalb Designer zu ihnen greifen, aber sie sind eher Heuristiken als Regeln. Behandeln Sie die Harmonie-Farbfelder oben als Ausgangspunkte zum Iterieren.

Wann Sie zu einem Farbkreis greifen würden

• Web- und UI-Design. Wählen Sie eine primäre Markenfarbe, leiten Sie ein Komplement für den Gefahr-/Call-to-Action-Akzent ab, leiten Sie eine triadische dritte Farbe für Diagramme ab. Prüfen Sie dann den Kontrast gegenüber Ihrem Hintergrund und Text.
• Markenidentität. Eine Logofarbe plus eine dokumentierte Palette von Harmonien für Marketingmaterialien.
• Datenvisualisierung. Kategoriale Paletten (10+ verschiedene Farbtöne im gleichen wahrnehmungsbezogenen Abstand) und sequenzielle oder divergierende Skalen, besser in OKLCH als in HSL umzusetzen, sobald Sie über drei oder vier Reihen hinausgehen.
• Innenarchitektur. Eine Basis-Wandfarbe, eine analoge Zierleiste, ein komplementärer Akzent in Kissen oder Kunst.
• Farbabstimmung in der Fotografie. Türkis-und-Orange (ein Komplementärpaar) ist das moderne Kino-Klischee, weil warme Hauttöne vor kühlen Schatten als filmisch wahrgenommen werden.
• Game-Art und Illustration. Figuren über den Farbton von ihren Umgebungen abheben, mit komplementären Akzenten für Blickpunkte.

Farbenblindheit und der Farbkreis

Etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Abstammung haben eine Form von Farbfehlsichtigkeit (die Rate variiert je nach Bevölkerung). Die Gene für die L- und M-Zapfen sitzen auf dem X-Chromosom, weshalb die Erscheinung bei Männern weitaus häufiger ist. Mehrere Harmonien (besonders rot/grüne Komplementärpaare) fallen bei den häufigsten Formen auf nahezu monochrom zusammen:

• Deuteranopie / Deuteranomalie: nicht funktionsfähige oder schwache Zapfen für mittlere Wellenlängen. Die häufigste Form (etwa 6 % der Männer). Rot und Grün werden verwechselt.
• Protanopie / Protanomalie: nicht funktionsfähige oder schwache Zapfen für lange Wellenlängen (etwa 2 % der Männer). Rottöne erscheinen gedämpft, manchmal mit Schwarz verwechselt.
• Tritanopie / Tritanomalie: nicht funktionsfähige oder schwache Zapfen für kurze Wellenlängen. Sehr selten. Blau- und Gelbtöne werden verwechselt.

Das Prinzip „verlassen Sie sich nicht allein auf die Farbe“ aus WCAG 2.1 ist direkt relevant: Verwenden Sie Farbe nie als einzigen Informationsträger. Fügen Sie Helligkeitskontrast zusätzlich zum Farbtonkontrast hinzu, verwenden Sie in Diagrammen Muster oder Formen neben der Farbe, und lassen Sie jede von Ihnen erzeugte Harmonie durch einen Farbenblindheits-Simulator laufen, bevor Sie sich festlegen. Prüfen Sie außerdem den WCAG-Kontrast, mindestens 4,5:1 für normalen Text bei AA, 7:1 bei AAA.

Weitere Fragen

Warum werden Rot, Gelb und Blau „Primärfarben“ genannt?

In der künstlerischen / RYB-Tradition (der Kreis, den Itten am Bauhaus lehrte) sind sie die drei Pigmente, aus denen sich alle anderen vermeintlich mischen lassen. Diese Annahme ist eher Konvention als Physik: Keine Kombination aus echten roten, gelben und blauen Pigmenten kann jede sichtbare Farbe mischen. Im additiven Licht sind die echten Primärfarben Rot, Grün und Blau (RGB); im subtraktiven Druck sind es Cyan, Magenta und Gelb (CMY). RYB hält sich in der Kunsterziehung, weil es pädagogisch einfach ist und beim Mischen realer Farben vernünftige Ergebnisse liefert.

Ist 16:9 dasselbe wie der Goldene Schnitt für Farbe?

Nein, das sind zwei nicht verwandte Konzepte. Der „Goldene Schnitt“ kommt bei Proportionen vor (Rechtecke, Layout) und beträgt etwa 1,618. Die Harmonien der Farblehre stammen aus der Winkelgeometrie auf dem Farbtonkreis: 180° für komplementär, 120° für triadisch, 90° für quadratisch. In die Standardlehre des Farbkreises ist keine Goldener-Schnitt-Harmonie eingebaut.

Stimmen die Farben, die ich hier sehe, mit dem überein, was gedruckt wird?

Mit ziemlicher Sicherheit nicht exakt. Dieser Kreis ist HSL auf Basis von sRGB, additive Farbe, für Bildschirme entworfen. Druck ist subtraktives CMYK. Kräftige Blautöne und helle Grüntöne, die auf einem Monitor in Ordnung aussehen, entsättigen auf Papier oft drastisch, und Umwandlungen außerhalb des Farbumfangs können Farbtöne verschieben. Printdesigner haben meist einen kalibrierten Proof vor sich oder arbeiten im Design-Tool direkt in CMYK. Verwenden Sie diesen Kreis für das Bildschirm-Mock-up und wandeln Sie dann um.

Beruht die „Farbpsychologie“ (Rot = Leidenschaft, Blau = Ruhe) auf echten Belegen?

Sie hat volkstümliche Stärke, aber schwache und kulturell unterschiedliche empirische Grundlage. Verschiedene Kulturen verbinden dieselben Farben mit sehr unterschiedlichen Vorstellungen (Weiß ist in Westeuropa eine Hochzeitsfarbe und in Teilen Ostasiens eine Trauerfarbe). Verwenden Sie die Farbpsychologie als gestalterischen Ausgangspunkt und als Vokabular für Gespräche mit Kunden, nicht als Gesetz.

Werden Daten an einen Server gesendet?

Nein. Der Kreis wird in einem HTML5-Canvas gerendert; Harmonie-Winkel werden lokal in JavaScript berechnet; HEX-, RGB- und HSL-Zeichenketten werden über die Browser-API in Ihre Zwischenablage geschrieben. Die Seite funktioniert offline, sobald sie geladen ist.

Verwandte Tools