Über: Farbe aus Bild bestimmen
Dieser Color Picker ist eine Online-Pipette, die dir den genauen Code jeder Farbe in einem Bild verrät. Damit übernimmst du Markenfarben aus einem Logo oder Website-Screenshot oder erstellst aus einem Lieblingsfoto eine Farbpalette für dein Design. Mit der Lupe wählst du pixelgenau aus; auf dem Handy erscheint die Lupe über deinem Finger, wenn du gedrückt hältst und ziehst, damit nichts verdeckt wird.
Das Bild wird nur im Browser verarbeitet und nicht auf einen Server hochgeladen.
So funktioniert’s
- Zieh ein Bild in das Feld oben oder tippe darauf, um es auszuwählen. Screenshots kannst du direkt mit Strg+V einfügen.
- Tippe auf die gewünschte Stelle im Bild. Mit der Lupe kontrollierst du die genaue Position.
- Tippe neben dem HEX-, RGB- oder HSL-Code auf Kopieren und füg ihn in dein Designtool oder CSS ein.
- In der Farbpalette des Bildes unten siehst du die Hauptfarben und ihren Anteil. Ein Tipp auf eine Farbe kopiert sie sofort.
So liest du Farbcodes
| Format | Beispiel | Bedeutung |
|---|---|---|
| HEX | #4F46E5 | Rot, Grün und Blau als je zwei Hexadezimalstellen (Web, Figma) |
| RGB | rgb(79, 70, 229) | Rot, Grün und Blau von 0 bis 255 (Photoshop, PowerPoint) |
| HSL | hsl(243, 75%, 59%) | Farbton, Sättigung und Helligkeit (zum Abwandeln von Farben in CSS) |
Wie entsteht die Farbpalette?
Das Bild wird verkleinert und ähnliche Farben werden per k-Means-Clustering gruppiert. So werden bis zu 8 Farben gefunden, die die größte Fläche einnehmen. Die Zahl unter jeder Farbe ist der Anteil dieser Farbgruppe am Bild. Für dasselbe Bild entsteht immer dieselbe Palette.
In JPG-Fotos können durch die Kompression selbst einfarbige Flächen von Pixel zu Pixel leicht abweichen. Um eine Logofarbe exakt zu treffen, nimm das PNG-Original oder wähle mit der Lupe die Mitte einer Fläche.
Häufige Fragen
Die Farbe auf dem Bildschirm sieht etwas anders aus als der Code.
Monitoreinstellungen, Dunkelmodus und im Bild eingebettete Farbprofile können die angezeigte Farbe leicht verändern. Der ermittelte Code ist genau der Pixelwert, der in der Bilddatei gespeichert ist.
Ich möchte eine Farbe von einer Website übernehmen.
Mach einen Screenshot der Seite (Windows: Win+Umschalt+S, Mac: Cmd+Umschalt+4), füg ihn auf dieser Seite mit Strg+V ein und tippe auf die gewünschte Stelle.
Wo werden die zuletzt gewählten Farben gespeichert?
Die letzten 12 Farben werden nur in diesem Browser gespeichert, damit du sie beim nächsten Besuch wiederfindest. Das Bild selbst wird nicht gespeichert.
Was passiert bei transparenten Bereichen?
Transparente Pixel werden bei der Palette nicht berücksichtigt. Tippst du auf eine transparente Stelle, wird mangels Farbinformation eventuell Schwarz (#000000) angezeigt.