Farbkonverter
Rechnet eine Farbe zwischen HEX, RGB, HSL, HWB, OKLCH, OKLab und CMYK um, mit Aufhellungen, Abdunklungen und dem nächsten CSS-Namen.
So funktioniert es
Geben Sie eine Farbe in beliebiger CSS-Schreibweise ein oder wählen Sie sie mit der Farbauswahl, und dieselbe Farbe erscheint in allen Formaten, jedes mit eigener Kopier-Schaltfläche. Das Werkzeug liest #Hex mit 3, 4, 6 oder 8 Stellen, rgb(), hsl(), hwb(), oklch(), oklab() und die 148 CSS-Farbnamen, mit oder ohne Transparenz.
HEX und RGB schreiben dieselben drei Kanäle von 0 bis 255, zur Basis 16 oder 10. HSL und HWB beschreiben dieselben sRGB-Farben über den Farbton, mit Sättigung und Helligkeit oder mit Weiß- und Schwarzanteil. OKLCH und OKLab, definiert in CSS Color Module Level 4, sind so gebaut, dass gleiche Schritte für das Auge ungefähr gleich wirken: Eine OKLCH-Helligkeit von 50 % wirkt bei jedem Farbton gleich hell, was HSL nicht leistet.
OKLCH und OKLab können auch Farben beschreiben, die sRGB-Bildschirme nicht darstellen. Eine solche Farbe wird auf die nächsten sRGB-Werte gebracht, und das Ergebnis weist darauf hin. CMYK nutzt die einfache Formel aus RGB ohne Farbprofil; Druckereien rechnen mit ihrem eigenen Profil um, betrachten Sie den Wert daher nur als Ausgangspunkt.
Unter den Formaten stehen der nächste CSS-Farbname, gemessen am Abstand in OKLab (CSS Color 4 nimmt 0,02 als kleinsten wahrnehmbaren Unterschied), sowie fünf Aufhellungen und fünf Abdunklungen: die Farbe in sRGB mit Weiß oder Schwarz gemischt, wie es color-mix(in srgb, …) in CSS tut. Ein Klick kopiert sie. Alles läuft in Ihrem Browser.
Beispiel
#4169e2 liegt einen Schritt neben royalblue (#4169e1): Ihr Abstand von 0,002 liegt weit unter 0,02, dem kleinsten wahrnehmbaren Unterschied.
#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) und oklch(57.37% 0.1946 257.86).#4169e2Nächster Name royalblue (#4169e1), mit einem Abstand von 0,002, unter 0,02.oklch(70% 0.4 150)Zu gesättigt für sRGB: angezeigt als #00d600, die nächste Farbe, die ein Bildschirm zeigen kann.rgb(26 115 232 / 50%)#1a73e880: Die letzten beiden Stellen enthalten die Deckkraft, 80 hexadezimal, also 128 von 255.
Häufige Fragen
Was unterscheidet HSL von OKLCH?
Beide nutzen den Farbton, aber die HSL-Helligkeit entspricht nicht dem, was das Auge sieht: hsl(60 100% 50%) ist Gelb und hsl(240 100% 50%) Blau, beide bei 50 %, doch in OKLCH hat Gelb eine Helligkeit von 96,8 % und Blau von 45,2 %. OKLCH behält die wahrgenommene Helligkeit bei, wenn sich der Farbton ändert, und eignet sich daher besser für Farbskalen.
Warum weicht das CMYK von dem meiner Druckerei ab?
Der Druck hängt von Papier, Farben und Maschine ab, was ein Farbprofil beschreibt. Dieses Werkzeug nutzt die Formel ohne Profil, die Druckerei rechnet aus RGB mit eigenen Einstellungen um.
Was bedeuten achtstellige Hex-Codes?
Die letzten beiden Stellen sind die Deckkraft: ff ist voll deckend, 00 völlig transparent. #1a73e880 ist die Farbe #1a73e8 mit etwa 50 %.
Ist rgb(26, 115, 232) dasselbe wie rgb(26 115 232)?
Ja. Die Form mit Kommas ist die ältere CSS-Schreibweise; die Form mit Leerzeichen stammt aus CSS Color 4 und schreibt die Transparenz nach einem Schrägstrich, etwa rgb(26 115 232 / 50%). Browser akzeptieren beide.
Wird meine Farbe irgendwohin gesendet?
Nein. Die Umrechnung läuft in Ihrem Browser.