So benutzt du den Farbwähler
- Farbe wählen mit dem Farbfeld, das die Farbauswahl deines Geräts öffnet, oder Code einfügen ins Textfeld: HEX mit oder ohne
#(3, 4, 6 oder 8 Stellen),rgb()undrgba(),hsl()undhsla()mit Kommas oder Leerzeichen, eine einfache Liste wie31, 78, 121oder einen der 148 CSS-Farbnamen. Die Namen sind englisch wie in CSS:red, nicht „rot“. - Farbe aus einem Bild aufnehmen: Foto, Logo oder Screenshot laden, hineinziehen oder einfügen und die gewünschte Stelle anklicken oder antippen; eine Lupe zeigt die Pixel ringsum. In Chrome, Edge und Opera am Computer nimmt Vom Bildschirm aufnehmen wie eine Pipette jedes Pixel auf deinem Monitor auf.
- Kopieren, was du brauchst. Jedes Farbfeld der Palette kopiert beim Antippen seinen HEX-Code.
Das Bild wird auf deinem Gerät gelesen und nie hochgeladen.
Farbformate erklärt
| Format | Beispiel | Verwendet in |
|---|---|---|
| HEX | #1f4e79 | CSS, HTML, Designprogrammen, Styleguides |
| RGB | rgb(31, 78, 121) | CSS, Bildschirmen, Bildbearbeitung |
| HSL | hsl(209, 59%, 30%) | CSS; leicht von Hand heller oder dunkler zu machen |
| HSV / HSB | hsv(209, 74%, 47%) | Farbwählern in Photoshop, Figma und ähnlichen Programmen |
| CMYK | cmyk(74%, 36%, 0%, 53%) | Druck (nur als grober Ausgangspunkt) |
HEX ist RGB im Sechzehnersystem: Jedes Ziffernpaar ist ein Kanal von 00 bis ff (0–255), also 1f = 1 × 16 + 15 = 31. Eine siebte und achte Stelle fügen Transparenz (Alpha) hinzu, und #abc ist die Kurzform von #aabbcc.
HSL und HSV beginnen mit demselben Farbton, dem Winkel auf dem Farbkreis (0° Rot, 120° Grün, 240° Blau); R, G und B werden dafür auf 0–1 skaliert. Die Helligkeit ist L = (max + min) / 2, die HSL-Sättigung (max − min) / (1 − |2L − 1|). Bei HSV ist der Hellwert einfach V = max und die Sättigung (max − min) / max. Deshalb ist ein voll gesättigtes Rot hsl(0, 100%, 50%), aber hsv(0, 100%, 100%).
CMYK ist hier die Lehrbuchumrechnung: K = 1 − max, dann C = (1 − R − K) / (1 − K), ebenso für M und Y. Druckereien rechnen mit ICC-Profilen für ihr Papier und ihre Farben um – in Deutschland oft mit Profilen der European Color Initiative wie ISO Coated v2 oder PSO Coated v3 –, deshalb weichen ihre Werte ab. Nimm diesen Wert nur als Ausgangspunkt.
Der nächste CSS-Name wird gefunden, indem beide Farben in den CIELAB-Farbraum umgerechnet werden und der kleinste geradlinige Abstand gesucht wird (ΔE, CIE76); ein ΔE von etwa 2,3 wird oft als kleinster Unterschied genannt, den Menschen wahrnehmen.
Rechenbeispiel: #1f4e79
Das voreingestellte Dunkelblau zerfällt in 1f, 4e und 79, also RGB 31, 78, 121. Blau ist der größte Kanal (121 / 255 = 0,475), Rot der kleinste (0,122). Damit ist V = 47 %, die HSV-Sättigung (121 − 31) / 121 = 74 %, die Helligkeit (0,475 + 0,122) / 2 = 30 % und die HSL-Sättigung 59 %. Der Farbton beträgt 208,7°, angezeigt als 209. Die relative Leuchtdichte ist 0,0712; mit weißer Schrift erreicht die Farbe einen Kontrast von 8,66:1 (AAA), mit schwarzer nur 2,42:1. Der nächste benannte Farbton ist steelblue mit einem ΔE von 21 – der Name beschreibt die Farbe also nur grob.
Kontrast und Barrierefreiheit (WCAG 2.2)
Die Kontrastprüfung folgt den Definitionen der Web Content Accessibility Guidelines 2.2 des W3C. Für Websites in Deutschland ist das mehr als eine Empfehlung: Öffentliche Stellen müssen nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) barrierefrei sein, die auf die europäische Norm EN 301 549 und damit auf die WCAG-Kriterien verweist, und seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) auch viele Anbieter von Online-Shops und digitalen Diensten. Ausreichender Kontrast gehört zu den Kriterien, die sich am leichtesten selbst prüfen lassen.
Jeder Kanal wird linearisiert (c / 12,92 bis 0,04045, sonst ((c + 0,055) / 1,055)2,4), die relative Leuchtdichte ist L = 0,2126 R + 0,7152 G + 0,0722 B, und das Kontrastverhältnis ist (Lheller + 0,05) / (Ldunkler + 0,05), von 1:1 bis 21:1.
| Stufe | Normaler Text | Großer Text |
|---|---|---|
| AA (Erfolgskriterium 1.4.3) | 4,5:1 | 3:1 |
| AAA (Erfolgskriterium 1.4.6) | 7:1 | 4,5:1 |
Als großer Text gilt mindestens 18 Punkt (24 CSS-Pixel) oder 14 Punkt fett (etwa 18,7 Pixel). Die Verhältnisse werden auf zwei Nachkommastellen abgeschnitten, nicht gerundet – 4,499:1 erscheint also nie als bestanden –, und eine halbtransparente Farbe wird zuerst über das Weiß oder Schwarz gelegt, mit dem sie verglichen wird.
Abstufungen und Farbharmonien
Aufhellungen mischen die Farbe in 20-%-Schritten mit Weiß, Abdunklungen mit Schwarz – eine fertige Skala für Hover-Zustände, Rahmen und Hintergründe. Die Harmonien behalten Sättigung und Helligkeit und drehen nur den Farbton: Die Komplementärfarbe liegt 180° entfernt, analoge Farben 30° zu beiden Seiten, triadische Farben 120° auseinander, und geteilt-komplementär nutzt 150° und 210°.
Tipps
- Derselbe HEX-Code kann auf zwei Bildschirmen unterschiedlich aussehen (Helligkeit, Nachtmodus, Wide-Gamut-Displays) – die Zahlen bleiben trotzdem gleich.
- Fotos haben selten eine einheitliche Farbe: Aktiviere Mittelwert aus 5 × 5 Pixeln oder vergleiche mehrere Stellen.
- Für Etiketten und Links gibt es den Barcode-Generator und den QR-Code-Generator, für verzierte Schrift den Schriftarten-Generator.
Häufige Fragen
Wie rechne ich HEX in RGB um?
Teile die sechs Stellen in drei Paare und lies jedes Paar als Zahl im Sechzehnersystem: #1f4e79 → 1f = 31, 4e = 78, 79 = 121, also rgb(31, 78, 121). Füge oben einen beliebigen HEX-Code ein, dann bekommst du RGB, HSL, HSV und CMYK auf einmal.
Was ist der Unterschied zwischen HSL und HSV (HSB)?
Beide nutzen denselben Farbtonwinkel. HSL legt reine Farben auf 50 % Helligkeit, und 100 % ist immer Weiß; HSV legt sie auf 100 % Hellwert, und Weiß erreichst du, indem du die Sättigung senkst. CSS verwendet HSL, die Farbwähler von Photoshop und Figma verwenden HSV und nennen es HSB.
Ist der CMYK-Wert druckfertig?
Nein. Er beruht auf der einfachen Umrechnungsformel und weiß nichts über dein Papier, die Druckfarben oder die Druckmaschine. Professionelle Druckvorstufen rechnen mit einem ICC-Farbprofil um; gib der Druckerei den RGB- oder HEX-Wert und bitte um einen Proof, oder nutze einen Pantone- oder CMYK-Wert aus deinem Styleguide.
Wie nehme ich eine Farbe aus einem Bild oder vom Bildschirm auf?
Drück auf Aus einem Bild aufnehmen, wähle eine Datei (oder zieh sie hinein oder füge einen Screenshot ein) und klick oder tippe auf die gewünschte Stelle; ist das Bild ausgewählt, bewegen die Pfeiltasten die Markierung, und Enter übernimmt die Farbe. Vom Bildschirm aufnehmen funktioniert in Chrome, Edge und Opera am Computer; Firefox, Safari und mobile Browser unterstützen es noch nicht, deshalb ist der Knopf dort ausgeblendet.
Wird mein Bild irgendwohin hochgeladen?
Nein. Dein Browser öffnet und liest das Bild selbst; nichts wird an einen Server gesendet.
Zuletzt aktualisiert: 15. Oktober 2026