Zum Inhalt springen

Farbwähler & HTML-Farbcodes

Farbe wählen oder Code eingeben und sofort alle Farbwerte sehen.

Aa Beispieltext3.23:1
Aa Beispieltext6.48:1
Name
DodgerBlueExakte Übereinstimmung
HEX-Schreibweise

Kontrast

vs. Weiß3.23:1
vs. Schwarz6.48:1
vs. #FFFFFF (Vergleichen mit)3.23:1

Beste Textfarbe auf diesem Hintergrund: Schwarz

Abstufungen

Aufhellungen (Richtung Weiß)
Abdunklungen (Richtung Schwarz)
Komplementärfarbe
Läuft im Browser – nichts wird hochgeladen.

So funktioniert’s

  1. Geben Sie einen Farbcode oder CSS-Farbnamen ein und klicken Sie auf „Übernehmen“.
  2. Wählen Sie unter „Vergleichen mit“ eine Farbe für die Kontrastprüfung.
  3. Geben Sie unter „Nach Name oder HEX filtern…“ einen Suchbegriff ein, um die Farbtabelle einzugrenzen.
  4. Klicken Sie in der Farbtabelle auf einen HEX- oder RGB-Wert, um ihn zu kopieren.

Beispiele

Markenfarbe für die Website umwandeln

Eingabe
#2451E8
Ausgabe
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

Eingabe
rgb(255 136 0)
Ausgabe
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

Eingabe
#767676
Ausgabe
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.

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.