Farbkreis

Wie Farbkreis Farbbeziehungen sichtbar macht

Farbkreis ordnet Farbtöne rund um eine gewählte Grundfarbe und macht dadurch sichtbar, welche Farben nah beieinanderliegen, welche sich gegenüberstehen und welche Kombinationen als Palette funktionieren können. Statt einzelne Farbcodes isoliert zu betrachten, entsteht eine Beziehung zwischen Farbton, Sättigung, Helligkeit und Harmonieregel.

Besonders nützlich ist Farbkreis, wenn eine Startfarbe bereits feststeht und daraus eine verlässliche Kombination entstehen soll. Eine Markenfarbe, ein Akzent für eine Benutzeroberfläche oder ein Ton aus einer Illustration kann als Ausgangspunkt dienen. Danach zeigen Varianten, Harmonien, Umrechnungen und Kontrastbereiche, wie belastbar die Auswahl für Gestaltung und Weboberflächen ist.

Die Auswahl bleibt praktisch: Der aktive Farbwert kann in HEX, RGB, HSL, HSV, OKLCH oder CMYK angezeigt werden. Dadurch passt Farbkreis sowohl zu CSS-Arbeit im Browser als auch zu Designentscheidungen, bei denen Farbton und Wahrnehmung genauer verglichen werden müssen.

So verwendest du Farbkreis

Wähle im runden Farbfeld die gewünschte Grundfarbe. Die aktive Farbe wird sofort als Vorschau und als Farbcodesatz angezeigt.
Nutze das Formatmenü, um den Farbwert als HEX, RGB, HSL, HSV, OKLCH oder CMYK zu lesen. Kopiere den aktuellen Wert über die sichtbare Kopieraktion.
Wähle eine Harmonieregel wie Analog, Komplementär, Triadisch, Rechteck, Doppelt geteilt, Tetradisch oder Geteilt komplementär.
Öffne die Bereiche für Farbvarianten, Farbharmonien, Farbblindheit, Farbkonvertierung und Kontrastprüfung, um die Auswahl aus verschiedenen Blickwinkeln zu prüfen.
Nutze „Farben exportieren“, wenn die erzeugten Farbcodes gesammelt übernommen werden sollen. Im Exportdialog kannst du zwischen Formaten wie HEX, RGB, HSL und OKLCH wechseln.
Wenn aus der Auswahl eine größere Palette entstehen soll, öffne Farbpalette. Für Lesbarkeit und Textfarben ist Kontrast Checker der nächste sinnvolle Schritt.

Welche Harmonieregel passt zu welchem Zweck

Die sichtbaren Harmonieregeln unterscheiden sich nicht nur in der Anzahl der Farben, sondern auch in der Spannung der Farbbeziehung. Analoge Farben wirken ruhiger, während komplementäre oder triadische Kombinationen stärkere Kontraste erzeugen. Die beste Wahl hängt davon ab, ob eine Oberfläche leise, klar getrennt oder visuell auffällig wirken soll.

Regel	Typischer Einsatz	Worauf du achten solltest
Analog	Sanfte Oberflächen, Hintergründe und abgestufte Akzente	Zu ähnliche Werte können wichtige Elemente schwach trennen
Komplementär	Starke Akzente, Call to Action, Gegenfarbe zur Basis	Hohe Sättigung auf beiden Seiten kann schnell laut wirken
Triadisch	Illustrationen, Dashboards und lebendige UI Systeme	Eine Farbe sollte dominieren, die anderen eher unterstützen
Tetradisch	Mehrteilige Paletten mit klaren Rollen	Ohne Priorität entsteht leicht ein unruhiges Farbsystem
Geteilt komplementär	Kontrast mit weniger Härte als bei direkter Komplementärfarbe	Prüfe Textkontrast und Sättigung getrennt

Farbcodes sinnvoll auswerten

