So funktioniert’s
- Geben Sie einen Farbcode oder CSS-Farbnamen ein und klicken Sie auf „Übernehmen“.
- Wählen Sie unter „Vergleichen mit“ eine Farbe für die Kontrastprüfung.
- Geben Sie unter „Nach Name oder HEX filtern…“ einen Suchbegriff ein, um die Farbtabelle einzugrenzen.
- Klicken Sie in der Farbtabelle auf einen HEX- oder RGB-Wert, um ihn zu kopieren.
Beispiele
Markenfarbe für die Website umwandeln
#2451E8
HEX: #2451E8 RGB: rgb(36, 81, 232) HSL: hsl(226, 81%, 53%) HSV: hsv(226, 84%, 91%) CMYK: cmyk(84%, 65%, 0%, 9%) Name: ≈ MediumSlateBlue vs. Weiß: 6.14:1 — ✓ AA, ✓ AA groß, ✕ AAA, ✓ AAA groß vs. Schwarz: 3.41:1 — ✕ AA, ✓ AA groß, ✕ AAA, ✕ AAA groß
RGB-Wert aus einem Designentwurf umwandeln
rgb(255 136 0)
HEX: #FF8800 RGB: rgb(255, 136, 0) HSL: hsl(32, 100%, 50%) HSV: hsv(32, 100%, 100%) CMYK: cmyk(0%, 47%, 100%, 0%) Name: ≈ DarkOrange vs. Weiß: 2.39:1 — ✕ AA, ✕ AA groß, ✕ AAA, ✕ AAA groß vs. Schwarz: 8.77:1 — ✓ AA, ✓ AA groß, ✓ AAA, ✓ AAA groß
Grauen Text auf weißem Hintergrund prüfen
#767676
HEX: #767676 RGB: rgb(118, 118, 118) HSL: hsl(0, 0%, 46%) HSV: hsv(0, 0%, 46%) CMYK: cmyk(0%, 0%, 0%, 54%) Name: ≈ Gray (grey) vs. Weiß: 4.54:1 — ✓ AA, ✓ AA groß, ✕ AAA, ✓ AAA groß vs. Schwarz: 4.62:1 — ✓ AA, ✓ AA groß, ✕ AAA, ✓ AAA groß
HTML-Farbnamen (148)
Alle 148 CSS-Farbnamen, die moderne Browser unterstützen, nach Farbfamilien gruppiert. Klicken Sie auf eine Zeile, um die Farbe zu laden, oder auf einen HEX- bzw. RGB-Wert, um ihn zu kopieren.
| Farbe | Name | HEX | RGB |
|---|
Häufige Fragen
Kann ich mit einer Pipette eine Farbe vom Bildschirm aufnehmen?
Klicken Sie auf „Vom Bildschirm aufnehmen“, um eine Farbe auf dem Bildschirm auszuwählen. Die Schaltfläche erscheint nur, wenn Ihr Browser die EyeDropper API unterstützt.
Sind die CMYK-Werte für den Druck geeignet?
Die CMYK-Werte sind Näherungswerte ohne Farbprofil. Verwenden Sie für den Druck das Farbprofil Ihrer Druckerei.
Werden transparente Farben wie RGBA unterstützt?
Der Alpha-Wert wird ignoriert. Das Tool verarbeitet nur deckende sRGB-Farben. Bei Eingaben mit Transparenz erscheint ein Hinweis.
Welcher Farbkontrast erfüllt WCAG AA oder AAA?
Nach WCAG 2.x benötigt normaler Text mindestens 4,5:1 für AA und 7:1 für AAA. Für großen Text gelten 3:1 für AA und 4,5:1 für AAA.