Exakte Farben aus jedem Screenshot auslesen
In Designdateien entstehen Farben, in Screenshots landen sie – und beide stimmen nicht immer überein. Dieses Tool liest die tatsächlichen Pixel jedes Bildes, das du hineinziehst. So ermittelst du den Hex-Code einer Farbe direkt aus dem Bild, statt zu raten. Alles läuft über Canvas-APIs in deinem Browser, die Farben werden direkt aus den decodierten Pixeln gelesen.
So verwendest du die Farbpipette
- Bild hinzufügen. Ziehe eine Datei in das Feld, klicke zum Auswählen oder füge einen Screenshot mit ⌘V direkt aus der Zwischenablage ein. Am Handy tippst du auf die Karte und wählst ein Foto.
- Mit der Lupe zielen. Bewege die Maus über das Bild oder lege am Handy den Finger darauf und halte ihn dort: Die Lupe vergrößert ein Raster von 11 × 11 Pixeln rund um den Punkt und zeigt live den Hex-Wert an – so triffst du genau das Pixel, das du meinst.
- Aufnehmen und nachjustieren. Klicke – oder hebe den Finger –, um die Farbe aufzunehmen. Jede Farbe landet in der Verlaufsleiste und wird als HEX, RGB und HSL angezeigt, jeweils mit einer Taste zum Kopieren. Die Pfeiltasten (oder die Pfeile auf dem Bildschirm) verschieben den Messpunkt Pixel für Pixel.
- Palette übernehmen. Schon beim Laden werden die sechs dominanten Farben extrahiert – ein Generator für Farbpaletten aus Bildern ist also gleich eingebaut. Klicke auf ein Farbfeld, um seinen Hex-Code zu kopieren.
In Chromium-Browsern erscheint zusätzlich die Taste „Vom Bildschirm aufnehmen“: eine Online-Pipette, die jedes Pixel ausliest, das auf deinem Display zu sehen ist – auch außerhalb des Bildes.
Wann das Bild mehr verrät als die Designdatei
Der häufigste Fall: das fertige Ergebnis mit der Vorgabe abgleichen. Laut Design hat die Schaltfläche die Farbe #2F6BFF; der Screenshot aus der Qualitätssicherung zeigt, was tatsächlich live gegangen ist, nachdem Themes, Deckkraft und Ebenenmischung mitgeredet haben. Ein Klick in den Screenshot klärt das in Sekunden. Der andere große Fall: eine Palette zurückgewinnen, wenn es gar keine Quelldatei gibt – ein altes Design, dessen Figma-Datei längst verschwunden ist, die Landingpage der Konkurrenz, ein Plakat, das du fotografiert hast. Die automatische Palette liefert dir ehrliche Ausgangsfarben und mit der Lupe holst du exakte Werte aus den einfarbigen Flächen.
Farbprüfungen kommen selten allein. Geht derselbe Screenshot in einen Fehlerbericht, markiere die Abweichung mit unserem Tool „Screenshot beschriften“; landet er in einer Präsentation, setze ihn mit unserem Tool „Screenshot-Mockup“ in Szene.
HEX, RGB und HSL auf einen Blick
HEX
Ein Hex-Code ist die sechsstellige hexadezimale Schreibweise einer Farbe – je zwei Stellen für Rot, Grün und Blau. #2F6BFF bedeutet also 47 Rot, 107 Grün, 255 Blau. Hex ist die Standardwährung von CSS, Designtools und Markenrichtlinien – kopiere den Code, um eine Farbe unverändert von einem Tool ins andere zu bringen.
RGB
rgb(47, 107, 255) schreibt dieselben drei Kanäle dezimal aus, jeweils 0–255. Das ist genauso präzise wie Hex, nur leichter zu lesen und Kanal für Kanal anzupassen – und lässt sich ganz natürlich zu rgba() erweitern, sobald Transparenz ins Spiel kommt.
HSL
HSL beschreibt Farbe so, wie Menschen über sie denken: den Farbton als Winkel auf dem Farbkreis, dazu Sättigung und Helligkeit in Prozent – hsl(223, 100%, 59%) ist dasselbe Blau. Kopiere HSL, wenn du Hover-Zustände oder hellere und dunklere Abstufungen ableiten willst: Helligkeit ändern, Farbton behalten.
Warum ein ausgelesenes Pixel vom CSS-Wert abweichen kann
Zwei Effekte sorgen für die meisten Überraschungen. Der erste ist Antialiasing: Am Rand von Text oder einer abgerundeten Ecke mischt der Renderer Vorder- und Hintergrund, sodass Randpixel zu keiner der beiden Farben gehören. Genau dafür gibt es die Lupe – mit ihr gehst du vom Rand weg und nimmst die Farbe aus einer einfarbigen Fläche auf. Der zweite ist das Farbmanagement: Ein Screenshot von einem Display mit erweitertem Farbraum (aktuelle Macs kennzeichnen Aufnahmen als Display P3) durchläuft eine Profilumwandlung, bevor seine Pixel diese Seite erreichen, und dabei kann sich ein Kanal um ein, zwei Punkte verschieben. Beides ist kein Fehler, sondern gibt ehrlich wieder, was der Bildschirm gezeigt hat. Wenn es auf Genauigkeit ankommt, nimm Farben aus der Mitte einfarbiger Flächen auf, und zwar in Screenshots vom selben Rechner.
Am meisten helfen saubere Ausgangsbilder. Am Mac überspringt Snapix mit „Farbe aufnehmen“ (⌃⌥C) die Datei ganz: Die Funktion liest jedes Pixel auf dem Bildschirm unter einer Vergrößerungslupe aus und kopiert seinen Hex-Code – ohne Export und ohne Komprimierung dazwischen.