Designvorlagen im Frontend nachbauen
Die Button-Farbe aus einem Design-Screenshot aufnehmen und das HEX direkt ins CSS kleben.
Guide
Farben aus Bild lesen holt exakte Farbwerte aus einem Bild: Bewegt sich die Maus über das Bild, folgt ein runder 120-px-Zoombereich dem Cursor, zeigt die umliegenden 15 × 15 Pixel vergrößert und hebt die mittlere Zelle hervor – so triffst du auch in Verläufen oder an Kanten nicht daneben. Ein Klick übernimmt die Farbe in „Aktuelle Farbe“ und kopiert das HEX automatisch, dazu stehen rgb() und hsl() bereit. Beim Laden wird das Bild außerdem auf 128 px Breite verkleinert und einer Farbclusterung unterzogen: acht Hauptfarben werden extrahiert und nach Anteil als Farbband gezeichnet. Die Verarbeitung läuft lokal im Browser.
Aktualisiert am 2026-09-093 min read
Farben aus Bild lesen holt exakte Farbwerte aus einem Bild: Bewegt sich die Maus über das Bild, folgt ein runder 120-px-Zoombereich dem Cursor, zeigt die umliegenden 15 × 15 Pixel vergrößert und hebt die mittlere Zelle hervor – so triffst du auch in Verläufen oder an Kanten nicht daneben. Ein Klick übernimmt die Farbe in „Aktuelle Farbe“ und kopiert das HEX automatisch, dazu stehen rgb() und hsl() bereit. Beim Laden wird das Bild außerdem auf 128 px Breite verkleinert und einer Farbclusterung unterzogen: acht Hauptfarben werden extrahiert und nach Anteil als Farbband gezeichnet. Die Verarbeitung läuft lokal im Browser.
Anders als bei den „Farbwerkzeugen“ stammen die Farben hier aus den Pixeln eines Bildes; anders als beim „Histogramm“ geht es um konkrete Farbwerte und nicht um die Helligkeitsverteilung.
HEX landet automatisch in der Zwischenablage
Die acht Hauptfarben entstehen aus einem 128-px-Thumbnail
Feine Pixel werden zusammengefasst, die Farbe wird leicht gemittelt
auf den Himmel im Bild klickenHEX `#4A90D9`, `rgb(74, 144, 217)`, `hsl(211, 65%, 57%)`ein Markenposter ladender breiteste Streifen im Farbband ist die Hauptfarbe des Posters, die übrigen nehmen nach Fläche abein großes Bild mit 6000 px langer Kantedie Leinwand für die Farbaufnahme wird auf 2048 px verkleinertDie Button-Farbe aus einem Design-Screenshot aufnehmen und das HEX direkt ins CSS kleben.
Ein Wettbewerber-Poster laden, die Anteile der acht Hauptfarben ansehen und das Farbverhältnis verstehen.
Haupt- und Nebenfarbe aus dem Firmenlogo ziehen und auf das Folienthema übertragen.
So weit hineinzoomen, dass ein einzelner Pixel sichtbar ist, und feststellen, ob eine Stelle reines Schwarz #000000 oder dunkles Grau ist.
JPEG-Kompression, Farbprofile und das Skalieren verschieben Pixelwerte um 1–3; am genauesten wird es mit dem PNG-Original und einer Stelle mit Volltonfarbe.
Nein, gelesen wird nur RGB; bei einem PNG mit transparentem Hintergrund ist an transparenten Stellen die zusammengesetzte Farbe der Leinwand zu sehen.
Die Hauptfarben werden nach Pixelmenge geclustert, kleine Akzentflächen fallen dabei zusammen; nimm sie einfach direkt mit der Lupe auf.
Das Bild wird lokal im Browser auf die Leinwand gezeichnet und dort ausgelesen, es geht an keinen Server; in die Zwischenablage wird nur kopiert, wenn du klickst.
Aktualisiert am 2026-09-09
Mit der Lupe exakte Farbwerte (HEX/RGB/HSL) aufnehmen und automatisch eine passende Palette ableiten
Dieses Werkzeug ist noch nicht vollständig übersetzt; einige Inhalte nutzen die Ausgangssprache oder die Rückfallsprache.