So funktioniert es
Gib eine Farbe in einem gängigen Format ein oder nutze die Farbauswahl. Du erhältst dieselbe Farbe als HEX, RGB, HSL und CMYK, ihr Kontrastverhältnis zu weißer und schwarzer Schrift mit der passenden WCAG-Stufe sowie eine Reihe hellerer und dunklerer Abstufungen, die du antippen kannst.
Kontrastverhältnis = (L1 + 0,05) ÷ (L2 + 0,05), wobei L die relative Leuchtdichte ist
Die Kontraststufen verstehen
- AAA (7:1 oder mehr): hervorragende Lesbarkeit für Fließtext.
- AA (4,5:1 oder mehr): das Minimum für normalen Text auf Websites.
- AA Large (3:1 oder mehr): nur für große oder fette Überschriften und Icons.
- Unter 3:1: für viele Menschen schwer lesbar.
Tipps
- Die CMYK-Werte sind eine einfache Umrechnung; Druckereien arbeiten mit Farbprofilen, prüfe exakte Druckfarben daher mit einem Proof.
- 8-stelliges HEX und rgba() enthalten Transparenz.
- Klicke auf einen Wert, um ihn zu kopieren.
Grundlagen und Quellen
- Die Farbwerte folgen dem CSS Color Module Level 4 (sRGB)
- Kontrastverhältnisse und Stufen folgen WCAG 2.2 (W3C)
Zuletzt geprüft am 7. Oktober 2026
Häufige Fragen
Wie rechne ich HEX in RGB um?
Gib den HEX-Code ein, zum Beispiel #ff6600, und der RGB-Wert erscheint sofort – in diesem Fall rgb(255, 102, 0).
Welches Kontrastverhältnis brauche ich?
WCAG verlangt mindestens 4,5:1 für normalen Text (AA) und 7:1 für die strengere Stufe AAA. Große Überschriften brauchen 3:1.
Sind die CMYK-Werte exakt für den Druck?
Sie sind eine direkte mathematische Umrechnung. Das echte Druckergebnis hängt von Papier- und Farbprofilen ab, prüfe es daher mit einem Proof.
Wird Transparenz unterstützt?
Ja. 8-stellige HEX-Werte, rgba() und hsla() behalten ihren Alphakanal.
Wie kopiere ich einen Wert?
Klicke auf einen HEX-, RGB-, HSL- oder CMYK-Wert, um ihn zu kopieren, oder nutze die Kopieren-Schaltfläche für alle auf einmal.