Konverter
Farbkonverter
Der Farbkonverter ermöglicht die Umrechnung von Farben zwischen allen gängigen Farbmodellen: HEX, RGB, HSL, HWB, LCH, OKLCH sowie CMYK. Zusätzlich werden benannte CSS-Farben (wie 'tomato' oder 'cornflowerblue') erkannt und ausgegeben. Ein integrierter Color-Picker erlaubt die visuelle Auswahl von Farben. Das Tool ist unverzichtbar für Webentwickler, Designer und alle, die mit Farben in digitalen und Druckmedien arbeiten.
Was sind Farbmodelle und warum gibt es verschiedene?
Verschiedene Farbmodelle beschreiben Farben auf unterschiedliche Weise, je nach Verwendungszweck. RGB (Rot, Grün, Blau) ist das additive Modell für Bildschirme, bei dem Farben durch Mischung von Licht entstehen. CMYK (Cyan, Magenta, Gelb, Schwarz) ist das subtraktive Modell für den Druck. HSL (Hue, Saturation, Lightness) und HSV orientieren sich an der menschlichen Wahrnehmung und sind intuitiver zu bearbeiten. HEX ist eine kompakte hexadezimale Darstellung von RGB und in der Webentwicklung weit verbreitet. Neuere Modelle wie LCH und OKLCH bieten eine wahrnehmungsgleichmäßige Farbskala, die für konsistente Farbpaletten besonders nützlich ist.
Wie funktioniert das Tool?
Das Tool verwendet mathematische Formeln zur Umrechnung zwischen den Farbräumen. Bei der Konvertierung von HEX zu RGB werden die hexadezimalen Kanalwerte (je 8 Bit) in dezimale Werte von 0–255 umgewandelt. Die Umrechnung von RGB zu HSL erfolgt durch Normalisierung der Kanalwerte und Berechnung von Farbton, Sättigung und Helligkeit. Für LCH und OKLCH wird zunächst in den linearen RGB-Raum und dann über XYZ in den Lab-Farbraum konvertiert. Der integrierte Color-Picker liefert nativ den RGB-Wert, aus dem alle anderen Darstellungen berechnet werden. Benannte CSS-Farben werden über eine eingebettete Lookup-Tabelle der W3C-Spezifikation aufgelöst.
Typische Anwendungsfälle
- Umrechnung von Designspezifikationen (HEX aus Figma/Sketch) in HSL für CSS-Variablen
- Konvertierung von CMYK-Druckfarben in RGB/HEX für die digitale Darstellung
- Erstellung konsistenter Farbpaletten mit dem wahrnehmungsgleichmäßigen LCH-Modell
- Überprüfung, ob ein bestimmter HEX-Code einen offiziellen CSS-Farbnamen hat
Schritt-für-Schritt-Anleitung
- Schritt 1: Geben Sie einen Farbwert in einem beliebigen unterstützten Format ein (z. B. #ff5733 oder rgb(255, 87, 51)).
- Schritt 2: Alternativ wählen Sie eine Farbe über den integrierten Color-Picker visuell aus.
- Schritt 3: Das Tool berechnet sofort alle Darstellungen in den anderen Farbmodellen.
- Schritt 4: Kopieren Sie den gewünschten Ausgabewert mit einem Klick.
Beispiel
Eingabe
#3b82f6
Ausgabe
RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | CMYK: cmyk(76%, 47%, 0%, 4%) | CSS-Name: – (kein exakter Treffer)
Tipps & Hinweise
- Verwenden Sie HSL in CSS für einfachere Anpassungen der Helligkeit und Sättigung – z. B. für Hover-Zustände.
- LCH-Farben sind wahrnehmungsgleichmäßig: Gleiche numerische Abstände entsprechen gleichen visuellen Unterschieden, ideal für Farbpaletten.
- Der Alpha-Kanal (Transparenz) wird bei RGB als rgba() und bei HEX als 8-stelliger Wert (z. B. #3b82f680) unterstützt.
Häufige Fragen
Was ist der Unterschied zwischen HSL und HSV/HSB?
Beide Modelle beschreiben Farben durch Farbton (Hue), Sättigung (Saturation) und einen dritten Wert. Bei HSL steht das L für Lightness (Helligkeit), wobei 50 % eine reine Farbe ergibt. Bei HSV/HSB steht das V/B für Value/Brightness, wobei 100 % die Reinfarbe darstellt. CSS verwendet HSL.
Warum sind manche CMYK-Konvertierungen ungenau?
Die Umrechnung von RGB zu CMYK ist mathematisch nicht eindeutig, da CMYK ein geräteabhängiges Modell ist. Das Tool liefert eine rechnerische Näherung. Für professionellen Druck sollte das ICC-Profil des Druckers verwendet werden.
Was ist OKLCH und wozu wird es verwendet?
OKLCH ist ein neueres wahrnehmungsgleichmäßiges Farbmodell, das auf dem OKLab-Farbraum basiert. Es wird in modernem CSS (CSS Color Level 4) unterstützt und ermöglicht die Erstellung von Farbpaletten, bei denen gleiche Helligkeitsunterschiede visuell wirklich gleich erscheinen.
Farbkonverter
Konvertiere Farben zwischen HEX, RGB, HSL, HWB, LCH, CMYK und CSS-Namen mit integriertem Color-Picker.
Tool öffnen