Über: Farbcode-Umrechner
Designprogramme arbeiten mit HEX, CSS mit RGB oder HSL und die Druckerei mit CMYK. Egal in welches Feld Sie einen Wert eingeben: Alle anderen Formate werden sofort angepasst, und Sie können den CSS-Code inklusive Transparenz (Alpha) kopieren.
Außerdem berechnet das Tool das Kontrastverhältnis zwischen Text- und Hintergrundfarbe und zeigt mit AA- und AAA-Badges, ob die Web Content Accessibility Guidelines (WCAG 2.1) erfüllt sind – die Grundlage von BITV 2.0 und EN 301 549.
So funktioniert’s
- Tippen Sie auf das große Farbfeld oben links, um eine Farbe zu wählen, oder geben Sie einen Code in eines der Felder HEX, RGB, HSL, HSV oder CMYK ein.
- Mit dem Deckkraft-Regler erhalten Sie 8-stelligen HEX-Code sowie rgba- und hsla-Werte.
- Unter Kontrastverhältnis sehen Sie den Kontrast zu Weiß, Schwarz und einer eigenen Vergleichsfarbe.
- Ein Tipp auf eine Farbe unter Heller & dunkler kopiert den HEX-Code; ganz unten kopieren Sie den kompletten CSS-Code.
Farbformate im Überblick
| Format | Beispiel | Bedeutung |
|---|---|---|
| HEX | #4f46e5 | Rot, Grün und Blau als je zwei Hex-Ziffern; bei 8 Stellen geben die letzten zwei die Deckkraft an |
| RGB | rgb(79, 70, 229) | Jeder Kanal von 0 bis 255 |
| HSL | hsl(243, 75%, 59%) | Farbton (0–360°), Sättigung und Helligkeit; intuitiv anzupassen |
| HSV (HSB) | hsv(243, 69%, 90%) | Modell der Farbwähler in Photoshop und Figma |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Farbanteile der Druckfarben |
Kontrastanforderungen (WCAG 2.1 / BITV 2.0)
| Stufe | Normaler Text | Großer Text |
|---|---|---|
| AA (Mindestanforderung) | mindestens 4,5:1 | mindestens 3:1 |
| AAA (erhöht) | mindestens 7:1 | mindestens 4,5:1 |
Großer Text ist mindestens 18 pt (ca. 24 px) oder fett ab 14 pt (ca. 18,66 px). Für barrierefreie Websites öffentlicher Stellen muss Fließtext mindestens 4,5:1 erreichen. Das Kontrastverhältnis reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).
Häufige Fragen
Warum sehen gedruckte Farben anders aus als am Bildschirm?
Bildschirme mischen Licht (RGB), Drucker mischen Farbe (CMYK) – beide können unterschiedliche Farbräume darstellen. Die CMYK-Werte hier stammen aus der einfachen Umrechnungsformel und weichen von Werten mit einem Druckprofil wie FOGRA39 (ISO Coated v2) ab. Lassen Sie wichtige Drucksachen mit einem Proof prüfen.
Was ist ein 8-stelliger HEX-Code?
Das Format #RRGGBBAA: Die letzten zwei Stellen stehen für die Deckkraft. 80 entspricht etwa 50 %, CC 80 % und FF 100 % (deckend). Alle aktuellen Browser unterstützen es.
Wie wird der Kontrast bei transparenten Farben berechnet?
Bei Transparenz hängt die sichtbare Farbe vom Hintergrund ab. Das Tool ignoriert daher die Deckkraft und rechnet mit der deckenden Farbe.
Kann ich Farbnamen eingeben?
Ja. Geben Sie im HEX-Feld einen der 148 CSS-Farbnamen ein, etwa red, navy, skyblue oder tomato.