So greifen Sie Farben aus einem Screenshot ab (2026)

Ein Screenshot ist oft das Einzige, was Sie haben. Sie können das CSS der Seite nicht öffnen, Sie können die App nicht inspizieren, Sie haben die Designdatei nicht – aber Sie sehen die Farben auf dem Bildschirm, und ein Screenshot friert sie in ein Bild ein, das Sie abtasten können. So ziehen Sie exakte Farbcodes heraus.

Warum ein Screenshot die ehrliche Quelle ist

Wenn Sie eine gerenderte Seite oder App per Screenshot festhalten, erfassen Sie die Farben so, wie sie tatsächlich erscheinen – nachdem jeder Verlauf, jede Überlagerung und jede Deckkraft angewendet wurde. Das ist oft wahrhaftiger als der Quellwert. Eine Karte, die als #000000 mit 90 % Deckkraft über einem grauen Hintergrund definiert ist, ist auf dem Bildschirm nicht schwarz; sie ist ein bestimmtes dunkles Grau. Den Code zu inspizieren gibt Ihnen das Rezept; den Screenshot abzutasten gibt Ihnen die Farbe, die ein Nutzer wirklich sieht. Wenn Sie diesen Look nachbilden, ist der Screenshot das, was Sie auslesen möchten.

Eine Farbe in drei Schritten abgreifen

1. Screenshot machen und laden. Erfassen Sie den Bildschirm (oder den Bereich, der Sie interessiert) und ziehen Sie das Bild in den Farbwähler.
2. Auf das Pixel schweben. Eine Lupe folgt Ihrem Cursor und vergrößert den Bereich darunter, sodass Sie präzise landen – selbst auf einem dünnen Rand oder einem kleinen Icon.
3. Klicken zum Speichern, dann kopieren. Jeder Klick behält die Farbe als Muster mit ihrem HEX-, RGB- und HSL-Wert, jeweils mit einer Kopieren-Schaltfläche. Kopieren Sie das benötigte Format und fügen Sie es in Ihr Stylesheet oder Design-Tool ein.

Screenshot-spezifische Dinge, auf die Sie achten sollten

Screenshots haben Eigenheiten, die ein Farbmuster verfälschen können, und sie sind leicht zu vermeiden, sobald Sie sie kennen:

• Als PNG speichern, nicht als JPEG. JPEG-Kompression verschmiert Farben leicht, besonders an Kanten und in flachen Bereichen, sodass ein abgetasteter Wert vom echten abweichen kann. PNG ist verlustfrei und hält jedes Pixel exakt – die meisten Screenshot-Tools des Betriebssystems nutzen ohnehin standardmäßig PNG.
• Achten Sie auf die Zoomstufe. Ein Screenshot, der bei einem anderen Browser- oder OS-Zoom als 100 % gemacht wurde, ist skaliert, und Skalieren mischt benachbarte Pixel. Für das sauberste Muster erfassen Sie bei 100 %.
• Meiden Sie Kanten und Text. Kantenglättung bedeutet, dass die Pixel entlang jeder Kante Mischungen sind, nicht die echte Farbe. Tasten Sie aus der Mitte einer einfarbigen Fläche ab – die Lupe hilft Ihnen zu sehen, dass Sie von der unscharfen Grenze entfernt sind.
• Achten Sie auf Subpixel-Textfarbe. Zoomen Sie in gerenderten Text, und Sie sehen Farbränder, die nicht der echte Wert des Textes sind. Greifen Sie Farben aus Füllungen und Hintergründen ab, nicht aus Buchstabenstrichen.

HEX, RGB und HSL lesen

Jedes Muster zeigt alle drei Formate auf einmal:

• HEX (#3A7BD5) – der Standard für CSS und Design-Tools.
• RGB (rgb(58, 123, 213)) – Kanalwerte, praktisch, wenn Sie rgba-Transparenz brauchen.
• HSL (hsl(215, 65%, 53%)) – Farbton, Sättigung, Helligkeit, am besten, wenn Sie die Farbe anpassen statt exakt kopieren wollen.

Sie tasten nicht neu ab, um zu wechseln – dieselbe Farbe ist bereits in allen dreien da.

Ein ganzes Schema in einem Durchgang abgreifen

Aus einem Screenshot können Sie ein ganzes Farbschema rekonstruieren: Klicken Sie die Kopfzeilenfarbe an, die Schaltfläche, den Link, den Hintergrund, den gedämpften Text. Jede stapelt sich in der Liste, sodass Sie den vollen Satz in einer Sitzung ziehen und der Reihe nach kopieren können.

Wenn Sie stattdessen die Gesamtpalette eines Bildes zusammengefasst haben möchten – die Handvoll dominierender Töne – ist das eine andere Aufgabe, und das Paletten-Tool von img.diy extrahiert sie automatisch. Dieser Farbwähler ist zum Zeigen auf ein bestimmtes Pixel im Screenshot; das Paletten-Tool ist zum Charakterisieren des Bildes als Ganzes.

Nichts verlässt Ihren Rechner

Screenshots enthalten oft Dinge, die Sie lieber nicht hochladen würden – ein internes Dashboard, einen privaten Entwurf, die unveröffentlichte Oberfläche eines Kunden. Hier wird das Bild lokal in Ihrem Browser von einem Canvas gelesen: Nichts wird irgendwohin gesendet, es gibt kein Konto, und es funktioniert nach dem ersten Laden offline. Sie bekommen die Farben, ohne dass der Screenshot je Ihr Gerät verlässt.

Machen Sie den Screenshot, schweben Sie auf das Pixel, klicken Sie und kopieren Sie.