Farbwähler: Exakte Farbcodes aus jedem Bild oder vom Bildschirm

So verwenden Sie den Farbwähler

1. Bild laden. Ziehen Sie eine Datei hinein, wählen Sie eine aus oder fügen Sie einen Screenshot aus der Zwischenablage ein. PNG, JPEG, WebP, GIF, AVIF, BMP und SVG bis 40 MB funktionieren überall; HEIC nur dort, wo Ihr Browser es öffnen kann, und eine Datei, die er nicht öffnen kann, bekommt eine verständliche Meldung statt eines leeren Bildschirms. Das Tool tastet die Bitmap in voller Auflösung ab, nicht die skalierte Kopie, die Sie auf dem Bildschirm sehen. Nur Bilder über 16,7 Megapixel werden aus einer verkleinerten Kopie gelesen, und das Tool sagt es Ihnen. Außerdem listet es die dominanten Farben des Bildes mit ihrem Anteil auf.
2. Mit der Lupe zielen. Die Lupe zeigt das Pixelraster um Ihren Mauszeiger oder Finger, sodass Sie sehen, ob Sie auf einer einfarbigen Fläche oder auf einer geglätteten Kante stehen. Per Tastatur bewegen die Pfeiltasten den Aufnahmepunkt um ein Pixel (Umschalt: zehn), mit Enter nehmen Sie ihn auf.
3. Messfläche wählen. 1 Pixel liefert den Rohwert; ein Mittelwert aus 3×3 oder 5×5 glättet JPEG-Rauschen und Filmkorn. Ich nehme 1 Pixel für Logos und Oberflächen, einen Mittelwert für Fotos.
4. Oder vom Bildschirm aufnehmen. In Chromium-Browsern am Computer (Chrome, Edge, Opera) können Sie mit der Pipette-Schaltfläche jedes Pixel Ihres Displays anklicken, auch außerhalb des Browserfensters. Firefox und Safari haben diese Funktion nicht; das Tool sagt es und verweist Sie auf den Weg über das Bild.
5. Oder einen Code eingeben. Fügen Sie #1d4ed8 (3, 4, 6 oder 8 Stellen), rgb(29 78 216), hsl(224 76% 48%), einen hsv()-, oklch()- oder cmyk()-Wert oder einen CSS-Farbnamen ein, und alle anderen Formate aktualisieren sich. Ein Schalter stellt die Ausgabe zwischen modernem CSS mit Leerzeichen und der klassischen Schreibweise mit Kommas um.
6. Sammeln und exportieren. Legen Sie Treffer auf der Palette ab, die in Ihrem Browser gespeichert wird, und kopieren oder laden Sie sie als CSS Custom Properties, SCSS, JSON oder einfache HEX-Liste herunter.

HEX, RGB, HSL, HSV und OKLCH: welchen Code Sie nehmen sollten

OKLCH stammt aus dem CSS Color Module Level 4 und ist die zylindrische Form des Oklab-Farbraums. Seine L-Achse ist darauf ausgelegt, der empfundenen Helligkeit einer Farbe zu folgen – genau das, was die HSL-Helligkeit falsch macht. Reines Gelb und reines Blau haben in HSL beide L 50%, doch für das Auge ist das eine fast weiß und das andere dunkel:

Darum baue ich jede Abstufung in OKLCH: Gleiche Schritte in L sehen über alle Farbtöne hinweg gleich aus, und der Textkontrast wird weit berechenbarer.

Rechenbeispiel: #1D4ED8 umrechnen

HEX nach RGB. In Paare teilen und jedes zur Basis 16 lesen:

RGB nach HSL. Auf 0–1 skalieren: R = 0,1137; G = 0,3059; B = 0,8471. Max = 0,8471 (Blau), Min = 0,1137, Differenz d = 0,7333.

RGB nach HSV. V = max = 84,7 %; S = d / max = 0,7333 / 0,8471 = 86,6 %; der Farbton ist derselbe 224,3°, also hsv(224.3 86.6% 84.7%).

RGB nach CMYK. K = 1 − max(R, G, B) = 1 − 0,8471 = 15,3 %; dann C = (1 − R − K) / (1 − K) = 86,6 %, M = 63,9 %, Y = 0 %, angezeigt als cmyk(87% 64% 0% 15%). Das ist schlichte Arithmetik, kein Druckprofil.

