So funktioniert es
- Geben Sie eine Farbe ein – #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) – oder wählen Sie eine mit der Farbauswahl.
- Kopieren Sie das benötigte Format aus der Liste.
- Legen Sie eine Hintergrundfarbe fest, um das Kontrastverhältnis und die Ergebnisse für WCAG AA/AAA zu prüfen.
- Klicken Sie auf eine Abstufung in der Skala, um sie zu übernehmen.
Optionen erklärt
- HEX / RGB
- Bildschirmfarben als Rot, Grün und Blau von 0–255. #rrggbbaa und rgb(… / 50%) fügen Transparenz hinzu.
- HSL / HSV
- Farbton, Sättigung und Helligkeit (Lightness bzw. Value). Praktisch, um eine Farbe von Hand heller oder dunkler zu machen.
- OKLCH
- Ein wahrnehmungsbasierter Farbraum aus CSS Color 4. Wenn Sie die Helligkeit ändern, bleiben Farbton und wahrgenommene Buntheit stabil – ideal für Farbpaletten und Dark Themes.
- CMYK
- Eine einfache Umrechnung, nur zur Orientierung. Echte Druckfarben hängen vom Farbprofil des Druckers ab, fragen Sie daher Ihre Druckerei nach exakten Werten.
- Kontrastverhältnis
- WCAG 2.2 verlangt auf Stufe AA 4,5:1 für normalen Text und 3:1 für großen Text (18 pt oder 14 pt fett), auf Stufe AAA 7:1 bzw. 4,5:1.
Beispiel
#0f766e ist rgb(15 118 110), hsl(175 77% 26%) und oklch(51.1% 0.086 186.4). Auf einem weißen Hintergrund beträgt das Kontrastverhältnis etwa 5,5:1, womit WCAG AA für alle Textgrößen erfüllt ist.
Gängige Farben in jedem Format
CSS-Farbnamen und ihre Werte. CMYK ist hier eine einfache mathematische Umrechnung; für den professionellen Druck verwenden Sie die CMYK-Werte aus dem Farbprofil Ihrer Druckerei.
| CSS-Name | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0 %, 100 %, 100 %, 0 % |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0 %, 35 %, 100 %, 0 % |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0 %, 16 %, 100 %, 0 % |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100 %, 0 %, 100 %, 50 % |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100 %, 0 %, 0 %, 50 % |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100 %, 100 %, 0 %, 0 % |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100 %, 100 %, 0 %, 50 % |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0 %, 100 %, 0 %, 50 % |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0 %, 59 %, 29 %, 0 % |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0 %, 75 %, 75 %, 35 % |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0 %, 0 %, 0 %, 50 % |
Welches Format sich eignet
HEX ist die kürzeste Schreibweise für eine Farbe in CSS und Design-Tools: je zwei Hexadezimalziffern für Rot, Grün und Blau.
RGB enthält dieselbe Information in Dezimalschreibweise, und mit rgb(255 0 0 / 50%) kommt Transparenz hinzu.
HSL beschreibt Farbton, Sättigung und Helligkeit. So lassen sich hellere oder dunklere Töne derselben Farbe bilden, indem nur die letzte Zahl geändert wird.
OKLCH ist ein neueres CSS-Format, bei dem gleiche Helligkeitsstufen für das Auge gleich verschieden aussehen – nützlich für barrierefreie Farbpaletten.
Häufig gestellte Fragen
Welches Kontrastverhältnis ist für Text gut?
Mindestens 4,5:1 für Fließtext (WCAG AA). Reines Schwarz auf Weiß hat 21:1; das verbreitete Grau #767676 auf Weiß hat 4,54:1 und besteht damit knapp.
Warum weicht der CMYK-Wert von Photoshop ab?
Photoshop rechnet über ein ICC-Farbprofil für eine bestimmte Druckmaschine und ein bestimmtes Papier um. Dieses Tool nutzt die einfache mathematische Formel – gut für Schätzungen, aber nicht für Druckproofs.
Was ist der Unterschied zwischen HSL und OKLCH?
HSL ist nur eine Umstellung von RGB, daher wirken ein Gelb und ein Blau mit gleicher Helligkeit sehr unterschiedlich hell. OKLCH ist so gestaltet, dass gleiche Helligkeit für das Auge auch gleich hell aussieht.
Kann ich OKLCH heute schon in CSS verwenden?
Ja. oklch() funktioniert in allen aktuellen großen Browsern.
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.