Blog

Farben und Abstände aus einem Screenshot messen

Veröffentlicht 25. Oktober 2026 · Farbwähler, Abstände, Design, Screenshot

Prüfe einen Hex-Wert, einen 1-px-Rahmen oder den genauen Abstand zweier Elemente, ohne ein Design-Tool zu öffnen. Lupe, Farbwähler und Auswahlgröße reichen dafür.

Ein Screenshot ist oft die einzige verlässliche Quelle, die du hast: ein Bugreport von Kundschaft, die UI eines Wettbewerbers, ein Design, das anders umgesetzt wurde als im Mockup. Exakte Farben und Abstände daraus abzulesen ist eine kleine Fertigkeit – und InSnap legt die Werkzeuge direkt in die Aufnahme, wo das Bild ohnehin liegt.

Die Farbe unter dem Mauszeiger aufnehmen

Bei InSnap aktivierst du den Farbwähler unter Einstellungen › Screenshot und machst dann einen Screenshot. Während du über das eingefrorene Bild fährst, zeigt das Farbfeld den Wert unter dem Mauszeiger.

• Shift wechselt zwischen RGB und HEX.
• C kopiert den aktuellen Wert in die Zwischenablage.
• Die Probe stammt aus dem eingefrorenen Screenshot, nicht vom Live-Bildschirm – der Wert ändert sich also nicht, wenn darunter ein Video oder eine Animation läuft.

Der letzte Punkt zählt beim Design-QA: Du misst die Pixel, die aufgenommen wurden – genau das, was in der Datei steht.

Ein einzelnes Pixel mit der Lupe lesen

Die Lupe zeigt ein vergrößertes Raster um den Mauszeiger, mit markiertem Mittelpunkt-Pixel. Nutze sie, wenn die Frage nicht „Welche Farbe hat dieser Bereich?“ lautet, sondern „Was passiert an genau diesem Pixel?“:

• Ist das ein 1-px-Rahmen oder ein Schatten?
• Ist die Trennlinie ein Pixel oder zwei?
• Sitzt das Symbol auf der Textgrundlinie?
• Ist der Eckenradius an allen vier Ecken gleich?

Bei normaler Zoomstufe verschwinden diese Details im Antialiasing. Im Pixelraster lassen sie sich abzählen.

Abstände mit einer Auswahl messen

Ein Lineal-Werkzeug gibt es nicht, aber die Auswahl ist eines. Ziehe einen Rahmen über den Abstand, den du messen willst, und lies die Größenangabe ab:

1. Starte die Aufnahme und ziehe vom Rand des einen Elements zum Rand des nächsten.
2. Lies Breite oder Höhe in der Größenangabe ab. Sie nennt physische Pixel – das, was in der Datei steht.
3. Drücke Esc zum Abbrechen oder kopiere die Auswahl, wenn du das Bild zusätzlich brauchst.

Zwei praktische Hinweise:

• Miss den Abstand, nicht das ganze Element. Eine Auswahl von der linken Kante einer Schaltfläche bis zur linken Kante der nächsten ergibt den Teilungsabstand; zieh die Breite der Schaltfläche ab, wenn du den reinen Zwischenraum brauchst.
• Achte auf die Bildschirmskalierung. Auf einem Retina-Display sind 20 physische Pixel 10 Punkte. Wenn das Design in Punkten angegeben ist, teile durch den Skalierungsfaktor; der Screenshot ist immer in Pixeln.

Eine kurze Design-QA-Checkliste

Wenn ein Screenshot nicht reicht

Pixel zeigen, was gerendert wurde, nicht warum. Wenn eine Farbe falsch wirkt, prüfe das Displayprofil und das Theme der App, bevor du einen Bug meldest; wenn ein Abstand daneben liegt, prüfe die Zoomstufe der Seite. Ein Screenshot bei 90 % Browser-Zoom meldet Größen, die nicht zum CSS passen.

Für einen Vergleich nimmst du beide Zustände getrennt auf und heftest beide an: Die angehefteten Fenster bleiben über der App, sodass du zwischen Mockup und Umsetzung wechseln kannst, ohne die Stelle zu verlieren.

Häufige Fragen

Kann ich den Farbwert direkt kopieren?

Ja. Aktiviere den Farbwähler, fahre über das Pixel, drücke Shift für RGB oder HEX und dann C. Der Wert landet in der Zwischenablage und lässt sich direkt in ein Ticket oder eine Designdatei einfügen.

Wie messe ich einen Abstand in Punkten statt in Pixeln?

Lies die Auswahlgröße in physischen Pixeln ab und teile durch die Bildschirmskalierung: 2 auf einem Retina-Display, 1 auf einem Standarddisplay, oder den Wert, den die Bildschirmeinstellungen für einen skalierten Modus anzeigen.

Liest der Farbwähler den Live-Bildschirm oder den Screenshot?

Den Screenshot. Die Aufnahme wird beim Drücken des Tastenkürzels eingefroren, und der Farbwähler beprobt genau diese Pixel – der Wert entspricht also der Datei, die du sicherst oder teilst.

Mehr aus dem Blog