HEX ist meist die schnellste Schreibweise für CSS und Designübergaben. RGB ist hilfreich, wenn Transparenz oder kanalbasierte Anpassungen wichtig werden. HSL macht es leichter, Farbton, Sättigung und Helligkeit gedanklich zu trennen. HSV ist für Picker Logik und Farbauswahl nützlich, während OKLCH eine wahrnehmungsnähere Sicht auf Helligkeit und Chroma bietet. CMYK dient als Orientierung, wenn eine digitale Farbe in Richtung Druck bewertet werden soll.

Ein guter Farbentscheid entsteht selten durch einen einzelnen Code. Vergleiche die aktive Farbe mit Varianten und Harmonien, prüfe helle und dunkle Hintergründe und kopiere erst danach den Wert, der wirklich zur Aufgabe passt. Besonders bei Buttons, Labels und Diagrammen sollte der optische Abstand zwischen den Farben größer sein als der Abstand auf dem Kreis vermuten lässt.

Praktische Situationen für Farbkreis

Eine vorhandene Markenfarbe soll durch Sekundärfarben ergänzt werden, ohne das visuelle System zu verwässern.
Ein Interface braucht eine Akzentfarbe, die sich vom Hintergrund klar abhebt.
Eine Illustration oder Infografik benötigt mehrere Farbtöne, die zusammengehörig wirken.
Ein CSS Prototyp soll schnell Werte in HEX, RGB oder HSL erhalten.
Eine Palette soll vor dem Export auf Kontrast und mögliche Wahrnehmungsprobleme geprüft werden.

Häufige Fehler bei Farbrad Entscheidungen

Ein Farbrad zeigt Beziehungen, aber es ersetzt keine Lesbarkeitsprüfung. Zwei Farben können harmonisch wirken und trotzdem für Text oder kleine UI Elemente ungeeignet sein. Helligkeit, Sättigung, Fläche und Umgebung beeinflussen den tatsächlichen Eindruck stärker als der reine Winkel auf dem Kreis.

Verlasse dich nicht nur auf die schönste Kombination. Prüfe auch neutrale Hintergründe, aktive Zustände und kleine Schriftgrößen.
Nutze nicht alle generierten Farben gleich stark. Eine Hauptfarbe, ein Akzent und mehrere unterstützende Töne wirken meist kontrollierter.
Kopiere nicht blind CMYK Werte für Druckfreigaben. Digitale Umrechnungen sind nur eine technische Annäherung.
Prüfe Farben mit sehr ähnlicher Helligkeit besonders sorgfältig, auch wenn sie auf dem Kreis weit auseinanderliegen.

Vom Farbkreis zur belastbaren Palette

Farbkreis eignet sich für die Entscheidung am Anfang: Welche Richtung passt, welche Gegenfarbe trägt den Akzent, welche Variante bleibt ruhig genug? Für die Weiterarbeit sollte jede Farbe eine klare Rolle bekommen. Definiere Hintergrund, Text, Akzent, Hover Zustand und neutrale Ergänzungen getrennt. Danach lassen sich die Werte sauber in CSS Variablen, Design Tokens oder Dokumentationen übertragen.

Wenn eine Palette im Team genutzt werden soll, exportiere nicht nur die schönste Ansicht. Dokumentiere auch, welche Farbe für welchen Zweck gedacht ist. So verhindert eine harmonische Auswahl später widersprüchliche Einsätze in Buttons, Karten, Formularen und Diagrammen.

Basisfarbe und Varianten gemeinsam prüfen

Eine Grundfarbe wirkt selten allein. Auf einer großen Fläche erscheint sie anders als in einem kleinen Icon, und neben hellen Neutralfarben wirkt sie anders als neben dunklen Tönen. Deshalb sollte die aktive Farbe nicht nur als einzelner HEX Wert bewertet werden. Varianten zeigen, ob eine Farbe heller, dunkler, ruhiger oder kräftiger eingesetzt werden kann, ohne die ursprüngliche Richtung zu verlieren.

