Farbkreis
Der Farbkreis zeigt einen Schnitt durch den OKLCh-Farbraum bei einer festen Helligkeit: Der Farbton läuft am Rand herum, der Chroma-Wert von der Mitte nach außen, und die ausgefranste Außenkante ist die tatsächliche Grenze dessen, was ein sRGB-Bildschirm zeigen kann. Wählen Sie einen Punkt aus, und Sie bekommen die komplementären, analogen, triadischen, tetradischen und gespalten komplementären Schemata, jedes in OKLCh gedreht, sodass jede Farbe eines Schemas die Helligkeit behält, mit der sie startete.
Dieses Chroma liegt bei diesem Farbton und dieser Helligkeit außerhalb von sRGB. Die Farbfelder zeigen die nächstliegende darstellbare Farbe: #0098a1.
Farbschema
Die Gegenfarbe, um je 30° versetzt. Viel Kontrast mit weniger optischer Unruhe.
3 Farben
3.5 / 6.0
3.8 / 5.5
3.8 / 5.6
Kontrastverhältnisse zu Weiß und Schwarz. Für Fließtext sind 4,5:1 nötig.
Die gewählte Farbe
- HEX
- #0098a1
- RGB
- rgb(0 152 161)
- HSL
- hsl(183 100% 31.6%)
- Name
- —
Vorschau des Farbschemas
Ein Absatz auf der letzten Farbe des Schemas, damit Sie vor der Übernahme sehen, ob darauf Text lesbar ist.
Wie funktioniert Farbkreis?
Jeder Farbkreis, den Sie je benutzt haben, ist ein Schnitt durch einen Farbraum, und welcher Farbraum es ist, entscheidet darüber, ob der Kreis Ihnen etwas sagt. Der vertraute ist ein Schnitt durch HSL bei 50% Helligkeit. Sehen Sie ihn sich an: Das Gelb oben ist gleißend, das Blau unten fast schwarz, und HSL nennt beide 50% Helligkeit. Ein Schema, das Sie von diesem Kreis ablesen, ist eine Menge von Farben, die nichts gemeinsam haben außer einem Winkel.
Dieser Kreis ist ein Schnitt durch OKLCh, dessen Helligkeitsachse das nachzeichnet, was das Auge wirklich meldet. Bei fester Reglerstellung hat jedes gemalte Pixel dieselbe empfundene Helligkeit – eine Bewegung am Rand ändert also den Farbton und nur den Farbton, und zwei Farben einander gegenüber bilden wirklich ein passendes Paar, statt dass eine die andere erschlägt.
Was die ausgefranste Kante ist
Die gemalte Fläche ist keine Scheibe, und das ist die aufschlussreichste Sache auf der Seite. Der Chroma-Wert läuft von dem Grau in der Mitte nach außen, und ein Pixel wird nur gemalt, wenn die Farbe, die er beschreibt, in sRGB existiert. Das Ergebnis ist die wahre Gestalt des Gamut bei dieser Helligkeit: Gelb und Grün reichen weit nach außen, Blau und Violett brechen früh ab, und die ganze Figur schrumpft gegen einen Punkt, wenn Sie den Helligkeitsregler an eines der beiden Enden ziehen – denn eine sehr dunkle oder sehr helle Farbe kann nicht sehr farbig sein.
Ein Kreis, der die Scheibe füllte, würde darüber lügen. Er würde dieselbe beschnittene Farbe über die ganze außerhalb des Gamut liegende Region malen, und Sie wählten einen Wert, den Ihr Bildschirm nicht anzeigen kann, und würden es nie erfahren.
Wie die Schemata berechnet werden
Jedes Schema ist eine Menge von Farbtondrehungen – 180° für komplementär, ±30° für analog, 120°-Schritte für triadisch, 150° und 210° für gespalten komplementär –, angewendet in OKLCh mit fester Helligkeit und festem Chroma. Landet ein gedrehter Farbton außerhalb des Gamut, wird sein Chroma per binärer Suche zurückgenommen, bis er passt; Farbton und Helligkeit bleiben exakt, und aufgegeben wird nur die Sättigung, die ohnehin nicht verfügbar war.
Ehrlich, was ein Schema wert ist
Eine Harmonie ist eine arithmetische Beziehung, kein Design. Triadisch liefert drei Farbtöne im Abstand von 120°; es sagt Ihnen nicht, dass zwei davon auf ein Zehntel ihres Chroma gedämpft werden müssen, bevor der dritte ein Akzent sein kann. Interfaces baut man meistens aus einem Farbton und einer neutralen Rampe, dazu einen zweiten Farbton für die destruktive Aktion – die monochrome Option kommt dem, was echte Designsysteme ausliefern, näher als alles andere auf dieser Liste. Nutzen Sie den Kreis, um die Beziehungen zu finden, und werfen Sie danach den größten Teil der Sättigung weg.
Ein Punkt auf dem Kreis
hue 202° chroma 0.150 lightness 0.62
Ein Schema zum Einfügen
split complementary #00a2b4 base #c48a2a +150° #d4739a +210°
Welche Optionen und Sonderfälle unterstützt Farbkreis?
| Parameter | Typ | Standard | Verhalten & Sonderfälle |
|---|---|---|---|
| Farbton | 0–360° | 202 | Der Winkel am Rand. In OKLCh ändert sich dabei die wahrgenommene Helligkeit – was der ganze Grund ist, diesen Farbraum zu verwenden. |
| Chroma | 0–0.37 | 0.15 | Abstand vom grauen Zentrum. Kein Prozentsatz: es ist eine absolute Maßeinheit, und das maximal verfügbare hängt sowohl von der Farbart als auch von der Helligkeit ab. |
| Helligkeit | 0–1 | 0.62 | Welcher Teil des Raums gezeichnet wird. Die bemalte Fläche zieht sich an beiden Extremen zu einem Punkt zusammen, weil dunkle und helle Farben nicht viel Chroma aufnehmen können. |
| Komplementär | +180° | 2 Farben | Maximale Farbart-Trennung. Stark genug, dass es meist als ein Akzent gegen eine dominante Farbe funktioniert, nicht als ein Paar von Gleichen. |
| Analog | ±30° | 3 Farben | Nachbarn. Das leiseste Schema und das sicherste für eine ganze Benutzeroberfläche, weil nichts konkurriert. |
| Triadisch | 120°-Schritte | 3 Farben | Gleichmäßiger Abstand. Theoretisch ausgewogen; in der Praxis wollen zwei der drei Farben ihre Chroma stark reduzieren. |
| Gespalten komplementär | +150°, +210° | 3 Farben | Die entgegengesetzte Farbe, gespalten auf beiden Seiten davon. Behält den größten Kontrast und verliert das Vibrieren, das man von einem exakten Komplementärton bekommt. |
| Monochrom | nur Helligkeit | 5 Farben | Eine Farbart in fünf Helligkeitsstufen. Unglamourös, und worauf praktisch jedes ausgelieferte Design-System tatsächlich aufbaut. |
Häufig gestellte Fragen
Wofür benutzt man einen Farbkreis?
Um Farben zu finden, die zu einer vorhandenen eine definierte Beziehung haben. Drehen Sie den Farbton um 180°, haben Sie den maximal verfügbaren Abstand; drehen Sie um je 30° zur Seite, haben Sie Nachbarn, die sich nicht in die Quere kommen. Es ist ein Weg, schnell Kandidaten zu erzeugen, keiner, um zwischen ihnen zu wählen – dafür braucht es weiterhin ein Urteil darüber, welche Farbe das meiste Gewicht trägt und wie viel Sättigung die übrigen abgeben sollen.
Was sind Komplementärfarben?
Zwei Farbtöne, die auf dem Kreis einander direkt gegenüberliegen – 180° auseinander. Sie liefern den stärkstmöglichen Farbtonkontrast, weshalb das Paar für einen Akzent gegen eine dominante Farbe funktioniert und selten für zwei Farben gleicher Fläche. Bei voller Sättigung kann ein exaktes Komplementärpaar außerdem an der Kante, an der sie aufeinandertreffen, zu schimmern scheinen; das gespaltene Komplementär um je 30° zur Seite erhält den größten Teil des Kontrasts und beseitigt diesen Effekt.
Warum sieht dieser Farbkreis anders aus als der, den ich gewohnt bin?
Aus zwei Gründen. Er ist in OKLCh gezeichnet statt in HSL, sodass jede Farbe im Schnitt dieselbe empfundene Helligkeit hat statt bloß dieselbe Zahl – die Gelbtöne sind hier nicht heller als die Blautöne. Und er ist keine volle Scheibe: Ein Pixel wird nur dort gemalt, wo die Farbe in sRGB existiert, also ist die Außenkante die tatsächliche Gamut-Grenze. Die Scheibe zu füllen hieße, beschnittene Farben zu malen, die Ihr Bildschirm nicht anzeigen kann.
Warum schrumpft der Kreis, wenn ich den Helligkeitsregler bewege?
Weil der Chroma-Bereich, den ein Bildschirm zeigen kann, von der Helligkeit abhängt. Bei 50% ist viel Spielraum; bei 95% ist fast alles eine blasse Tönung, und das Farbigeste, das es gibt, ist kaum gesättigt; bei 5% gilt dasselbe für das dunkle Ende. Die schrumpfende Figur bildet das präzise ab, und deshalb erzeugt eine Aufhellungsrampe, die den Chroma-Wert über alle elf Stufen konstant hält, fluoreszierende Helle und glühende Dunkle.
Welches Schema sollte ich für eine Website wählen?
Wahrscheinlich monochrom, dazu eine neutrale Graurampe und ein weiterer Farbton für destruktive Aktionen. Interfaces tragen weit weniger Farbe, als ein Schema-Generator vermuten lässt: Die dominante Farbe ist meist ein Hintergrund, den man kaum bemerkt, und der Akzent sind ein paar hundert Pixel Button. Analog ist die nächstsicherste Wahl. Triadisch und tetradisch liefern gute Screenshots und verlangen viel Zurückhaltung, bis sie ausgeliefert werden können.
Sendet der Kreis meine Farben irgendwohin?
Nein. Der Kreis wird Pixel für Pixel in diesem Browser-Tab mit einer Canvas gemalt, und jede Drehung ist Rechenarbeit hier.
Welche verwandten Tools sollten Sie als Nächstes nutzen?
- Farbe auswählenEine Farbe wählen und als HEX, RGB, HSL, OKLCH oder CMYK ablesen
- Kontrast prüfenKontrastwerte gegen WCAG 2.2 AA und AAA, plus nächstliegende Farbe
- FarbcodesAlle CSS-Farbnamen mit HEX, RGB und HSL, suchbar und sortierbar
- FarbsehtestTafeltest für Rot-Grün und Blau-Gelb, Bilder so sehen wie Betroffene