Vier synchronisierte Felder, eine Farbe: Gib einen HEX-Code, einen rgb()-Wert, einen hsl()-Wert oder CMYK-Prozente ein, und die anderen drei aktualisieren sich sofort. Das Panel legt einen dezenten Schleier der gewählten Farbe an, damit der Wert immer im Kontext sichtbar ist, und das Farbfeld nennt sein WCAG-Kontrastverhältnis gegenüber schwarzem oder weißem Text. Unter den Feldern findest du eine fertige Abstufungsreihe sowie komplementäre, Triaden- und analoge Harmonien — klicke ein Feld an, um es als neue Basisfarbe zu übernehmen.
So konvertierst du eine Farbe
- 1 Gib einen Wert in ein beliebiges Feld ein — HEX, RGB, HSL oder CMYK — oder öffne die Farbauswahl über das Farbfeld.
- 2 Die übrigen Formate aktualisieren sich sofort, normalisiert auf die Standard-CSS-Notation.
- 3 Erkunde Varianten über Abstufungen und Harmonien; ein Klick übernimmt ein Feld.
- 4 Kopiere die gewünschte Notation mit der Schaltfläche neben jedem Feld.
Was die Umrechnungen tatsächlich berechnen
HEX und RGB beschreiben dasselbe in unterschiedlicher Schreibweise: drei Kanalwerte von 0 bis 255, notiert als Dezimalzahlen oder als Paare hexadezimaler Ziffern. Zwischen beiden umzurechnen ist reine Formatierung. Der Parser akzeptiert alle vier gängigen HEX-Formen — #rgb, #rgba, #rrggbb und #rrggbbaa — und erweitert die Kurzformen durch Verdoppeln jeder Ziffer, sodass aus #f0c ein #ff00cc wird.
HSL ist dagegen eine echte Transformation und keine Umschrift. Es beschreibt dieselbe Farbe als Farbton (ein Winkel von 0 bis 360 auf dem Farbkreis), Sättigung und Helligkeit. Deshalb greifen Gestalter dazu: Um eine Farbe aufzuhellen, änderst du eine einzige Zahl, während du in RGB alle drei auf eine leicht misslingende Weise bewegen musst. CMYK ist ein subtraktives Modell für den Druck, und die Umrechnung hier ist die Standardarithmetik: gut genug, um eine Farbe zu kommunizieren, aber ohne Farbmanagement. Echte Druckarbeit braucht ein ICC-Profil für die konkrete Maschine und das konkrete Papier, und die Werte deiner Druckerei werden abweichen.
Die Kontrastprüfung wendet die WCAG-Formel für relative Leuchtdichte an, die die drei Kanäle unterschiedlich gewichtet, weil das menschliche Sehen für Grün weit empfindlicher ist als für Blau. Deshalb haben ein mittleres Blau und ein mittleres Grün mit identischer RGB-„Helligkeit" sehr unterschiedlichen Kontrast auf Weiß — und deshalb ist es unzuverlässig, Kontrast nach Augenmaß zu beurteilen.
Wo welches Format gebraucht wird
Farben an die Entwicklung übergeben
Gestalter arbeiten in HSL; CSS nimmt beides. Eine Palette in HEX- oder RGB-Werte umzurechnen gibt der Entwicklung etwas, das sie direkt in ein Stylesheet oder eine Design-Token-Datei einfügen kann.
Aufhellungen und Abdunklungen bauen
Eine stimmige Palette entsteht daraus, die Helligkeit bei festem Farbton zu variieren — nicht daraus, verwandte Farben nach Gefühl zu wählen. Aus einer Basis abgeleitete Abstufungen liefern die Hover-, Deaktiviert- und Rahmenvarianten, die wirklich zusammengehören.
Barrierefreiheit prüfen
Die WCAG verlangen ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext und 3:1 für große Schrift. Das vor der Festlegung einer Palette zu prüfen ist deutlich billiger, als sie nach einem Barrierefreiheits-Audit neu zu bauen.
Druckvorlagen vorbereiten
Ein in RGB definiertes Logo muss für den Druck nach CMYK. Die Umrechnung hier liefert die Ausgangswerte für das Gespräch mit der Druckerei, die sie an ihre Maschine anpasst.
Warum Farbkonvertierung nötig ist
Jeder Teil des Workflows spricht eine eigene Farbsprache: Design-Tools liefern HEX, CSS-Variablen und Canvas bevorzugen RGB, Helligkeit und Themes lassen sich in HSL weit leichter anpassen, und alles für den Druck braucht CMYK. Von Hand umzurechnen ist fehleranfällig, und die meisten Online-Farbwähler sind schwere Seiten voller Tracker. Dieser hier ist ein paar Kilobyte reine Mathematik — inklusive Alphakanal aus #rrggbbaa und rgba()/hsla() — lokal ausgeführt, also sofort da und offline nutzbar.
Wo die Zahlen aufhören, exakt zu sein
Farbe ist komplizierter als Arithmetik, und zwei dieser Formate verbergen echte Einschränkungen:
- Die CMYK-Umrechnung ist nicht farbverwaltet. Sie nutzt die Standardformel ohne ICC-Profil und kann deshalb konkrete Farben, Maschine und Papier nicht berücksichtigen. Behandle die Ausgabe als Näherung und bestätige sie mit deiner Druckerei.
- Viele leuchtende RGB-Farben lassen sich gar nicht drucken. Helle Bildschirmgrüntöne und Cyan liegen außerhalb des CMYK-Farbraums, und die Umrechnung gibt dir stillschweigend die nächstliegende druckbare Farbe, ohne zu warnen.
- Die Helligkeit in HSL ist nicht wahrnehmungsbezogen. Zwei Farben mit demselben L-Wert können deutlich unterschiedlich hell wirken — Gelb bei 50 % liest sich weit heller als Blau bei 50 %. Wahrnehmungsgleiche Räume wie OKLCH lösen das, HSL nicht.
- Rundungen summieren sich. RGB nach HSL und zurück zu rechnen kann einen Kanal um eins verschieben; halte ein Format als maßgebliche Quelle, statt wiederholt hin und her zu rechnen.
- Kontrastverhältnisse sind ein Schwellenwert, keine Garantie. 4,5:1 zu bestehen macht dünnen hellgrauen Text auf Weiß nicht angenehm lesbar.
Fehlerbehebung
- Meine CMYK-Werte wirken gegenüber dem Proof falsch
- Ohne Farbmanagement zu erwarten. Die Standardformel weiß nichts von deiner Maschine, deinem Farbsatz und deinem Papier, die das Ergebnis allesamt verschieben. Nutze diese Werte als Ausgangspunkt und lass dir die korrigierten von der Druckerei geben — besonders bei Markenfarben, wo Genauigkeit zählt.
- Dieselbe HSL-Helligkeit ergibt sichtbar unterschiedliche Helligkeit
- Das ist HSL, wie es entworfen wurde, kein Fehler. Helligkeit in HSL ist ein mathematischer und kein wahrnehmungsbezogener Mittelwert, und das Auge ist für manche Farbtöne weit empfindlicher als für andere. Brauchst du gleich hell wirkende Farbfelder, justiere nach Augenmaß oder nutze ein wahrnehmungsbezogenes Modell.
- Meine Farbe fällt bei der Kontrastprüfung durch, sieht aber gut aus
- Auf einem guten Monitor in gut beleuchtetem Raum gut auszusehen ist nicht der Test. Die WCAG-Schwellen berücksichtigen ältere Bildschirme, Blendung und Lesende mit verringerter Kontrastempfindlichkeit. Den Text ein paar Stufen abzudunkeln löst es meist ohne sichtbare Designänderung.
Häufige Fragen
Welche Formate kann ich einfügen?
HEX mit drei, vier, sechs und acht Stellen (mit oder ohne #), rgb() und rgba(), hsl() und hsla() sowie CMYK-Prozentwerte. Der Alphawert bleibt erhalten, wo das Zielformat ihn unterstützt.
Ist die CMYK-Umrechnung druckgenau?
Sie nutzt die geräteunabhängige Standardformel, die auch Design-Tools am Bildschirm zeigen. Das exakte Druckergebnis hängt vom ICC-Profil für Papier und Farbe ab — für professionelle Aufträge immer mit einem Proof prüfen.
Was bedeutet das Verhältnis auf dem Farbfeld?
Das WCAG-Kontrastverhältnis zwischen der Farbe und dem besser lesbaren von schwarzem oder weißem Text. Ziel sind mindestens 4,5:1 für Fließtext und 3:1 für große Schrift.
Welches Kontrastverhältnis brauche ich wirklich?
WCAG AA verlangt 4,5:1 für normalen Fließtext und 3:1 für große Schrift — 18 pt, oder 14 pt fett und größer. Für Bedienelemente und grafische Objekte gilt auf AA-Niveau ebenfalls 3:1. AAA hebt Fließtext auf 7:1, was bei langen Lesestrecken anzustreben ist, aber nicht der übliche rechtliche Maßstab.
Wann sollte ich HSL statt HEX verwenden?
Immer dann, wenn du Varianten einer Farbe erzeugst statt eine festzulegen. Einen Hover-Zustand, einen deaktivierten Zustand oder eine Reihe von Abstufungen zu bauen heißt, die Helligkeit um ein paar Prozent zu verstellen — in HSL trivial ablesbar und in HEX undurchsichtig, wo die Verwandtschaft von #4a7c59 und #3d6749 unsichtbar bleibt.
Warum lässt sich meine Bildschirmfarbe im Druck nicht exakt treffen?
Bildschirme senden Licht aus, Drucker reflektieren es — beide geben grundlegend verschiedene Farbumfänge wieder. Die gesättigtsten Bildschirmfarben haben kein druckbares Gegenstück, weshalb Markenrichtlinien meist getrennte RGB- und CMYK-Werte nennen statt einen aus dem anderen umgerechneten.
Übersteht der Alphakanal die Umrechnung?
Zwischen HEX, RGB und HSL ja — alle drei haben Schreibweisen, die Alpha mitführen. CMYK kennt keine Transparenz, dort entfällt Alpha; hängt dein Layout daran, muss das im Satz gelöst werden und nicht im Farbwert.