So rechnen Sie eine Farbe um
- Farbe wählen oder als HEX (#0071e3), RGB, HSL oder CMYK eingeben.
- Alle Formate erscheinen gleichzeitig. Neben dem gewünschten auf Kopieren klicken.
- Weiter unten finden Sie Paletten, hellere und dunklere Varianten und eine Kontrastprüfung für Text.
So funktioniert es
Alle Formate werden aus demselben RGB-Wert berechnet und stimmen daher immer überein. HSL und HSV beschreiben eine Farbe über Farbton, Sättigung und Helligkeit – so lassen sich Harmonien leicht bilden: Komplementärfarben liegen auf dem Farbkreis 180° auseinander, Triaden 120°. Hellere und dunklere Töne behalten Farbton und Sättigung und ändern nur die Helligkeit.
Die Kontrastprüfung nutzt die WCAG-2-Formel für relative Leuchtdichte, wie Barrierefreiheits-Audits.
Ein Rechenbeispiel
Unser Blau #0071e3 ist rgb(0, 113, 227), hsl(210, 100 %, 44,5 %) und etwa cmyk(100 %, 50 %, 0 %, 11 %). Auf Weiß erreicht es einen Kontrast von 4,70:1, knapp über den 4,5:1, die WCAG AA für normalen Text verlangt.
Das klassische Grau #767676 auf Weiß ergibt 4,54:1 und besteht; eine Stufe heller, #777777, ergibt 4,48:1 und fällt durch. Deshalb prüfen Designer, statt zu schätzen. Helles Orange #ff9f0a auf Weiß kommt nur auf 2,06:1 – für ein großes Icon in Ordnung, für Fließtext nicht.
Wofür es sich eignet
Eine Markenfarbe aus dem Styleguide in CSS-, Android- oder Druckwerte übertragen. Eine kleine Palette für Folien, Website oder Logo bauen. Vor der Veröffentlichung prüfen, ob Button-Text lesbar ist. Einen dunkleren Ton für den Hover-Zustand finden.
Farben für einen QR-Code stellen Sie in QR-Code erstellen ein. Für Text auf Bildern hat Meme-Generator eigene Farboptionen.
Grenzen
- CMYK-Werte sind eine einfache mathematische Umrechnung, kein Druckprofil. Für professionellen Druck das Profil der Druckerei verwenden.
- Farben sind sRGB. Farben mit großem Farbraum (Display P3) werden auf sRGB begrenzt.
- Der Kontrast gilt für einfarbige Hintergründe; Text auf Fotos braucht eine eigene Prüfung.
Häufige Fragen
Wie rechne ich HEX in RGB um?
Die sechs Stellen in drei Paare teilen und jedes hexadezimal lesen: #0071e3 → 00, 71, e3 → 0, 113, 227. Das Werkzeug erledigt das beim Tippen.
Welchen Kontrast brauche ich?
WCAG AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text (etwa 24 px oder 19 px fett). AAA verlangt 7:1.
Ist der CMYK-Wert druckfertig?
Er ist ein guter Ausgangspunkt, doch die Druckfarbe hängt von Papier und Farbprofil ab. Bei Markenfarben einen Proof bei der Druckerei anfordern.
Welches Format nehme ich in CSS?
Alle funktionieren. HEX ist am verbreitetsten; hsl() ist praktisch, um die Helligkeit von Hand anzupassen.
Passende Tools
Passende Ratgeber
- Colour contrast: how much does text need to be readable? (auf Englisch)