Farbwähler und Kontrastprüfer
Wählen Sie eine Farbe im Farbkreis, auf dem Bildschirm oder in einem Bild und kopieren Sie den HEX-, RGB-, HSL-, CMYK- oder OKLCH-Code. Prüfen Sie dann, ob Text in dieser Farbe gut lesbar ist, und erhalten Sie hellere und dunklere Abstufungen sowie passende Farben.
Kostenlos · Ohne Anmeldung
So funktioniert es
- Wählen Sie eine Farbe mit der Farbauswahl, geben Sie einen Code ein oder öffnen Sie ein Bild und tippen Sie auf die gewünschte Farbe.
- Passen Sie sie mit den Reglern für Farbton, Sättigung, Helligkeit und Deckkraft an.
- Kopieren Sie den benötigten Code: HEX, RGB, HSL, HSV, CMYK oder OKLCH.
- Wählen Sie einen Hintergrund, um den WCAG-Kontrast zu prüfen, und übernehmen Sie bei schlecht lesbarem Text die vorgeschlagene Farbe.
Warum dieses Tool
Vom Bildschirm oder aus Bildern
Nutzen Sie die Pipette des Browsers, wo verfügbar, oder öffnen Sie ein Foto oder einen Screenshot und tippen Sie auf ein Pixel.
Alle gängigen Formate
HEX, RGB, HSL, HSV, CMYK und OKLCH, jeweils mit Kopierknopf, dazu der nächste CSS-Farbname.
WCAG-Kontrastprüfung
Kontrastverhältnis mit AA- und AAA-Ergebnis für normalen und großen Text, Symbole und Eingaberahmen.
Korrekturvorschlag
Fällt der Text durch, findet das Tool die nächste hellere oder dunklere Variante Ihrer Farbe, die besteht.
Abstufungen und Harmonien
Je neun hellere und dunklere Stufen sowie komplementäre, analoge, triadische und Quadrat-Farbschemata.
Privat und kostenlos
Bilder werden in Ihrem Browser gelesen und nie hochgeladen. Ohne Anmeldung und ohne Limits.
Farbcodes erklärt
Dieselbe Farbe lässt sich auf mehrere Arten schreiben. Hier ist #3366CC, das Beispiel-Blau dieser Seite, in allen Formaten des Tools:
| Format | Beispiel | Verwendet für |
|---|---|---|
| HEX | #3366CC | Webdesign und CSS, Markenrichtlinien |
| RGB | rgb(51 102 204) | Bildschirme, CSS und die meisten Design-Apps |
| HSL | hsl(220 60% 50%) | CSS, Helligkeit oder Sättigung von Hand anpassen |
| HSV (HSB) | hsv(220, 75%, 80%) | Farbwähler in Photoshop, Figma und ähnlichen Apps |
| CMYK | cmyk(75%, 50%, 0%, 20%) | Grober Ausgangspunkt für den Druck |
| OKLCH | oklch(53.2% 0.168 262.3) | Modernes CSS, Paletten mit gleichmäßigen Helligkeitsstufen |
HEX in RGB umrechnen
Ein HEX-Code besteht aus drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau. Jedes Paar ist eine Zahl von 00 bis FF, also 0 bis 255 im Dezimalsystem. Zum Umrechnen multiplizieren Sie die erste Ziffer mit 16 und addieren die zweite; A bis F stehen für 10 bis 15:
- Rot: 33 ist 3 × 16 + 3 = 51.
- Grün: 66 ist 6 × 16 + 6 = 102.
- Blau: CC ist 12 × 16 + 12 = 204.
- #3366CC ist also rgb(51 102 204). Ein Kurzcode wie #36C verdoppelt jede Ziffer und ist dieselbe Farbe. Ein achtstelliger Code wie #3366CC80 enthält zusätzlich die Deckkraft: rgb(51 102 204 / 0.5).
Kontrast-Anforderungen nach WCAG
Die Web Content Accessibility Guidelines (WCAG) messen Kontrast als Verhältnis von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Es wird als (L1 + 0,05) ÷ (L2 + 0,05) berechnet, wobei L1 und L2 die relative Leuchtdichte der helleren und der dunkleren Farbe sind. Die Mindestwerte:
| Stufe | Normaler Text | Großer Text | Symbole und Eingaberahmen |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | – |
Gängige Farben auf Weiß und Schwarz
Viele beliebte Farben sind schlechter lesbar, als sie wirken. Ergebnisse für Text auf weißem und auf schwarzem Hintergrund:
| Farbe | Auf Weiß | Auf Schwarz |
|---|---|---|
| Rot #FF0000 | 3,99:1 (AA nicht erfüllt) | 5,25:1 (AA erfüllt) |
| Orange #FFA500 | 1,97:1 (AA nicht erfüllt) | 10,63:1 (AA erfüllt) |
| Grün #008000 | 5,13:1 (AA erfüllt) | 4,08:1 (AA nicht erfüllt) |
| Blau #0000FF | 8,59:1 (AA erfüllt) | 2,44:1 (AA nicht erfüllt) |
| Grau #767676 | 4,54:1 (AA erfüllt) | 4,62:1 (AA erfüllt) |
| Grau #777777 | 4,47:1 (AA nicht erfüllt) | 4,68:1 (AA erfüllt) |
| Blau (Beispiel) #3366CC | 5,36:1 (AA erfüllt) | 3,91:1 (AA nicht erfüllt) |
Farbe aus einem Bild oder vom Bildschirm aufnehmen
Um den Code einer Farbe aus einem Logo, Foto oder Screenshot zu finden, wählen Sie Aus Bild aufnehmen und tippen auf die gewünschte Stelle. Das Bild wird in Ihrem Browser gezeichnet und nicht hochgeladen.
- Vergrößern Sie kleine Details vorher, denn ein Pixel am Rand eines Buchstabens ist oft eine Mischung aus zwei Farben.
- Fotos haben Rauschen und Schatten. Tippen Sie daher auf mehrere benachbarte Stellen und vergleichen Sie die Codes.
- Vom Bildschirm aufnehmen nutzt die Pipette des Browsers, die manche Browser, darunter die meisten mobilen, nicht anbieten. Fehlt der Knopf, machen Sie einen Screenshot und öffnen ihn mit Aus Bild aufnehmen.
Häufige Fragen
Wie finde ich den HEX-Code einer Farbe in einem Bild?
Wählen Sie Aus Bild aufnehmen, öffnen Sie das Foto oder den Screenshot und tippen Sie auf die Farbe. HEX, RGB und die anderen Codes erscheinen sofort, jeweils mit Kopierknopf. Das Bild bleibt auf Ihrem Gerät.
Welches Kontrastverhältnis braucht Text?
WCAG-Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text, also etwa 24 px oder etwa 18,7 px fett. Symbole und Eingaberahmen brauchen 3:1. Stufe AAA erhöht die Werte für Text auf 7:1 und 4,5:1.
Sind HEX und RGB dieselbe Farbe?
Ja. Beides sind Schreibweisen für dieselben Rot-, Grün- und Blauwerte. #3366CC und rgb(51 102 204) sind exakt dieselbe Farbe, Sie können also verwenden, was Ihre App oder Ihr Code erwartet.
Muss meine Website nach dem BFSG barrierefrei sein?
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für viele Unternehmen, die Verbrauchern digitale Produkte und Dienstleistungen anbieten, zum Beispiel Online-Shops. Ausgenommen sind nur Kleinstunternehmen, die Dienstleistungen anbieten (weniger als zehn Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz). Maßstab ist die Norm EN 301 549 und damit WCAG 2.1 Stufe AA, also auch 4,5:1 für normalen Text. Ob Ihr Angebot betroffen ist, klären Sie im Zweifel mit einer Fachberatung.
Warum sieht meine CMYK-Farbe im Druck anders aus?
Bildschirme mischen Licht (RGB), Drucker mischen Farbe (CMYK), und nicht jede leuchtende Bildschirmfarbe ist druckbar. Dieses Tool nutzt die einfache Standardformel ohne Farbprofil. Fragen Sie Ihre Druckerei nach den genauen Werten für deren Maschine und Papier.
Was ist OKLCH?
OKLCH beschreibt eine Farbe über Helligkeit, Chroma (Buntheit) und Farbton, auf einer Skala, die der menschlichen Wahrnehmung folgt. Zwei Farben mit gleicher OKLCH-Helligkeit wirken etwa gleich hell, was gleichmäßige Paletten erleichtert. Aktuelle Browser unterstützen oklch() in CSS.
Werden meine Bilder oder Farben hochgeladen?
Nein. Alles läuft in Ihrem Browser. Auf diesem Gerät werden nur Ihre zuletzt verwendeten Farben und die Hintergrundfarbe gespeichert, und Sie können sie jederzeit löschen.
Barrierefreie Farben für Ihre Website wählen
Ähnliche Tools
Möchtest du etwas bauen?
Sag uns, was du erstellen möchtest.
Sag uns, was du entwickeln lassen möchtest - von einer einfachen Website bis zu einer kompletten App, KI-Lösung, Automatisierung oder individuellen Software.