RGB nach OKLCH. Jeder Kanal wird linearisiert (die sRGB-Gammakurve wird rückgängig gemacht), über zwei feste Matrizen mit einer Kubikwurzel dazwischen nach Oklab umgerechnet, dann werden a und b zu Chroma und Farbton. Das Ergebnis ist oklch(48.82% 0.2172 264.38), was CSS auch als oklch(0.4882 0.2172 264.38) akzeptiert. Der OKLCH-Farbton (264°) weicht vom HSL-Farbton (224°) ab, weil die Farbkreise unterschiedlich aufgebaut sind.

Warum eine aufgenommene Farbe um ein paar Werte abweichen kann

Zwei Personen können bei derselben Markenfarbe #1D4ED8 und #1E4FD6 erhalten, ohne dass eines der Tools falsch liegt:

• JPEG-Kompression speichert Farbe in reduzierter Auflösung und in 8×8-Blöcken, daher schwanken benachbarte Pixel in einer einfarbigen Fläche um einige Einheiten. Lauten neun Rotwerte 27, 29, 31, 28, 30, 29, 26, 32, 29, ist ihr Mittelwert 261 ÷ 9 = 29, und das ist mit größter Wahrscheinlichkeit der Wert aus dem Entwurf.
• Skalierte Screenshots mischen Pixel. Ein auf halbe Größe verkleinerter Retina-Screenshot vermischt jeden 2×2-Block, sodass dünne Schrift und Kanten zu Zwischenfarben werden.
• Kantenglättung an Rändern und Schrift erzeugt Übergangspixel, die zu keiner der beiden Farben gehören. Nehmen Sie die Farbe aus der Mitte einer einfarbigen Fläche auf, nie vom Rand.
• Die Bildschirm-Pipette liefert, was angezeigt wird, nach Farbmanagement und Funktionen wie Night Shift oder True Tone, und sie meldet einen sRGB-HEX-Wert. Der Wert in der Datei kann abweichen; für exakte Werte nehmen Sie die Farbe aus dem Bild selbst auf.

Transparenz. In #1D4ED880 ist das letzte Paar der Alphawert: 80 hex = 128, und 128 ÷ 255 = 0,502, also etwa 50 % Deckkraft. Alpha steht in CSS zuletzt; das ARGB von Android stellt es an den Anfang, eine häufige Verwechslung. Was Sie sehen, hängt vom Hintergrund ab: Über Weiß wird jeder Kanal zu 0,502 × Farbe + 0,498 × 255, was etwa #8EA6EB ergibt. Das Tool behält den Alphawert von PNG, WebP und anderen Formaten, die ihn haben, und warnt Sie, wenn das aufgenommene Pixel nicht vollständig deckend ist. Ein vollständig transparentes Pixel wird als transparent gemeldet, statt fälschlich als Schwarz gelesen zu werden, und Mittelwerte werden nach Alpha gewichtet, damit durchscheinende Pixel das Ergebnis nicht Richtung Schwarz ziehen.

Abstufungen, Aufhellungen und Paletten

Klassisch ist eine Aufhellung eine mit Weiß gemischte Farbe, eine Abdunklung eine mit Schwarz und eine Abtönung eine mit Grau. Mischen in RGB ergibt ungleichmäßige Stufen, deshalb behält die Abstufung hier Farbton und Chroma in OKLCH und verschiebt die Helligkeit in zehn gleichen Schritten von L 96 % hinunter auf 24 %; das Chroma wird nur dort reduziert, wo eine Farbe außerhalb des sRGB-Gamuts läge, und die Stufe, die Ihrer Farbe am nächsten liegt, ist markiert. Die Zeilen für Aufhellung, Abdunklung und Abtönung sind einfache sRGB-Mischungen mit Weiß, Schwarz und mittlerem Grau in 10-%-Schritten, praktisch für schnelle Hover- und Deaktiviert-Zustände. Sie können die Abstufung als CSS-Variablen kopieren oder direkt in CSS mit der Syntax für relative Farben weiterarbeiten, etwa oklch(from var(--brand) calc(l + 0.15) c h).

