Farbwähler
Finde den genauen Code für jede Farbe, in jedem Format.
Kontrastprüfung
- AA
- AA groß
- AAA
- AA
- AA groß
- AAA
Läuft in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
- 5 Farbformate
- WCAG-Kontrastprüfung
- Unterstützt Deckkraft
So wählst du eine Farbe
- Zieh im Quadrat, um Sättigung und Helligkeit einzustellen, dann bewege den Farbtonregler.
- Oder gib einen Code in jedem Format ein: HEX, RGB, HSL, HSV oder CMYK.
- Kopiere den Code, den du brauchst, und prüfe seinen Kontrast weiter unten.
Farbformate im Vergleich
Jede Zeile unten beschreibt dasselbe Orange. Nur die Schreibweise ändert sich.
| Format | Beispiel | Genutzt in |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, Design-Tools |
| RGB | rgb(240, 138, 60) | CSS, Bildbearbeitung |
| HSL | hsl(24, 84%, 59%) | CSS, am leichtesten per Auge anzupassen |
| HSV/HSB | hsv(24, 75%, 94%) | Farbwähler in Mal- und Design-Apps |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Druckdesign und Farbmischung |
Nutze HEX oder RGB fürs Web, HSL, wenn du die Helligkeit oder Sättigung einer Farbe anpassen willst, ohne ihren Farbton zu ändern, und CMYK als Ausgangspunkt für den Druck.
WCAG-Kontraststufen
Die Kontrastprüfung unten vergleicht deine Farbe mit reinem Weiß und reinem Schwarz und bewertet beides nach den WCAG-2-Stufen.
| Stufe | Normaler Text | Großer Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Großer Text bedeutet etwa 24 px oder 19 px fett. Die meisten Websites müssen nur AA bestehen. AAA ist eine strengere Hürde, meist auf Behörden- und barrierefreiheitsfokussierten Seiten.
Tipps für barrierefreie Farben
- Halte den Farbton fest und senke die Helligkeit in HSL, um einen dunkleren Farbton derselben Farbe für Hover- und Aktiv-Zustände zu bekommen.
- Eine Farbe, die auf Weiß AA besteht, kann auf einem eingefärbten Hintergrund durchfallen, prüfe den Kontrast also gegen den echten Hintergrund der Seite, nicht nur Weiß oder Schwarz.
- Die Pipette funktioniert nur in Chrome und Edge am Computer. Firefox und Safari haben die EyeDropper-API noch nicht eingebaut.
- Hol dir einen Druckfahnenabzug, bevor du einem CMYK-Wert für eine ganze Druckauflage vertraust. Dieselben Zahlen können auf gestrichenem und ungestrichenem Papier unterschiedlich aussehen.
Häufige Fragen zu Farbwähler
Wie bekomme ich den Farbcode von etwas auf meinem Bildschirm?
Klick in Chrome und Edge am Computer auf Vom Bildschirm wählen und dann irgendwo auf deinen Bildschirm. Andere Browser bieten das noch nicht an, mach dann einen Screenshot und öffne ihn in einem Farbwähler für Bilder.
Was ist der Unterschied zwischen HEX, RGB und HSL?
Sie beschreiben dieselbe Farbe auf unterschiedliche Weise. HEX und RGB geben die Anteile von Rot, Grün und Blau an (HEX schreibt sie im Sechzehnersystem), während HSL Farbton, Sättigung und Helligkeit angibt, was sich von Hand leichter anpassen lässt.
Welches Kontrastverhältnis braucht lesbarer Text?
WCAG-Stufe AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text, das sind etwa 24 px oder 19 px fett. Stufe AAA hebt normalen Text auf 7:1 an.
Sind die CMYK-Werte exakt?
Sie sind eine direkte mathematische Umrechnung aus RGB. Echte Druckfarben hängen von Tinte, Papier und Druckerprofil ab, nutze sie also als Ausgangspunkt und prüfe einen Druckfahnenabzug.
Was verändert der Deckkraft-Regler?
Er stellt die Transparenz von 0 (unsichtbar) bis 100 (deckend) ein. Unter 100 bekommt der HEX-Code zwei zusätzliche Ziffern und RGB wird zu rgba(). Der Kontrast wird für die Farbe geprüft, wie sie auf jedem Hintergrund aussieht.
Wofür ist HSV nützlich, wenn RGB das nicht kann?
HSV trennt den Farbton einer Farbe davon, wie hell und gesättigt sie wirkt. Deshalb geben Malprogramme und Fotoeditoren dir einen Regler für Farbton und einen weiteren für Helligkeit, statt Rot, Grün und Blau nach Augenmaß zu mischen.
Kann ich hier eine Pantone-Farbe bekommen?
Nein. Pantone ist ein lizenziertes Schmuckfarbensystem, das an bestimmte Tinten gebunden ist, keine reine mathematische Umrechnung aus RGB oder CMYK. Nutze den CMYK-Wert als Ausgangspunkt und lass die genaue Übereinstimmung von deiner Druckerei bestätigen.