Farb-Konverter
Eine Farbe eingeben – in beliebiger CSS-Schreibweise – und sie sofort in allen anderen Formaten ablesen: HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH und CMYK. Dazu die Kontrastprüfung nach WCAG und eine Reihe von Helligkeitsabstufungen. Alles lokal in deinem Browser.
Das ist keine gültige CSS-Farbangabe.
Formate
| HEX | – | |
|---|---|---|
| CSS-Name | – | |
| RGB | – | |
| HSL | – | |
| HWB | – | |
| OKLCH | – | |
| OKLab | – | |
| LCH | – | |
| Lab | – | |
| CMYK | – |
Kontrast nach WCAG
Helligkeitsabstufungen
In OKLCH aufgehellt und abgedunkelt – der Farbton bleibt dabei erhalten. Zum Übernehmen anklicken.
Alles läuft lokal in deinem Browser – nichts wird hochgeladen.
Welches Farbformat wofür?
| Format | Beschreibt | Gut für |
|---|---|---|
| HEX | Rot, Grün, Blau als Hexadezimalzahl | Die kompakteste Schreibweise, überall verstanden |
| RGB | Rot, Grün, Blau von 0 bis 255 | Direkte Entsprechung zu dem, was der Bildschirm tut |
| HSL | Farbton, Sättigung, Helligkeit | Farbvarianten von Hand ableiten |
| HWB | Farbton, Weißanteil, Schwarzanteil | Aufhellen und Abdunkeln in einer intuitiven Logik |
| OKLCH | Helligkeit, Buntheit, Farbton – wahrnehmungsnah | Farbsysteme und Abstufungen, die gleichmäßig wirken |
| Lab / LCH | CIE-Farbraum mit Weißpunkt D50 | Farbabstände messen, Druckvorstufe |
| CMYK | Cyan, Magenta, Gelb, Schwarz | Grobe Orientierung für den Druck |
Warum OKLCH die interessanteste Spalte ist
HSL hat einen Konstruktionsfehler, der im Alltag ständig stört: Seine „Helligkeit“ ist rein rechnerisch, nicht wahrgenommen. hsl(60 100% 50%) (ein knalliges Gelb) undhsl(240 100% 50%) (ein sattes Blau) haben denselben Helligkeitswert von 50 %, wirken aber völlig unterschiedlich hell – das Gelb blendet, das Blau ist fast schwarz. Wer eine Farbpalette in HSL mit gleichen Helligkeitsstufen aufbaut, bekommt deshalb eine Palette, die sichtbar ungleichmäßig ist.
OKLCH (2020 von Björn Ottosson entwickelt, seit CSS Color Level 4 in allen aktuellen Browsern) behebt genau das: Sein L entspricht der wahrgenommenen Helligkeit. Zwei Farben mit L = 60% wirken auch gleich hell, unabhängig vom Farbton. Ebenso wichtig: Das Ändern der Helligkeit verschiebt den Farbton nicht. Genau darauf beruhen die Abstufungen oben – sie entstehen, indem allein das L verändert wird, und behalten dadurch den Charakter der Ausgangsfarbe. Die drei Werte sind Helligkeit (0–100 %), Buntheit (0 bis etwa 0,4) und Farbwinkel (0–360°).
Kontrast nach WCAG richtig lesen
Das Kontrastverhältnis reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß). Die Web Content Accessibility Guidelines fordern:
| Stufe | Fließtext | Großer Text |
|---|---|---|
| AA (gesetzlicher Regelfall) | 4,5:1 | 3:1 |
| AAA (erhöhte Anforderung) | 7:1 | 4,5:1 |
„Großer Text“ bedeutet dabei mindestens 18 pt (etwa 24 px) oder 14 pt (etwa 18,7 px) in Fett. Für Bedienelemente und aussagekräftige Grafiken gilt nach WCAG 2.1 ebenfalls 3:1. In Deutschland sind diese Werte über die BITV 2.0 für öffentliche Stellen verbindlich, und mit dem Barrierefreiheitsstärkungsgesetz (BFSG) gelten sie seit Juni 2025 auch für viele private Anbieter.
Ein Punkt, der oft übersehen wird: Eine halbtransparente Farbe hat kein eigenes Kontrastverhältnis. Bewertet wird immer, was am Ende zu sehen ist. Dieses Werkzeug rechnet die Farbe deshalb erst auf den jeweiligen Hintergrund und misst danach – wer den Deckkraft-Regler bewegt, sieht das Verhältnis unmittelbar mitwandern.
Welche Schreibweisen als Eingabe erlaubt sind
Alles, was auch in einem Stylesheet stehen dürfte: #f0f, #663399,#66339980 (mit Alpha), rgb(102 51 153),rgba(102, 51, 153, .5), hsl(270 50% 40%), hwb(270 20% 40%),lab(32% 38 -48), oklch(44% 0.16 303), jeder der 148 benannten CSS-Farbnamen wie rebeccapurple oder tomato – und sogarcolor-mix(). Gelesen wird die Eingabe nämlich nicht von einem eigenen Parser, sondern vom Browser selbst; er kennt jede Schreibweise, die er auch in einem Stylesheet akzeptieren würde.
Häufige Fragen
Warum weicht der CMYK-Wert von dem meines Grafikprogramms ab?
Weil eine korrekte Umrechnung nach CMYK ein ICC-Profil des konkreten Druckverfahrens braucht – Papier, Farbe und Maschine bestimmen das Ergebnis mit. Der hier gezeigte Wert ist die verbreitete rechnerische Näherung ohne Profil: brauchbar zur groben Orientierung, aber kein verbindlicher Wert für eine Druckerei.
Warum ist das Feld „CSS-Name“ meistens leer?
Weil es nur 148 benannte Farben gibt und dort ausschließlich exakte Treffer stehen.#663399 ist genau rebeccapurple, #663398 hat dagegen keinen Namen mehr.
Warum sehen manche OKLCH-Werte nach dem Anklicken einer Abstufung anders aus?
Weil nicht jede Kombination aus Helligkeit und Buntheit in sRGB darstellbar ist. Eine sehr helle und zugleich sehr bunte Farbe liegt außerhalb dessen, was ein normaler Bildschirm zeigen kann. Statt die Kanäle hart abzuschneiden – was den Farbton verzöge – wird die Buntheit so weit zurückgenommen, bis die Farbe wieder passt.
Werden meine Eingaben hochgeladen?
Nein. Die gesamte Umrechnung ist JavaScript in deinem Browser; es gibt keinen Server, der etwas entgegennehmen könnte. Gemerkt werden nur die Schreibweise und die Vergleichsfarbe für den Kontrast.
Verwandt: Der Data-URL-Generator wandelt Bilder und SVGs in Base64-Data-URLs für den direkten Einbau ins Stylesheet um.