HEX passt nicht zur Marke? So findest du den exakten RGB-/HSL-Wert
Der Screenshot vom Designer zeigt #7C3AED, aber im CSS wirkt die Farbe blasser oder zu dunkel — ein klassisches Problem, wenn HEX, RGB und HSL von Hand umgerechnet werden. Dieser Leitfaden zeigt, wie die Umrechnung wirklich funktioniert, wann CMYK abweicht und wie du gleichzeitig den WCAG-Kontrast für barrierefreien Text prüfst.
Kurzantwort Ein HEX-Code wie #7C3AED besteht aus drei Zweierblöcken in Basis 16: 7C, 3A und ED. Jeder Block wird einzeln in Basis 10 umgerechnet, um R, G und B zu erhalten — hier ergibt das rgb(124, 58, 237).
Der häufigste Fehler bei der manuellen Umrechnung entsteht, wenn jemand HEX als eine einzige sechsstellige Zahl statt als drei getrennte Zweierblöcke liest. Jeder Block steht für einen Farbkanal — Rot, Grün, Blau — mit einem Wertebereich von 0 bis 255 (also 00 bis FF in Hexadezimal). Die dreistellige Kurzform, etwa #F0A, wird erweitert, indem jedes Zeichen verdoppelt wird: aus F0A wird FF00AA.
sRGB-FarbraumDer Standardfarbraum für Bildschirme und Webdesign. HEX und RGB beschreiben dieselbe additive Farbmischung aus rotem, grünem und blauem Licht — nur in unterschiedlicher Notation.
Ein Beispiel aus der Praxis: Ein Team übernimmt eine Markenfarbe aus einem PDF-Styleguide, der nur den HEX-Wert angibt. Beim manuellen Umrechnen für eine ältere Codebasis, die nur rgb() akzeptiert, rutscht leicht eine Ziffer daneben — aus 124 wird versehentlich 142. Das Ergebnis ist eine minimal, aber sichtbar andere Farbe, die im Vergleich zum Original-Screenshot "irgendwie falsch" wirkt. Ein automatischer Konverter, der HEX, RGB, HSL und HSV synchron hält, vermeidet genau diese Art von Tippfehler.
HSL, HSV und warum sie oft verwechselt werden
Kurzantwort HSL und HSV/HSB teilen sich Farbton und Sättigung, unterscheiden sich aber in der dritten Komponente: Bei HSL ergibt 100% Helligkeit (L) reines Weiß, bei HSV/HSB ergibt 100% Wert (V) die lebendigste, gesättigste Farbe.
Diese Verwechslung ist einer der häufigsten Gründe, warum ein Wert aus einem Design-Tool im Code plötzlich anders aussieht. Design-Anwendungen mit einem klassischen Farbrad-Picker verwenden oft HSV, weil sich "heller/lebendiger wählen" darüber intuitiver anfühlt. CSS hingegen unterstützt nativ die Funktion hsl(). Wird ein HSV-Tripel versehentlich als HSL interpretiert, verschiebt sich vor allem die Helligkeit spürbar.
Beispielhafte Umrechnung für #7C3AED (nur zur Veranschaulichung)
Format
Wert
HEX
#7C3AED
RGB
rgb(124, 58, 237)
HSL
hsl(262, 83%, 58%)
HSV/HSB
hsv(262, 76%, 93%)
Hinweis: Die Tabelle oben zeigt ein einzelnes Beispiel zur Veranschaulichung der Umrechnungslogik, keine allgemeingültige Formel für jede Farbe — jede Ausgangsfarbe ergibt eigene Werte.
WCAG-Kontrast für barrierefreien Text
Kurzantwort Normal großer Text braucht laut WCAG 2.1 mindestens ein AA-Kontrastverhältnis von 4,5:1, AAA erfordert 7:1. Große Schrift (ab etwa 18pt oder 14pt fett) darf mit 3:1 (AA) beziehungsweise 4,5:1 (AAA) auskommen.
Das Kontrastverhältnis basiert auf der relativen Leuchtdichte beider Farben: Jeder sRGB-Kanal wird linearisiert und zu einem Leuchtdichtewert L kombiniert, danach wird das Verhältnis aus der helleren und der dunkleren Leuchtdichte gebildet. Ergebnis ist eine Zahl zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß). Ein Team, das eine neue Markenfarbe als Button-Hintergrund einsetzt, sollte diesen Wert prüfen, bevor die Farbe live geht — sonst kann Text auf dem Button für Nutzer mit eingeschränktem Sehvermögen schwer lesbar werden.
Praktisches Szenario: Ein helles Lila wie #A78BFA sieht auf weißem Hintergrund freundlich aus, erreicht als Fließtext aber oft nicht die nötigen 4,5:1 — während dieselbe Farbe als große Überschrift oder als Rahmen um ein Icon durchaus zulässig sein kann, weil dort geringere Schwellenwerte gelten.
Warum CMYK vom Bildschirm abweicht
Kurzantwort RGB/HEX ist additiv (Licht wird auf dem Bildschirm addiert), CMYK ist subtraktiv (Tinte wird auf Papier addiert) — deshalb ist jede CMYK-Umrechnung aus HEX nur eine mathematische Näherung, kein exaktes Druckergebnis.
Wer eine Bildschirmfarbe direkt für den Druck übernehmen will, etwa für eine Visitenkarte oder ein Flyer-Layout, sollte diese Näherung im Hinterkopf behalten. Manche besonders kräftigen oder leuchtenden Bildschirmfarben lassen sich mit Standardtinten schlicht nicht exakt reproduzieren. Für verbindliche Markenfarben im Druck ist ein ICC-Farbprofil oder eine Pantone-Referenz die verlässlichere Quelle als eine automatische CMYK-Umrechnung.
Alle Formate live umrechnen, Kontrast prüfen und Paletten erzeugen — direkt im Browser, ohne Anmeldung.
Ein HEX-Code wird als #RRGGBB geschrieben, und jeder Zweierblock stellt einen Farbkanal in Basis 16 dar. Du rechnest jeden Block in Basis 10 um: RR ist Rot, GG ist Grün, BB ist Blau, jeweils 0–255. Zum Beispiel ergibt #7C3AED 7C=124, 3A=58, ED=237, also rgb(124, 58, 237).
Warum sieht meine Farbe im Browser anders aus als im Design-Tool?
Meist liegt es an einer falschen Umrechnung von Hand oder an einer Verwechslung von HSL und HSV, weil beide Modelle Farbton und Sättigung nutzen, sich aber in der dritten Komponente unterscheiden. Seltener liegt es an der Monitorkalibrierung oder am Farbprofil. Ein automatischer Konverter, der alle Formate synchron hält, vermeidet Tippfehler bei der manuellen Umrechnung.
Welches Kontrastverhältnis braucht barrierefreier Text?
Nach WCAG 2.1 benötigt normal großer Text mindestens ein AA-Verhältnis von 4,5:1, AAA erfordert 7:1. Für große Schrift (etwa 18pt oder 14pt fett) sinken die Schwellenwerte auf AA 3:1 und AAA 4,5:1. Für UI-Komponenten wie Button-Rahmen reicht meist 3:1.
Warum weicht die CMYK-Ausgabe eines Konverters vom Druckergebnis ab?
HEX/RGB ist additiv für Bildschirme, CMYK ist subtraktiv für Tinte auf Papier. Manche kräftigen Bildschirmfarben lassen sich mit Standardtinten nicht exakt reproduzieren. Eine einfache mathematische CMYK-Umrechnung ist daher nur eine Näherung; für exakte Druckfarben braucht es ein ICC-Farbprofil oder eine Pantone-Referenz.
Wie erzeugt man aus einer Markenfarbe schnell eine passende Palette?
Eine Komplementär-Palette nimmt den gegenüberliegenden Farbton (H+180°) für starken Kontrast, eine Analog-Palette nutzt benachbarte Farbtöne (H±30°) für einen harmonischen Look, und eine Triaden-Palette verteilt drei Farbtöne gleichmäßig auf dem Farbkreis (H, H+120°, H+240°). Ein Palettengenerator erzeugt alle Varianten automatisch aus einer einzigen Ausgangsfarbe.
Kurzer Methodik-Hinweis: Dieser Artikel erklärt die zugrunde liegende Umrechnungslogik (Basis-16/10, additive vs. subtraktive Farbmodelle, WCAG-Leuchtdichteformel) allgemein verständlich. Alle Beispielwerte dienen nur zur Veranschaulichung und ersetzen keine professionelle Farbberatung oder ein zertifiziertes Druckprofil. Für barrierefreie Projekte gilt stets die aktuelle WCAG-Spezifikation als verbindliche Quelle.