Farbe auswählen
Der Farbwähler nimmt eine Farbe auf – eingetippt, eingefügt oder mit der Pipette Ihres Systems aufgenommen – und liest sie auf einmal als HEX, RGB, HSL, HSV, OKLCH und CMYK zurück. Außerdem baut er in OKLCh eine elfstufige Aufhellungs- und Abdunkelungsrampe, bei der jede Stufe den Farbton behält, mit dem sie startete, und nennt den Kontrast jeder Stufe gegen Weiß und Schwarz, sodass Sie sofort sehen, welche Text tragen können.
#00696frgb(0 105 111)hsl(183 100% 21.8%)hsv(183 100.0% 43.5%)oklch(0.474 0.0806 201.7)cmyk(100% 5% 0% 56%)- Farbton
- 183°
- Helligkeit
- 47%
- Chroma
- 0.081
Aufhellungen und Abdunklungen
Elf Stufen auf einer OKLCh-Helligkeitskurve. Die Kontrastwerte gelten für Weiß und Schwarz; für Fließtext sind 4,5:1 nötig.
1.1 / 19.5
1.2 / 17.9
1.4 / 14.9
1.8 / 11.5
2.5 / 8.4
3.5 / 5.9
5.1 / 4.1
7.5 / 2.8
10.6 / 2.0
14.3 / 1.5
18.0 / 1.2
Farbharmonien
Der Farbton wird in OKLCh gedreht; so behält jede Farbe ihre ursprüngliche Helligkeit. In HSL würde Gelb zu grell und Blau zu dunkel.
Komplementär
Der gegenüberliegende Farbton. Maximaler Abstand, daher meist nur als Akzent geeignet.
Analog
Nachbarfarben in 30° Abstand. Ruhig und gut für eine ganze Oberfläche geeignet.
Triadisch
Drei Farbtöne im Abstand von 120°. Ausgewogen, aber zwei sollten meist abgeschwächt werden.
Tetradisch
Zwei Komplementärpaare. Vier kräftige Farbtöne sind für die meisten Layouts zu viel.
Geteilt komplementär
Die Gegenfarbe, um je 30° versetzt. Viel Kontrast mit weniger optischer Unruhe.
Monochromatisch
Ein Farbton mit variierender Helligkeit und Chroma. So arbeiten viele Designsysteme.
Auf Weiß und Schwarz
Wie funktioniert Farbe auswählen?
Eine Farbe auf einem Bildschirm sind drei Zahlen, und jedes Format hier ist derselbe Zahlendreiklang in anderer Kleidung. Hex und rgb() sind derselbe Wert zur Basis 16 und zur Basis 10. hsl() und hsv() sind derselbe Wert in Polarkoordinaten, weshalb es den Farbtonregler überhaupt gibt. Diese vier lassen sich verlustfrei ineinander überführen, und dieses Tool rechnet zwischen ihnen exakt um.
Warum die Rampe in OKLCh gebaut wird
HSL hat eine nützliche Eigenschaft und eine verhängnisvolle. Die nützliche: Ein Farbtonregler macht Sinn. Die verhängnisvolle: Seine Helligkeit ist keine Helligkeit. hsl(60 100% 50%) ist ein gleißendes Gelb und hsl(240 100% 50%) ein fast schwarzes Blau, und HSL nennt beide 50%. Bauen Sie eine Aufhellungsrampe entlang der HSL-Helligkeit, erhalten Sie eine Skala, bei der die mittleren Stufen in der empfundenen Helligkeit springen, während die Zahlen gleichmäßig voranschreiten.
OKLCh hat dieses Problem nicht. Seine Helligkeitsachse folgt dem, was das Auge meldet, also entsteht beim Absteigen eine Rampe, die gleichmäßig wirkt. Jede Stufe hier wird außerdem gegen den sRGB-Gamut geprüft und zurückgeholt, falls sie hinausfällt – ohne das beschnitten die gesättigtesten Stufen auf dieselbe Farbe, und die Skala verflacht stillschweigend genau an dem Ende, auf das ein Designer schaut.
Die Pipette
Das Farbfeld neben dem Textfeld öffnet den eigenen Picker Ihres Betriebssystems, der unter macOS, Windows und den meisten Linux-Desktops eine Pipette mitbringt, mit der sich jeder Pixel auf dem Bildschirm aufnehmen lässt – auch Pixel in anderen Anwendungen. Das kann keine Seite aus eigener Kraft, deshalb kommt hier das native Steuerelement zum Einsatz und keine Canvas-Nachbildung davon. Transparenz kann es nicht ausdrücken, deshalb trägt das Textfeld das Alpha: Tippen Sie #00696f80, zeigt das Farbfeld das deckende Petrol, während das Feld die 50% behält.
CMYK und was es wert ist
Die CMYK-Werte sind die geräteunabhängige Näherung, dieselbe, die jeder Online-Konverter verwendet. Eine echte Umwandlung braucht ein ICC-Profil für Druckmaschine, Papier und Tintenset, und derselbe sRGB-Wert ergibt auf gestrichenem Papier andere Zahlen als auf Zeitungspapier. Betrachten Sie sie als Ausgangspunkt für ein Gespräch mit der Druckerei, nicht als Spezifikation, die Sie ihr schicken.
Eine Farbe
#00696f
Jede Darstellung davon
hex #00696f rgb rgb(0 105 111) hsl hsl(183 100% 21.8%) oklch oklch(0.474 0.0806 201.7) cmyk cmyk(100% 5% 0% 56%)
Welche Optionen und Sonderfälle unterstützt Farbe auswählen?
| Parameter | Typ | Standard | Verhalten & Sonderfälle |
|---|---|---|---|
| HEX | #rrggbb | 6 Stellen | Die kürzeste Form, die auch in jede andere Anwendung kopiert werden kann. 4 und 8 Stellen fügen Alpha hinzu; 3 Stellen sind eine Kurzschreibweise für verdoppelte Paare. |
| RGB | 0–255 | rgb() | Die gleichen drei Zahlen, aber im Dezimalsystem. Moderne Syntax trennt sie mit Leerzeichen und Alpha mit einem Schrägstrich; die Komma-Form funktioniert überall weiterhin. |
| HSL | deg %, % | hsl() | Farbton, Sättigung, Helligkeit. Gut für einen Farbton-Schieberegler, aber irreführend für alles, was von der Helligkeit abhängt – seine Helligkeit ist nicht die wahrgenommene Helligkeit. |
| HSV | deg %, % | hsb() | Farbton, Sättigung, Wert. Auf dem die meisten Farbauswähle aufbauen, einschließlich von Photoshop. Kein gültiges CSS. |
| OKLCH | 0–1, 0–0.4, deg | oklch() | Wahrnehmungsgleichmäßig. Gleichmäßige Schritte sehen gleich aus, der Farbton bleibt bei einer Helligkeitsänderung erhalten und es ist das, was CSS Color 4 verwendet. In allen aktuellen Browsern unterstützt. |
| CMYK | 0–100% | naiv | Die geräteunabhängige Näherung. Nützlich für eine grobe Druckreferenz, nicht für eine Druckvorgabe – dafür ist ein ICC-Profil erforderlich. |
| Skalierung | 50–950 | 11 Stufen | Töne und Schatten auf einer festen Helligkeitskurve, mit abnehmendem Chroma an beiden Enden, damit die hellen Stufen nicht fluoreszieren und die dunklen nicht leuchten. |
| Kontrast | Verhältnis | zu #fff / #000 | Das WCAG 2.x-Verhältnis jeder Stufe zu Weiß und Schwarz, was darüber entscheidet, ob Text darauf lesbar ist. |
Häufig gestellte Fragen
Wie nehme ich mit einer Pipette eine Farbe vom Bildschirm auf?
Klicken Sie auf das Farbfeld neben dem Textfeld. Es öffnet den eigenen Picker Ihres Betriebssystems, der unter macOS, Windows und den meisten Linux-Desktops eine Pipette hat, mit der sich jeder Pixel auf dem Bildschirm aufnehmen lässt, auch in anderen Anwendungen. Eine Webseite kann keine Pixel außerhalb ihrer selbst lesen; der native Weg ist also der einzige dorthin – ein Canvas-Picker innerhalb der Seite kann nur ein Bild abtasten, das Sie bereits geladen haben.
Was ist OKLCH, und sollte ich es statt HSL verwenden?
OKLCH ist ein wahrnehmungsgleichmäßig skalierter Farbraum: Gleiche numerische Schritte sehen aus wie gleiche visuelle Schritte, und eine Helligkeitsänderung verschiebt den Farbton nicht. HSL kann beides nicht, weshalb eine aus HSL gebaute Aufhellungsrampe Stufen hat, die ungleichmäßig wirken, obwohl die Zahlen gleichmäßig stehen. Jeder aktuelle Browser unterstützt oklch() in CSS. Nehmen Sie HSL, wenn Sie einen Farbtonregler wollen; nehmen Sie OKLCH, wenn der Wert in eine Rampe, eine Mischung oder irgendeine Helligkeitsentscheidung einfließt.
Warum sehen die Aufhellungen in der Rampe anders aus als das Aufhellen des Hex-Werts?
Weil das Aufhellen eines Hex-Werts bedeutet, drei sRGB-Kanäle Richtung 255 zu verschieben, und das ändert auch den Farbton, nicht nur die Helligkeit – am sichtbarsten bei Blau und Violett, die Richtung Grau driften. Die Rampe hier verschiebt die Helligkeit in OKLCh und hält Farbton und Chroma fest, holt dann jede Stufe in den sRGB-Gamut zurück, falls sie herausfällt. Deshalb bleiben Stufe 100 und Stufe 800 erkennbar dieselbe Farbe.
Bekomme ich auch eine Farbe mit Transparenz?
Ja. Tippen Sie einen 8-stelligen Hex-Wert wie #00696f80 oder rgba(0 105 111 / 50%), und das Alpha bleibt in jeder Umwandlung erhalten, die dafür einen Platz hat. Das native Farbfeld kann keine Transparenz zeigen – das liegt am Steuerelement, nicht an dieser Seite –, also zeigt es die deckende Farbe, während das Textfeld den echten Wert hält.
Ist die CMYK-Umwandlung genau genug für die Druckerei?
Nein, und keine Online-Umwandlung ist es. CMYK ist geräteabhängig: Derselbe sRGB-Wert ergibt auf gestrichenem Papier andere Tintenprozente als auf ungestrichenem und auf einer anderen Druckmaschine wieder andere. Hier steht die übliche geräteunabhängige Näherung, die richtig ist, um ein Farbmuster zu wählen und mit einer Druckerei ungefähr darüber zu sprechen, was Sie meinen. Die echte Umwandlung macht die Druckerei mit dem Profil für ihre Maschine.
Wird etwas von dem, was ich auswähle, irgendwohin gesendet?
Nein. Jede Umwandlung hier ist Rechenarbeit in diesem Browser-Tab. Nach dem Laden macht die Seite keine Netzwerkanfrage – trennen Sie die Verbindung, und der Farbwähler arbeitet weiter. Dieser Test lohnt sich, wenn Sie lieber nachprüfen als uns glauben.
Welche verwandten Tools sollten Sie als Nächstes nutzen?
- FarbkreisAm Farbkreis komplementäre, analoge und triadische Farben 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