Farb-Konverter
Ein Feld für jede Notation: Füge eine Farbe genau so ein, wie du sie bekommen hast – hex, rgb(), hsl(), oklch() oder auch einen Namen wie crimson – und kopiere sie in allen neun Formaten auf einmal wieder heraus.
Akzeptiert hex, Farbnamen, rgb, hsl, hwb, hsv, cmyk, lab, lch, oklab, oklch und color(srgb …).
Gib eine Farbe ein, um alle Formate zu sehen.
Eine Eingabe, neun Ausgaben
Die meisten Konverter verlangen, dass du vorab angibst, welches Format du schon hast. Diesem hier ist das egal: Er zerlegt, was immer du einfügst, zeigt ein Farbfeld in Echtzeit und gibt die Farbe gleichzeitig als HEX, RGB, HSL, HSV, CMYK, CIE Lab, CIE LCH, OKLab und OKLCH aus – jede Zeile mit eigenem Kopier-Button. Ein einziger Parser normalisiert die Eingabe, eine Engine rechnet alle Umwandlungen in doppelter Gleitkomma-Genauigkeit, und gerundet wird erst bei der Anzeige. Deshalb stimmen die neun Zeilen immer miteinander überein.
Ein konkretes Beispiel: Das Blau #3564c4 ist zugleich rgb(53, 100, 196), hsl(220.3, 57.4%, 48.8%), cmyk(73%, 49%, 0%, 23.1%), lab(43.17 9.96 -56.01) und oklch(52.33% 0.1589 262.61). Fünf Schreibweisen, eine Farbe – welche du speichern solltest, hängt allein davon ab, was sie als Nächstes liest.
Alle Eingabe-Notationen, die dieser Konverter versteht
Jedes Beispiel unten ist (zumindest ungefähr) dasselbe mittlere Blau – so kannst du vergleichen, wie die Notationen ein und dieselbe Farbe schreiben:
| Notation | Beispiel-Eingabe | Gut zu wissen |
|---|---|---|
| HEX | #3564c4 | 3-, 4-, 6- und 8-stellige Formen; bei 6-stelligen Codes ist das # optional |
| Farbname | crimson | alle 148 CSS-Farbschlüsselwörter, dazu transparent |
| rgb() / rgba() | rgb(53 100 196) | Kanäle als Zahlen von 0–255 oder als Prozentwerte; mit Leerzeichen oder Kommas |
| hsl() / hsla() | hsl(220 57% 49%) | Farbton in Grad; die alte Komma-Syntax funktioniert ebenfalls |
| hwb() | hwb(220 21% 23%) | ein Farbton, gemischt mit Weiß- und Schwarzanteil |
| hsv() / hsb() | hsv(220 73% 77%) | nicht Teil von CSS, aber das Modell der meisten Farbwähler in Apps |
| cmyk() / device-cmyk() | device-cmyk(0.73 0.49 0 0.23) | unkalibrierte Druck-Näherung |
| lab() | lab(43.17 9.96 -56.01) | CIE Lab mit Weißpunkt D50 – passend zu den Werten in Photoshop |
| lch() | lch(43.17 56.89 280.08) | Lab in Polarform: Helligkeit, Buntheit, Farbwinkel |
| oklab() | oklab(0.5233 -0.0204 -0.1576) | der verbesserte Wahrnehmungsfarbraum aus CSS Color 4 |
| oklch() | oklch(52.33% 0.1589 262.61) | OKLab in Polarform – der Liebling der Design-Systeme |
| color(srgb …) | color(srgb 0.208 0.392 0.769) | Kanäle als Fließkommazahlen von 0–1 |
| color(srgb-linear …) | color(srgb-linear 0.036 0.127 0.552) | Werte in linearem Licht, vor der Gamma-Kodierung |
Eine Überlebenshilfe für Zeichenketten aus freier Wildbahn: Ein führendes # – oder schlicht sechs Zeichen aus 0–9/a–f – ist HEX; drei ganze Zahlen bis 255 sind RGB; eine gradähnliche Zahl gefolgt von zwei Prozentwerten ist HSL (oder HWB, wenn der Funktionsname es sagt); eine Zahl bis 100 gefolgt von zwei vorzeichenbehafteten Zahlen ist Lab; und alles, was mit „ok“ beginnt, gehört zur modernen Wahrnehmungsfamilie. Im Zweifel einfach hier einfügen – lässt es sich zerlegen, zeigt das Farbfeld sofort, was es war.
Welche Notation solltest du verwenden?
- HEX – die kompakteste und am weitesten verstandene Form; ideal für Konfigurationsdateien, SVG-Attribute und schnelle Übergaben.
- rgb() – bildet die ganzen Zahlen von 0–255 ab, die Canvas-Pixeldaten und die meisten JavaScript-Grafik-APIs erwarten.
- hsl() – gut für schnelle Anpassungen von Hand („etwas heller, etwas weniger gesättigt“), aber seine Helligkeit ist über die Farbtöne hinweg nicht wahrnehmungsgleich – baue darauf also keine Farbskalen auf.
- oklch() – die beste Standardwahl für Design-Tokens, Aufhellungs- und Abdunkelungsskalen sowie Dark-Mode-Logik; setzt einen Browser ab 2023 voraus.
- lab() / lch() – die klassischen CIE-Farbräume für druckennahe Arbeit, Delta-E-Vergleiche und den Abgleich mit Photoshop-Werten.
- oklab() – kartesische Koordinaten, geeignet für Farbrechnungen wie Mittelwerte und Verlaufsinterpolation.
- cmyk() – nur als grobe Vorschau verstehen; ein echter Druckauftrag braucht eine Separation auf Basis eines ICC-Profils, keine Formel.
- hwb() – intuitiv, wenn du wie ein Maler denkst: Farbton nehmen, Weiß dazu, Schwarz dazu.
- hsv() / hsb() – praktisch, wenn du Zahlen aus den Farbwählern in Figma oder Photoshop übernimmst.
Wie Alpha in den einzelnen Notationen geschrieben wird
| Notation | Alpha-Syntax | Beispiel |
|---|---|---|
| HEX | ein viertes Ziffernpaar (oder eine vierte Ziffer) | #3564c480 – etwa 50 % Deckkraft |
| rgb() | alter vierter Wert oder moderner Schrägstrich | rgba(53, 100, 196, 0.5) oder rgb(53 100 196 / 50%) |
| hsl() | dieselben zwei Schreibweisen wie bei rgb() | hsla(220.3, 57.4%, 48.8%, 0.5) |
| hwb(), lab(), lch(), oklab(), oklch(), color() | nur mit Schrägstrich | oklch(52.33% 0.1589 262.61 / 50%) |
| Farbnamen | keine – wechsle zu einer Funktionsschreibweise | transparent ist das einzige vollständig transparente Schlüsselwort |
Alpha verändert nie die zugrunde liegenden Koordinaten; dieses Tool überträgt es in jede Ausgabe, die es ausdrücken kann – 8-stelliges HEX, rgba(), hsla() und die Schrägstrich-Form der Lab-Familie. HSV und CMYK haben keine standardisierte Alpha-Notation, daher zeigen diese Zeilen die deckende Grundfarbe.
Eingaben außerhalb des Farbraums und weiteres Kleingedrucktes
Lab, LCH, OKLab und OKLCH können Farben jenseits von sRGB beschreiben. Gibst du eine solche ein, zeigen die Zeilen der RGB-Familie (HEX, RGB, HSL, HSV, CMYK) einen in den Farbraum gemappten Ersatz – die Buntheit wird gemäß CSS Color 4 reduziert, Helligkeit und Farbton bleiben erhalten – dazu einen sichtbaren Hinweis; die Zeilen der Lab-Familie behalten dagegen deine exakten Werte. CMYK verdient ein zusätzliches Sternchen: Der Wert stammt aus der üblichen unkalibrierten Formel – ein brauchbarer Richtwert, den keine Druckmaschine exakt trifft.
Auch gut zu wissen: Während du tippst, schreibt die Seite deine Farbe in den URL-Hash – kopierst du die Adresszeile, erhält dein Gegenüber einen Link, der diesen Konverter mit genau demselben Wert wieder öffnet.
Wenn du immer dasselbe Formatpaar umrechnest, sind die spezialisierten Seiten schneller zur Hand – der Konverter HEX in RGB deckt den Klassiker ab, der Konverter HEX in OKLCH den modernen Fall; beide sind nur schlanke Oberflächen für dieselbe Engine. Wofür du dich auch entscheidest: Die Verarbeitung läuft zu 100 % im Browser, die eingefügten Farben verlassen nie deinen Rechner.
Häufige Fragen
Welche Farbformate kann ich in diesen Konverter einfügen?
Hex-Codes (bei 6-stelligen Werten ist das # optional), alle 148 CSS-Farbnamen, rgb(), hsl(), hwb(), hsv()/hsb(), cmyk()/device-cmyk(), lab(), lch(), oklab(), oklch(), color(srgb …) und color(srgb-linear …) – jeweils mit Alpha, sofern die Notation es erlaubt.
Sind Umrechnungen zwischen HEX, RGB und HSL exakt?
HEX und RGB sind zwei Schreibweisen derselben 8-Bit-Werte – dort ist die Umrechnung immer exakt. HSL und HSV werden ebenfalls exakt berechnet und auf eine Nachkommastelle gerundet angezeigt.
Wie verlässlich ist die CMYK-Ausgabe?
Sie nutzt die Standardformel, die praktisch jeder Online-Konverter verwendet und die von idealisierten Druckfarben ausgeht. Betrachte sie als Näherung – professioneller Druck braucht ein ICC-Profil für die konkrete Maschine und das konkrete Papier.
Was passiert, wenn ich eine Lab- oder OKLCH-Farbe außerhalb von sRGB eingebe?
Die Zeilen der RGB-Familie zeigen eine nach CSS Color 4 in den Farbraum gemappte Fassung, und das Tool weist auf die Anpassung hin; die Zeilen für Lab, LCH, OKLab und OKLCH behalten deine exakten Eingabewerte.
Kann ich jemandem direkt einen Link zu einer Farbe schicken?
Ja. Der Konverter schreibt deine Eingabe beim Tippen in den URL-Hash – wer diese URL öffnet, sieht dieselbe Farbe bereits geladen.
Verlassen die Farben, die ich eingebe, mein Gerät?
Nein. Jede Analyse und jede Umrechnung läuft in deinem Browser, ganz ohne Netzwerkanfragen – deshalb funktioniert das Tool auch ohne Internetverbindung.