Brauchen Sie die exakte Farbe aus einem Logo, einem Screenshot, einem Foto oder einer Design-Vorlage? Laden Sie das Bild, bewegen Sie den Cursor darüber, um die Farbe unter einer Lupe in der Vorschau zu sehen, und klicken Sie, um sie zu speichern. Jede gespeicherte Farbe zeigt ihren HEX-, RGB- und HSL-Wert mit Kopier-Schaltflächen per Klick.
Es liest die Pixel direkt aus dem Bild in Ihrem Browser, sodass das Auswählen sofort geschieht und die Datei nie hochgeladen wird — praktisch für Markenfarben, die Sie lieber nicht an eine beliebige Website senden.
So geht's
- Bild hinzufügenZiehen Sie das Bild oder den Screenshot hinein, aus dem Sie Farben möchten.
- Zeigen und klickenDie Lupe vergrößert den exakten Pixel; klicken Sie, um die Farbe zu speichern.
- Wert kopierenGreifen Sie HEX, RGB oder HSL für jede gespeicherte Farbe.
Manchmal brauchen Sie eine einzige Farbe aus einem Bild und nichts anderes tut es – das exakte Blau in einem Logo, das Grau hinter einer Schaltfläche in einem Screenshot, ein Ton in einem Foto, den Sie wiederverwenden möchten. Ihr Auge kann keinen Hex-Code vom Bildschirm ablesen, und die Farbe, die richtig aussieht, ist meist ein paar Stellen daneben. Dieser Picker lässt Sie ein Bild laden, sich mit einer Lupe darüber bewegen, die die Pixel unter Ihrem Cursor vergrößert, und klicken, um genau die gewünschte als Farbfeld zu speichern – HEX, RGB und HSL werden alle zusammen angezeigt, jedes mit einer Kopierschaltfläche.
Es liest Pixel lokal in Ihrem Browser aus einem Canvas: Nichts wird hochgeladen, es gibt kein Konto, und nach dem ersten Laden funktioniert es offline. Das zählt, wenn das Bild ein unveröffentlichter Entwurf, das Markenasset eines Kunden oder ein interner Screenshot ist. Es ist ein Punkt-Sampler – jeder Klick liest ein Pixel, was für ein sauberes Logo oder eine flache UI genau richtig ist und bei einem verrauschten Foto etwas mehr Sorgfalt braucht. Möchten Sie lieber die dominanten Farben eines ganzen Bildes automatisch herausgezogen bekommen, ist dafür das separate Paletten-Tool da; dieses hier ist dafür, auf ein bestimmtes Pixel zu zeigen und seinen Wert zu nehmen.
Wofür man es nutzt
Die exakte Farbe einer Marke aus einem alten Logo wiederherstellen, wenn die Vorgabe fehlt
Eine Schaltfläche oder Überschrift an die Farbe in einem Screenshot einer Website abstimmen, die Ihnen gefällt
Die Primär-, Akzent- und Textfarben in einem Durchgang aus einem Logo ziehen
Einen Ton aus einem Foto holen, um ihn als Hintergrund oder Akzent zu nutzen
Die echte On-Screen-Farbe eines halbtransparenten Elements aus einem Screenshot lesen
Eine Farbe als HSL kopieren, um sie für einen Hover- oder Variantenzustand aufzuhellen oder abzudämpfen
Wenn Sie die exakte Farbe brauchen, nicht eine, die nah dran ist
Sie bauen eine Marke neu auf, und die einzige Referenz ist ein altes Logo. Sie stimmen eine Schaltfläche auf einen Screenshot einer Seite ab, die Ihnen gefällt. Sie haben einen Farbton in einem Foto entdeckt und wollen ihn in Ihrem eigenen Design verwenden. In jedem Fall ist das Problem dasselbe: Ihr Auge kann keinen Hex-Code von einem Bildschirm ablesen. „Dieses Türkis" sind in Wahrheit ein Dutzend leicht verschiedener Türkistöne, und Monitore verschieben sie weiter. Sie brauchen die Zahl, die das Pixel tatsächlich hält.
Genau das tut dieses Werkzeug. Laden Sie ein Bild, fahren Sie darüber, und eine Vergrößerungslupe folgt Ihrem Cursor und zeigt die darunterliegenden Pixel vergrößert, sodass Sie genau auf dem gewünschten landen können. Klicken Sie, und diese Farbe wird als Farbfeld gespeichert. Jedes Farbfeld führt seinen HEX-, RGB- und HSL-Wert mit einer Kopierschaltfläche daneben auf, sodass Sie direkt von einem Pixel im Bild zu einem Code in Ihrer Zwischenablage gelangen.
Das Bild verlässt nie Ihr Gerät. Pixel werden lokal im Browser von einer Canvas gelesen – nichts wird hochgeladen, es gibt kein Konto, und sobald die Seite geladen ist, funktioniert sie mit ausgeschaltetem Netz weiter. Das ist der Punkt, wenn das „Bild" ein unveröffentlichter Entwurf, das Marken-Asset eines Kunden oder ein interner Screenshot ist, den Sie keinem beliebigen Web-Werkzeug übergeben sollten.
Wie es in der Praxis funktioniert
- Die Lupe ist für Präzision. Logos und Benutzeroberflächen haben harte Kanten, an denen die Farbe über ein einzelnes Pixel wechselt – Kantenglättung bedeutet, dass das Pixel nebenan eine trübe Mischung ist. Die vergrößerte Ansicht lässt Sie genau sehen, auf welchem Pixel Sie sind, bevor Sie sich festlegen, sodass Sie die flache Markenfarbe wählen und nicht die Kante.
- Jeder Klick behält ein Farbfeld. Das Entnehmen ist nicht eins-nach-dem-anderen-und-weg. Klicken Sie im Bild herum, und jede Farbe stapelt sich in einer Liste, sodass Sie die Primärfarbe eines Logos, seinen Akzent und die Textfarbe in einem Durchgang ziehen und nebeneinander vergleichen können.
- Drei Formate, eine Auswahl. Jedes Farbfeld zeigt HEX, RGB und HSL auf einmal. Sie entnehmen nicht neu, um das Format zu wechseln – dieselbe Farbe liegt bereits in allen dreien vor, jede mit ihrer eigenen Kopierschaltfläche.
HEX, RGB, HSL – welchen kopieren
Es sind drei Arten, dieselbe Farbe zu schreiben, und die richtige hängt davon ab, wohin sie geht.
- HEX (
#3A7BD5) ist der Standard fürs Web – CSS, die meisten Design-Werkzeuge, Markendokumente. Kompakt und universell einfügbar. Kopieren Sie diesen, sofern Sie keinen Grund für etwas anderes haben. - RGB (
rgb(58, 123, 213)) schreibt die Rot-, Grün- und Blau-Kanäle aus. Nützlich, wenn ein Werkzeug Kanalwerte will, wenn Sie einen Alphawert (rgba) brauchen oder wenn Sie darüber nachdenken, wie eine Farbe gemischt ist. - HSL (
hsl(215, 65%, 53%)) beschreibt Farbton, Sättigung und Helligkeit. Das ist der, zu dem man greift, wenn man eine Farbe anpassen statt nur wiederverwenden will – die Helligkeit für einen Hover-Zustand anstupsen, die Sättigung für eine gedämpfte Variante senken, den Farbton behalten und eine Skala bauen.
Eine ehrliche Grenze und ein Schwester-Werkzeug
Dies ist ein Punkt-Entnehmer: Jeder Klick liest ein einzelnes Pixel. Auf einem sauberen Logo oder einer flachen Benutzeroberfläche ist genau das, was Sie wollen. Auf einem verrauschten Foto – Korn, Farbverläufe, JPEG-Artefakte – können sich zwei benachbarte Pixel unterscheiden, also entnehmen Sie aus einer flachen Fläche und nutzen Sie die Lupe, um nicht auf einem Ausreißer zu landen. Es gibt hier keinen Pinsel für den Durchschnitt eines Bereichs.
Und wenn Sie gar nicht von Hand auswählen wollen, hat img.diy ein separates Paletten-Werkzeug, das ein ganzes Bild abtastet und Ihnen automatisch seine dominanten Farben liefert. Die beiden beantworten verschiedene Fragen. Das Paletten-Werkzeug sagt Ihnen, aus welchen Farben dieses Bild besteht; der Farbwähler lässt Sie auf ein bestimmtes Pixel zeigen – genau diesen Punkt auf dem Logo, jene eine Schaltfläche – und seinen Wert nehmen. Greifen Sie zum Paletten-Werkzeug, um ein Bild zusammenzufassen, und zu diesem, wenn Sie den gewünschten Punkt bereits kennen.
Laden Sie ein Bild, fahren Sie darüber, um das Pixel zu finden, klicken Sie, um es zu behalten, kopieren Sie das benötigte Format.
Warum IMG.DIY
Lupe
Zoomt hinein, damit Sie den exakten Pixel anklicken.
HEX / RGB / HSL
Jede gespeicherte Farbe in drei Formaten.
Kopieren per Klick
Kopieren Sie jeden Wert direkt in die Zwischenablage.
Privat
Pixel werden lokal gelesen — kein Upload.