Farbcode-Konverter 2026

So funktioniert der Farbcode-Konverter

Der Konverter wandelt zwischen den vier wichtigsten Farbformaten um. HEX und RGB beschreiben dasselbe – jeweils 8-Bit-Werte für Rot, Grün und Blau. Die Umrechnung ist eine reine Notationsänderung, völlig verlustfrei. HSL berechnet sich über eine geometrische Transformation aus RGB und ist ebenfalls verlustfrei (abgesehen von minimalen Rundungen).

CMYK aus RGB ist mathematisch eine simple Subtraktion (1 − R, 1 − G, 1 − B) plus Berechnung des Schwarzanteils. In der Realität nutzen Druckereien jedoch ICC-Farbprofile, um die exakten Pigmente ihrer Druckmaschine zu berücksichtigen – die Werte hier sind eine universelle Näherung.

Spezifikationen und Standards

HEX, RGB und HSL sind im CSS Color Module Level 3 und 4 standardisiert (W3C). Die Umrechnungsformeln finden sich detailliert in der MDN-Dokumentation. CMYK ist im Druck international über ISO 12647 (Prozessstandard Offsetdruck) und entsprechende ICC-Profile geregelt – etwa ISO Coated v2 oder PSO LWC.

sRGB als Grundfarbraum für Web und Bildschirme ist seit 1996 IEC 61966-2-1. Modernere Wide-Gamut-Räume wie Display-P3 oder Rec.2020 erweitern den darstellbaren Farbumfang erheblich.

Anwendungsfälle

Webentwicklung: HEX-Code aus dem Designtool zu CSS umrechnen.
Print-Vorbereitung: Markenfarbe (HEX) zu CMYK für die Druckerei konvertieren.
UI-Theming: HSL-Werte für Hover- und Active-Zustände aus Basisfarbe ableiten.
Datenvisualisierung: Farbpaletten aus exakten Hue-Verschiebungen aufbauen.
Markenführung: Konsistente Farbwerte über alle Medien (Web, Print, App) sichern.

Datenschutz: Client-Side

Sämtliche Konvertierungen finden im Browser statt. Es werden keine HEX-, RGB-, HSL- oder CMYK-Werte an einen Server gesendet, weder Logs erfasst noch Tracking-Cookies gesetzt. Nutzung ist anonym, ohne Registrierung und ohne Einwilligungspflicht nach DSGVO.

Auch der Color-Picker ist eine native Browser-Komponente (input type="color") und benötigt keine Drittanbieter-Bibliothek.

Typische Fehler

HEX ohne #: ff0000 wird oft eingegeben – mit # voranstellen, sonst wird es als ungültig erkannt.
Großbuchstaben: #FF0000 und #ff0000 sind identisch, manche Tools sind aber pingelig – kleinschreiben ist sicher.
CMYK direkt für Print kopieren: Ohne Farbprofil verschiebt sich der Druckton. Mit der Druckerei das Zielprofil klären.
HSL falsch interpretiert: Saturation 0 % macht jede Farbe grau, unabhängig von Hue. Bei niedrigen S-Werten erscheint die Farbe entsättigt.
Wide-Gamut-Verlust: Display-P3-Farben, die in sRGB konvertiert werden, verlieren Sättigung. Für Print idealerweise im sRGB-Raum bleiben.

Häufige Fragen

Im Web dominieren HEX (#ff0000) und RGB (rgb(255,0,0)). HSL beschreibt Farben über Farbton, Sättigung und Helligkeit – intuitiver für Designer. CMYK (Cyan, Magenta, Yellow, Key) ist der Standard im Vierfarbdruck. Jedes Format beschreibt prinzipiell denselben Farbraum, aber für unterschiedliche Anwendungsfälle. HEX ist kompakt, RGB nahe am Bildschirm-Modell, HSL mathematisch elegant, CMYK für Druckereien.

HEX/RGB nutzt den additiven Farbraum (Bildschirm: Licht), CMYK den subtraktiven (Druck: Pigment). Es gibt Bildschirmfarben, die sich nicht drucken lassen (Out-of-Gamut). Unsere Umrechnung liefert eine mathematische Näherung – für Profi-Druck arbeiten Druckereien mit ICC-Profilen und konvertieren über Software wie Adobe InDesign oder Photoshop, die Farbprofile berücksichtigen.

HSL steht für Hue (0–360°), Saturation (0–100 %) und Lightness (0–100 %). Es entspricht der menschlichen Wahrnehmung: Hue ist der Grundton, Saturation die Farbintensität, Lightness die Helligkeit. Für UI-Designs ist HSL ideal, weil sich Hover-States einfach durch Anpassen von L generieren lassen. CSS unterstützt HSL nativ via hsl().

Ja, seit CSS Color Module 4. Acht-stelliges HEX hat zusätzlich zwei Zeichen für die Transparenz: #ff000080 ist 50 % transparentes Rot. Alle modernen Browser unterstützen das Format. Alternativ funktioniert rgba(255, 0, 0, 0.5) – semantisch identisch, schreibweise etwas länger.

Es gibt nicht den richtigen Farbraum – nur den passenden für den Anwendungsfall. Web: HEX/RGB/HSL (sRGB). Druck: CMYK. High-End-Foto und Wide-Gamut-Displays: Display-P3 oder Adobe RGB. CSS Color Module 4 bringt mit color() neue Farbräume direkt in den Browser, etwa color(display-p3 1 0 0).

Hue ist ein Winkel auf dem Farbkreis: 0° = Rot, 60° = Gelb, 120° = Grün, 180° = Cyan, 240° = Blau, 300° = Magenta. Diese Werte entsprechen dem klassischen RGB-Farbkreis. Designer nutzen Hue-Verschiebungen, um harmonische Paletten zu erzeugen – etwa +180° für die Komplementärfarbe.

Die Konvertierung HEX ↔ RGB ist exakt – beides sind Darstellungen derselben 8-Bit-Werte. RGB ↔ HSL ist eine deterministische Mathematik, allerdings mit Rundungsverlusten bei der Rückkonvertierung. CMYK aus RGB ist eine Näherung ohne Farbprofil und liefert bei kritischen Druckaufträgen leichte Abweichungen. Für Web und einfachen Druck sind die Werte ausreichend exakt.

Dieses Tool konvertiert nur eingegebene Werte – nicht aus Bildern. Für Foto-zu-Farbe nutzen Sie Browser-Extensions wie ColorZilla oder Tools wie Adobe Color, die Bilder analysieren. Sobald Sie den HEX-Wert haben, können Sie ihn hier in andere Formate übersetzen.

Beide nutzen Hue und Saturation, unterscheiden sich aber im dritten Wert. HSL hat Lightness (Hell-Dunkel-Skala mit Schwarz unten und Weiß oben), HSV hat Value (Helligkeit, mit Schwarz unten und reiner Farbe oben). HSL ist symmetrischer und im Web verbreiteter, HSV in Bildbearbeitung wie Photoshop.