Sie sehen eine Farbe, die Sie wiederverwenden wollen – in einem Foto, einem Screenshot einer Seite, die Ihnen gefällt, einem alten Logo, dessen Quelldateien längst weg sind – und Sie brauchen den tatsächlichen Hex-Code, keine Schätzung. Nach Augenmaß klappt es nie ganz; Monitore lügen und „dieses Blau" sind eigentlich sechs leicht verschiedene Blautöne. Die Palette direkt aus den Pixeln zu ziehen gibt Ihnen Codes, die Sie in CSS, ein Design-Werkzeug oder ein Markendokument einfügen können.
So geht es, und wie Sie eine Palette bekommen, die tatsächlich nutzbar ist statt eines zufälligen Griffs von Pixeln.
Was „eine Palette extrahieren" tatsächlich macht
Das Werkzeug scannt das Bild und findet die Farben, die es am besten repräsentieren – die dominanten Töne plus die auffälligen Akzente – und gibt Ihnen dann jede als Hex-Code zum Kopieren. Statt einer Million einzelner Pixelfarben bekommen Sie einen ordentlichen Satz (sagen wir 5 oder 8), der das Bild zusammenfasst.
Das ist für ein paar gängige Aufgaben wirklich nützlich:
- Markenfarben wiederherstellen aus einem Logo oder alten Asset, wenn Sie die Originalvorgabe nicht haben.
- Eine Design-Palette bauen aus einem Foto, dessen Stimmung Sie treffen wollen – eine Landschaft, eine Produktaufnahme, ein Kunstwerk.
- Eine bestehende Seite oder Grafik abgleichen, von der Sie nur einen Screenshot haben.
- Einen Hintergrund oder Akzent wählen, der zu einem Bild harmoniert, das Sie bereits nutzen.
Ziehen Sie ein Bild hinein und lesen Sie die Codes ab:
Nutzen Sie den Anzahl-Regler, um eine nützliche Palette zu bekommen
Die mit Abstand wichtigste Einstellung ist, wie viele Farben Sie ziehen. Sie ändert die Antwort komplett.
- Weniger Farben (3–5) geben Ihnen die essenzielle Palette – die Handvoll Töne, die das Bild definieren. Das ist meist das, was Sie fürs Branding oder ein Designsystem wollen, wo ein knapper Satz ein Merkmal ist, keine Einschränkung.
- Mehr Farben (8–12) erfassen feine Akzente und Verläufe. Nützlich, wenn ein Bild reich und vielfältig ist und Sie auch die sekundären Töne wollen, oder wenn Sie genau studieren, wie ein Foto komponiert ist.
Fühlt sich das erste Ergebnis falsch an – ein Ton dominiert oder ein gewünschter Akzent wurde weggemittelt –, passen Sie die Anzahl an und lesen Sie neu. Ein Foto, das zu 80 % Himmel ist, reicht Ihnen bei niedriger Anzahl viel Blau; drehen Sie die Anzahl hoch, um die kleineren Farbtupfer hervorzubringen.
Klicken zum Kopieren – der Workflow, der zählt
Einen Hex-Code zu lesen und abzutippen ist die Stelle, an der sich Fehler einschleichen (#3A7BD5 vs. #3A7BD6 und Sie haben zehn Minuten damit verbracht, sich zu fragen, warum es falsch aussieht). Im Farbpaletten-Werkzeug kopiert jedes Feld seinen Hex-Code beim Klicken, Sie gehen also direkt vom Bild in die Zwischenablage in Ihr Stylesheet, ohne die Tastatur zu berühren.
Ein praktischer Ablauf:
- Laden Sie das Bild.
- Stellen Sie die Anzahl passend zur Aufgabe ein – niedrig für eine Markenpalette, höher, um Akzente zu erfassen.
- Klicken Sie jedes gewünschte Feld an; fügen Sie es dort ein, wo es hin soll.
- Nicht genug Bandbreite? Stupsen Sie die Anzahl an und holen Sie die Extras.
Die Ergebnisse mit Designer-Auge lesen
Ein paar wissenswerte Dinge, damit die Palette gut landet:
- Die dominante Farbe ist nicht immer die nützliche. Eine Produktaufnahme auf weißem Hintergrund meldet viel Weiß oder Fast-Weiß. Das ist korrekt, aber die Farbe, die Sie eigentlich wollen, ist das Produkt – drehen Sie die Anzahl höher, um sie herauszuziehen, oder schneiden Sie zuerst aufs Motiv zu.
- Fotos haben mehr Farben, als sie aussehen. Haut, Schatten und Reflexionen fügen Töne hinzu, die Sie bewusst nicht bemerkt haben. Eine höhere Anzahl enthüllt sie; eine niedrigere versteckt sie hinter den Mittelwerten.
- Hex ist portabel. Jeder kopierte Code funktioniert direkt in CSS, Figma, Photoshop, Canva oder einem Markendokument. Keine Umwandlung nötig.
Warum es in Ihrem Browser bleibt
Die ganze Extraktion läuft lokal – das Bild wird in Ihrem Browser mit Canvas gelesen und analysiert, und es wird nie auf einen Server hochgeladen. Das zählt, wenn das „Bild" ein unveröffentlichtes Mockup, das private Markenasset eines Kunden oder ein interner Screenshot ist, den Sie nicht zu einem beliebigen Web-Werkzeug posten sollten. Es ist kostenlos, braucht keine Anmeldung, und nach Ihrem ersten Besuch funktioniert es offline.
Holen Sie die Farben, klicken Sie zum Kopieren, fügen Sie sie ein, wo sie hingehören.