Farbkonverter
Rechnen Sie eine Farbe zwischen HEX, RGB, HSL, HSV und CMYK um und prüfen Sie, ob zwei Farben genug Kontrast für gut lesbaren Text haben.
Läuft vollständig in Ihrem Browser
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- CSS-Name
Kontrastprüfer
Kontrastverhältnis –
| Verwendung | Mindestens | Ergebnis |
|---|---|---|
| Normaler Text, AA | 4,5:1 | |
| Normaler Text, AAA | 7:1 | |
| Großer Text, AA | 3:1 | |
| Großer Text, AAA | 4,5:1 | |
| Icons und Bedienelemente, AA | 3:1 |
Liest HEX (3, 4, 6 oder 8 Stellen), rgb(), hsl(), hsv(), cmyk() und CSS-Farbnamen; andere CSS-Farbsyntax liest Ihr Browser, soweit er kann. HSL, HSV und CMYK werden mit einer Nachkommastelle angezeigt.
So rechnen Sie eine Farbe um
- Tippen oder fügen Sie eine Farbe in einem gängigen Format ein, etwa
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)odernavy, oder wählen Sie eine mit dem Farbwähler. - Kopieren Sie das benötigte Format aus der Liste. Die Werte werden während der Eingabe aktualisiert.
- Geben Sie unter Kontrastprüfer eine Text- und eine Hintergrundfarbe ein, um ihr Kontrastverhältnis zu sehen und ob sie WCAG AA und AAA bestehen.
Farbformate und Kontrast
HEX und RGB beschreiben eine Bildschirmfarbe als Anteile von Rot, Grün und Blau von 0 bis 255; HEX schreibt jeden Anteil einfach als zwei Hexadezimalziffern, optional mit einem dritten Paar für die Deckkraft. HSL und HSV beschreiben dieselben Farben über Farbton (einen Winkel auf dem Farbkreis), Sättigung und Helligkeit bzw. Hellwert; damit lässt sich leichter eine hellere oder gedecktere Variante einer Farbe wählen. Es sind verschiedene Koordinaten für dieselben sRGB-Farben, daher ist das Umrechnen von HEX in RGB oder HSL bis auf Rundung exakt.
CMYK ist etwas anderes: Es beschreibt Druckfarbe, und die echte Umrechnung hängt vom Druckverfahren ab. Der angezeigte Wert stammt aus der einfachen Formel (Schwarz ist 1 minus der hellste Kanal, die anderen Farben ergeben den Rest), nützlich für grobe Arbeiten, aber kein Ersatz für ein Druckprofil.
Der Kontrastprüfer wendet die Kontrastformel aus WCAG 2 an, dieselbe, die bei Barrierefreiheitsprüfungen und in den Entwicklertools der Browser verwendet wird. Er misst nur den Leuchtdichtekontrast und kann daher nichts über Farbpaare für Farbenblinde wie Rot auf Grün sagen; sehr dünne oder kleine Schriften brauchen unter Umständen mehr Kontrast als das Minimum.
Tipps
- Sie brauchen die Farbe eines Pixels in einem Foto oder Screenshot? Nutzen Sie Farbe aus Bild auslesen.
- Sie erstellen einen QR-Code in Markenfarben? Der QR-Code-Generator warnt, wenn der Kontrast zum Scannen zu gering ist.
- Sie rechnen Hex-Zahlen um, die keine Farben sind? Probieren Sie den Zahlensystem-Umrechner.
Häufige Fragen
Stimmt der CMYK-Wert für den Druck?
Nur ungefähr. Das CMYK hier stammt aus der einfachen Formel, die Bildschirm-RGB ohne Farbprofil umrechnet, wie es die meisten Online-Konverter tun. Druckereien arbeiten mit bestimmten Farben und Papieren, beschrieben durch ein ICC-Profil; für Druckarbeiten rechnen Sie daher in einer Grafiksoftware mit dem Profil um, das Ihre Druckerei Ihnen gibt.
Wie wird das Kontrastverhältnis berechnet?
Mit der WCAG-2-Formel: Aus den sRGB-Werten jeder Farbe wird ihre relative Leuchtdichte berechnet, und das Verhältnis ist (hellere + 0,05) geteilt durch (dunklere + 0,05). Es reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Der aktuelle WCAG-Text verwendet in der Formel einen Schwellenwert von 0,04045; ältere Fassungen nannten 0,03928, was für jede 8-Bit-Farbe dasselbe Ergebnis liefert.
Welche Verhältnisse verlangen AA und AAA?
Normaler Text braucht 4,5:1 für AA und 7:1 für AAA. Großer Text, also mindestens 24 px normal oder etwa 18,7 px fett, braucht 3:1 für AA und 4,5:1 für AAA. Icons, Eingabefeldrahmen und andere Bedienelemente brauchen 3:1 (WCAG 1.4.11). Ein Verhältnis wird nicht aufgerundet: 4,49:1 besteht AA für normalen Text nicht.
Was passiert mit transparenten Farben?
Eine teilweise transparente Textfarbe wird zuerst mit dem Hintergrund gemischt, so wie ein Bildschirm sie zeigt, und die gemischte Farbe wird gemessen. Bei einem teilweise transparenten Hintergrund wird angenommen, dass er auf Weiß liegt. Nach dem Mischen werden die Kanäle auf ganze Zahlen gerundet, so wie ein Bildschirm sie darstellen würde.
Warum ändern sich HSL-Werte nach dem Zurückrechnen leicht?
Bildschirmfarben haben 256 Stufen pro Kanal, daher landen die meisten HSL- und HSV-Werte nicht genau auf einer davon. Der Konverter rechnet intern mit voller Genauigkeit und rundet nur für die Anzeige: HEX und RGB auf ganze Zahlen, HSL, HSV und CMYK auf eine Nachkommastelle.
Kennt das Tool CSS-Farbnamen?
Ja, alle 148 benannten Farben in CSS, etwa rebeccapurple und cornflowerblue. Geben Sie einen Namen ein, um ihn umzurechnen; entspricht eine Farbe genau einem Namen, wird der Name ebenfalls angezeigt. Manche Farben haben zwei Namen, etwa aqua und cyan.