Zu jeder Farbe nennt das Tool außerdem die nächste der 148 CSS-Farbnamen, die alle in sRGB liegen, wobei der Abstand in OKLab gemessen wird, und sagt Ihnen, ob die Übereinstimmung exakt ist (#663399 ist exakt rebeccapurple, #808080 ist gray, auch grey geschrieben) oder nur die nächste (#1D4ED8 liegt am nächsten bei royalblue).

Sechs Farbharmonien entstehen durch Drehen des Farbtons: komplementär, analog, triadisch, geteilt komplementär, tetradisch und quadratisch. Tetradisch ist hier das Rechteck (+60°, +180°, +240°), nicht das Quadrat (+90°, +180°, +270°). Für #1D4ED8 ist das Komplement #D8A71D, die zweite tetradische Farbe #A71DD8 und die zweite Quadratfarbe #D81DAC. Jeder Satz lässt sich als CSS-Variablen kopieren.

Kontrast nach WCAG prüfen

Das WCAG-Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren Farbe ist und L2 die der dunkleren. Die Leuchtdichte beträgt 0,2126 R + 0,7152 G + 0,0722 B auf linearisierten sRGB-Kanälen, weshalb Grün zehnmal so viel zählt wie Blau.

• AA: 4,5:1 für normalen Text, 3:1 für großen Text (mindestens 18 pt oder 14 pt fett).
• AAA: 7:1 für normalen Text, 4,5:1 für großen Text.
• Kontrast bei Nicht-Text für Icons, Eingaberahmen und Fokusringe: 3:1.

WCAG verlangt, dass das berechnete Verhältnis nicht gerundet wird, daher besteht 4,499:1 die Marke 4,5:1 nicht. Der klassische Fall sind zwei benachbarte Grautöne auf Weiß. Für #767676: 76 hex = 118, 118 ÷ 255 = 0,4627, linearisiert ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812, Verhältnis 1,05 / 0,2312 = 4,54:1. Für #777777: linearer Wert 0,1845, Verhältnis 1,05 / 0,2345 = 4,48:1.

Der Prüfer im Farbwähler verwendet genau diese Formel. Er zeigt das Verhältnis, fünf Badges mit „Bestanden“ oder „Nicht bestanden“ (AA und AAA für normalen und großen Text sowie 3:1 für UI-Elemente und Icons), ein Messgerät und eine Live-Vorschau. Das Verhältnis hat zwei Nachkommastellen, doch wenn die Rundung eine Schwelle überschreiten würde, zeigt er drei, sodass #007BC8 auf Weiß 4,499:1 anzeigt und nicht besteht, statt eines irreführenden 4,50. Halbtransparenter Text wird vor der Messung über den Hintergrund gemischt. Besteht ein Paar AA nicht, schlägt das Tool die nächste Farbe vor, die besteht: Es behält Farbton und Chroma in OKLCH und verschiebt nur die Helligkeit, sodass aus #777777 auf Weiß #767676 wird.

Unser Beispielblau #1D4ED8 auf Weiß ergibt 6,70:1: für Fließtext nach AA in Ordnung, für AAA zu wenig. In meiner eigenen Arbeit peile ich 4,5:1 für allen Text an, auch für große Überschriften, weil die Reserve billige Displays und helle Räume abdeckt.

So arbeitet der Farbwähler und so wird er geprüft

Bilder werden auf Ihrem Gerät in ein Canvas dekodiert und Pixel für Pixel gelesen; nichts wird an einen Server gesendet, und die Palette (bis zu 48 Farben) liegt nur in Ihrem Browser. Die Bildschirm-Pipette nutzt die EyeDropper API, die eine sichere (HTTPS-)Seite und einen Klick zum Start braucht und nur in Chromium-basierten Browsern funktioniert; in Firefox und Safari nehmen Sie den Weg über das Bild. Die Umrechnungen folgen den Formeln aus CSS Color 4 für sRGB, HSL, HSV und OKLCH. Werte werden nur zur Anzeige gerundet (HSL und HSV auf eine Nachkommastelle; OKLCH-Helligkeit als Prozentwert mit zwei Nachkommastellen, Chroma auf vier und Farbton auf zwei); ob der Kontrast besteht, wird am ungerundeten Verhältnis entschieden. CMYK nutzt die einfache Formel K = 1 − max(R, G, B) ohne ICC-Profil, betrachten Sie es also als Näherung.

Weiterlesen (Ratgeber auf Englisch)

• So nehmen Sie eine Farbe aus einem Bild auf
• HEX, RGB, HSL und OKLCH erklärt
• Farbkontrast für Barrierefreiheit