Sie haben ein Bild und brauchen eine Zahl daraus: den Hex-Code einer bestimmten Farbe. Vielleicht ist es ein Logo, dessen Markenvorgabe längst weg ist, ein Screenshot einer Seite, deren Blau Sie treffen wollen, oder ein Foto mit einem Ton, den Sie wiederverwenden möchten. Zu tippen, was Sie denken, dass die Farbe ist, funktioniert nicht – Ihr Auge kann #3A7BD5 nicht von einem Bildschirm ablesen, und die Farbe, die richtig aussieht, ist meist ein paar Stellen daneben. So lesen Sie den tatsächlichen Wert direkt aus den Pixeln.
Warum Raten nie ganz klappt
Ein einzelnes „Blau" auf dem Bildschirm ist eigentlich eine Streuung nahezu identischer Blautöne, und die Helligkeit und Kalibrierung Ihres Monitors verschieben sie weiter. Wählen Sie nach Auge, landen Sie nah, aber falsch – nah genug, dass die Abweichung lästig, aber nicht offensichtlich ist, Sie verbrennen also zehn Minuten damit, sich zu fragen, warum der Button nicht zum Header passt. Die Lösung ist, das Raten zu lassen und die Zahl zu lesen, die der Pixel tatsächlich speichert.
Den Code in drei Schritten holen
Der zuverlässige Weg ist, den Pixel direkt mit einem Farbwähler abzutasten.
- Laden Sie das Bild. Ziehen Sie das Logo, den Screenshot oder das Foto hinein, aus dem Sie ziehen.
- Zeigen Sie auf den exakten Pixel. Eine Vergrößerungslupe folgt Ihrem Cursor und vergrößert den Bereich darunter, sodass Sie an einer harten Kante sehen können, welcher Pixel die flache Markenfarbe ist und welcher eine kantengeglättete Mischung zweier.
- Klicken zum Speichern, dann kopieren. Jeder Klick behält die Farbe als Feld, das ihr HEX, RGB und HSL zeigt, jedes mit eigenem Kopier-Button. Klicken Sie das HEX, und es ist in Ihrer Zwischenablage.
Auf dem richtigen Pixel landen
Die Lupe zählt mehr, als es klingt. Wo eine Farbe auf eine andere trifft – ein Buchstabe gegen einen Hintergrund, die Kante eines Icons – sind die Pixel dazwischen kantengeglättet: eine geglättete Mischung der zwei Farben, keine der beiden. Tasten Sie dort ab, bekommen Sie einen matschigen Wert, der zu nichts passt. Zielen Sie auf einen flachen Bereich ein paar Pixel innerhalb der Form, wo die Farbe solide ist, und die gezoomte Ansicht lässt Sie bestätigen, dass Sie darauf sind, bevor Sie klicken.
Auf einem sauberen Logo oder flachen UI ist das leicht – die Farbe ist über einen breiten Bereich einheitlich. Auf einem Foto braucht es mehr Sorgfalt, weil Korn und Kompression bedeuten, dass benachbarte Pixel sich wirklich unterscheiden. Wählen Sie aus einem ruhigen, gleichmäßig belichteten Bereich und nehmen Sie ein paar Proben, um zu prüfen, ob sie übereinstimmen.
HEX, RGB oder HSL – nehmen Sie, was passt
Jedes Feld gibt Ihnen alle drei auf einmal, Sie kopieren also, was Ihr Ziel will:
- HEX (
#3A7BD5) – der Web-Standard. CSS, Figma, Canva, Markendokumente. Kopieren Sie dieses, außer Sie haben einen Grund, es nicht zu tun. - RGB (
rgb(58, 123, 213)) – Kanalwerte, nützlich, wenn ein Werkzeug danach fragt oder Sie Transparenz perrgbabrauchen. - HSL (
hsl(215, 65%, 53%)) – Farbton, Sättigung, Helligkeit. Am besten, wenn Sie die Farbe anpassen wollen: sie für einen Hover-Zustand aufhellen, für eine Variante dämpfen oder eine Skala daraus bauen.
Weil jedes Feld alle drei trägt, tasten Sie nie neu ab, nur um das Format zu wechseln.
Mehrere Farben auf einmal greifen
Ein Logo ist selten eine Farbe. Klicken Sie die Primärfarbe, den Akzent und die Textfarbe in einem Durchgang – jede stapelt sich in der Liste, sodass Sie sie vergleichen und nacheinander kopieren können, statt das Bild dreimal separat zu laden.
Wollen Sie eine Farbzusammenfassung eines ganzen Bildes statt bestimmter Pixel – die Gesamtpalette, aus der ein Foto aufgebaut ist –, ist das eine andere Aufgabe, und das separate Paletten-Werkzeug von img.diy extrahiert automatisch die dominanten Farben für Sie. Nutzen Sie diesen Wähler, wenn Sie die exakte Stelle kennen, die Sie wollen; nutzen Sie das Paletten-Werkzeug, wenn Sie das Bild für sich charakterisiert haben wollen.
Es bleibt auf Ihrem Gerät
Das Bild wird lokal in Ihrem Browser von einer Canvas gelesen – nichts wird hochgeladen, es gibt keine Anmeldung, und nach dem ersten Laden funktioniert es offline. Ein unveröffentlichtes Mockup oder das private Asset eines Kunden verlässt also nie Ihren Rechner, nur weil Sie einen Hex-Code daraus brauchten.
Laden Sie das Bild, zeigen Sie auf den Pixel, klicken Sie und kopieren Sie den Code.