Farbcodes umrechnen: alle Formate auf einmal
Gib eine Farbe in beliebiger Schreibweise ein, ob HEX, RGB, HSL, HSV, OKLCH oder CSS-Name, und bekomme alle anderen Formate gleichzeitig, jede Zeile einzeln kopierbar. Dazu Komplementär-, Triaden- und Analogfarben sowie je fünf Aufhellungen und Abdunklungen. Gerechnet wird ausschließlich in deinem Browser, nichts wird hochgeladen.
Welches Farbformat nehme ich wofür?
| Format | Typischer Einsatz | Stärke |
|---|---|---|
| HEX | CSS, Design-Dateien, Tickets | kurz, überall verstanden |
| RGB / RGBA | Canvas, SVG, Deckkraft | direkt in Kanälen denkbar |
| HSL | schnelles Aufhellen im Editor | Farbton und Helligkeit getrennt |
| HSV / HSB | Farbwähler in Grafikprogrammen | entspricht dem Mischgefühl am Regler |
| OKLCH | Design-Systeme, Farbskalen | wahrnehmungsgleiche Schritte |
| CMYK | Vorabstimmung mit der Druckerei | Näherung für den Druck |
Die 148 CSS-Farbnamen sind bequem, aber grob gerastert. Der Konverter zeigt deshalb den exakten Namen, wenn es einen gibt, und sonst den nächstgelegenen. Der Abstand wird in OKLab gemessen, weil ein reiner RGB-Abstand nicht dem entspricht, was das Auge als ähnlich empfindet.
Was ist OKLCH und warum lohnt es sich?
OKLCH ist die Polarform von OKLab, einem 2020 von Björn Ottosson veröffentlichten Farbraum (bottosson.github.io/posts/oklab). Sein Versprechen: gleich große Zahlenschritte wirken auch optisch gleich groß. HSL kann das nicht: hsl(60 100% 50%) (Gelb) und hsl(240 100% 50%) (Blau) tragen dieselbe Helligkeitszahl, sehen aber völlig unterschiedlich hell aus.
Praktisch heißt das: Eine Skala von 50 bis 900, gebaut über die OKLCH-Helligkeit, sieht in jedem Farbton gleichmäßig aus. In HSL musst du für jeden Farbton nachjustieren.
oklch() gehört zum CSS Color Module Level 4. Nach den Browser-Kompatibilitätsdaten von MDN ist die Funktion seit Mai 2023 in allen großen Engines nutzbar: Safari 15.4 lieferte sie 2022 aus, Chrome 111 und Firefox 113 zogen 2023 nach (MDN: oklch()).
Wie entstehen die Farbharmonien?
Über den HSL-Farbkreis: Komplementär dreht den Farbton um 180 Grad, die Triade um 120 und 240 Grad, Analog um minus und plus 30 Grad. Sättigung und Helligkeit bleiben unangetastet. Das ist die klassische Farbenlehre und ein guter Startpunkt, aber kein Ersatz für den Blick eines Menschen.
Wozu Aufhellungen und Abdunklungen?
Aus einer Markenfarbe entsteht so eine ganze Palette: hellere Töne für Flächen und Hover-Zustände, dunklere für Text und Ränder. Gemischt wird linear Richtung Weiß beziehungsweise Schwarz, in fünf gleichmäßigen Schritten. Ein Klick auf ein Feld übernimmt die Farbe ins Eingabefeld, sodass du sofort alle Formate dazu siehst.
Wo liegen die Grenzen?
- CMYK ist eine Näherung. Die einfache Formel kennt weder Papier noch Farbprofil. Für den echten Druck zählt das ICC-Profil deiner Druckerei.
- OKLCH kann mehr Farben beschreiben, als ein sRGB-Bildschirm zeigt. Liegt deine Eingabe außerhalb, kürzt das Tool auf den darstellbaren Rand und sagt es dir.
- Die Pipette ist Browsersache. Die EyeDropper-Schnittstelle gibt es in Chromium-Browsern; in Firefox und Safari blenden wir den Knopf aus, statt ein totes Bedienelement zu zeigen.
- Halbtransparente Farben werden als HEX mit acht Stellen ausgegeben. Wie sie tatsächlich wirken, hängt vom Untergrund ab.
Sind meine Farben auch lesbar?
Schön ist nicht automatisch lesbar. Ob eine Kombination aus Text- und Hintergrundfarbe die Anforderungen der WCAG erfüllt, prüfst du mit dem Kontrast-Checker. Dort siehst du das Verhältnis, das AA/AAA-Urteil und die nächste Farbe, die besteht.