Für Weboberflächen ist diese Prüfung besonders wichtig. Ein Primärton kann für eine Schaltfläche gut funktionieren, aber für Hover, Fokus, Rand oder Hintergrund zu dominant sein. Farbkreis hilft dabei, aus derselben Farbfamilie mehrere Rollen abzuleiten. So entsteht kein zufälliger Satz aus ähnlichen Farben, sondern eine nachvollziehbare Abstufung.

Farbblindheit und Kontrast früh berücksichtigen

Der Bereich Farbblindheit ist hilfreich, um nicht nur den idealen Farbeindruck zu betrachten. Farben, die im normalen Blick deutlich getrennt wirken, können bei veränderter Wahrnehmung näher zusammenrücken. Das ist besonders relevant, wenn Farben Status, Kategorie oder Priorität ausdrücken sollen.

Kontrast ist der zweite kritische Punkt. Eine harmonische Kombination kann für dekorative Flächen geeignet sein und für Text trotzdem scheitern. Prüfe deshalb nicht nur die Beziehung auf dem Kreis, sondern auch Vordergrund und Hintergrund. Wenn eine Farbe für Schrift, Icon oder wichtige Bedienfläche gedacht ist, sollte die Kontrastprüfung vor dem Export erfolgen.

Farben für Rollen statt für Geschmack auswählen

Eine belastbare Palette entsteht, wenn jede Farbe eine Aufgabe bekommt. Die Basisfarbe kann eine Marke tragen, eine zweite Farbe kann Aktionen hervorheben, eine dritte kann Hinweise oder Illustrationen unterstützen. Neutrale Farben bleiben für Flächen, Linien und Text zuständig. Ohne solche Rollen wird eine harmonische Auswahl später schnell uneinheitlich.

Lege deshalb schon beim Arbeiten mit Farbkreis fest, welche Farbe dominant sein darf und welche nur ergänzend genutzt wird. Eine starke Komplementärfarbe wirkt als kleiner Akzent oft professionell, kann aber als großflächiger Hintergrund zu hart sein. Analoge Farben dagegen eignen sich gut für Abstufungen, brauchen aber häufig einen stärkeren Akzent für klare Interaktion.

Exportierte Farbcodes sauber dokumentieren

Beim Export zählt nicht nur das Format. Wichtig ist auch, dass die übernommenen Werte später wiedererkennbar bleiben. Ein Code wie #7B61FF ist technisch eindeutig, sagt aber nichts über seine Rolle. In einer Dokumentation sollte daneben stehen, ob der Wert für Primäraktionen, Akzentflächen, Diagramme oder Dekoration gedacht ist.

Wenn mehrere Formate exportiert werden, sollte ein Format als Quelle gelten. Für Webprojekte ist das häufig HEX oder eine CSS Variable. RGB, HSL, OKLCH und CMYK können zusätzliche Perspektiven liefern, sollten aber nicht unkontrolliert nebeneinander gepflegt werden. Sonst entstehen kleine Abweichungen, die später schwer zu finden sind.

Entscheidungen mit mehreren Formaten absichern

Mehrere Farbräume sind hilfreich, weil sie unterschiedliche Fragen beantworten. HEX ist schnell kopierbar, HSL erklärt die Veränderung von Farbton und Helligkeit, OKLCH kann bei feineren Wahrnehmungsunterschieden helfen und CMYK erinnert daran, dass digitale und drucknahe Bewertungen nicht identisch sind. Wenn ein Wert in verschiedenen Formaten auffällig schwer zu erklären ist, sollte die Farbe noch einmal geprüft werden.

Für die Praxis genügt meistens ein Hauptformat für die Umsetzung und ein zweites Format für die Analyse. So bleibt die Übergabe klar, ohne wertvolle Informationen zu verlieren.

Wenn diese Punkte vor dem Kopieren geklärt sind, wird aus der Farbauswahl ein nutzbares Farbsystem.