Anleitung: Farbe aus Bild bestimmen
- Ziehen Sie das Bild, dessen Farben Sie bestimmen möchten, in das Feld oder klicken Sie zum Auswählen. Ein Bildschirmfoto können Sie auch direkt mit Strg+V einfügen.
- Bewegen Sie die Maus über das Bild – die Farbe unter dem Mauszeiger wird live angezeigt. Ein Klick auf die gewünschte Stelle hält die Farbe fest und speichert sie im Verlauf.
- Klicken Sie auf HEX, RGB oder HSL, um den Farbcode im jeweiligen Format zu kopieren.
- Unter Hauptfarben sehen Sie die wichtigsten Farben des gesamten Bildes und ihren jeweiligen Anteil.
So finden Sie den Farbcode in einem Foto
Digitale Bilder bestehen aus winzigen Punkten (Pixeln). Jedes Pixel speichert die Intensität der drei Lichtfarben Rot (R), Grün (G) und Blau (B) jeweils als Zahl von 0 bis 255. Dieses Tool liest den RGB-Wert des angeklickten Pixels unverändert aus und zeigt ihn in folgenden Formaten an:
| Format | Beispiel | Typischer Einsatz |
|---|---|---|
| HEX | #2563EB | Web (CSS), Farbeingabe in Figma oder Photoshop |
| RGB | rgb(37, 99, 235) | CSS, Programmierung, Videobearbeitung |
| HSL | hsl(221, 83%, 53%) | Anpassen von Farbton, Sättigung und Helligkeit |
In Fotos hat selbst ein einfarbiges Objekt wegen Lichteinfall und Kompression von Pixel zu Pixel leicht unterschiedliche Farben. Wenn Sie einen exakten Farbton brauchen, etwa für ein Logo, wählen Sie die größte, gleichmäßig gefüllte Fläche. Für die Umrechnung in andere Formate wie CMYK nutzen Sie den Farbcode-Umrechner.
Wie die Hauptfarben (Farbpalette) eines Bildes ermittelt werden
Für die Hauptfarben werden mehrere Tausend gleichmäßig über das Bild verteilte Pixel ausgewählt und mit dem k-Means-Clustering zu Gruppen ähnlicher Farben zusammengefasst. Für jede Gruppe wird der Farbdurchschnitt berechnet; die Gruppen werden nach ihrem Anteil am Bild absteigend sortiert. Transparente Bereiche werden dabei nicht berücksichtigt.
Die Hauptfarben sind ein guter Ausgangspunkt für das Farbschema einer Website, einer Präsentation oder eines Flyers. Verwenden Sie die Farbe mit dem größten Anteil als Hintergrundfarbe und die zweite oder dritte als Akzentfarbe – so entsteht ein Design, das gut zum Foto passt. Wenn Sie die Anzahl erhöhen, werden auch feinere Farbnuancen getrennt dargestellt.
Farben von Websites und Apps per Bildschirmfoto herausfinden
- Erstellen Sie auf dem Bildschirm mit der gewünschten Farbe ein Bildschirmfoto eines Bereichs: unter Windows mit
Win + Umschalt + S, auf dem Mac mitCmd + Umschalt + 4. - Wechseln Sie zurück auf diese Seite und drücken Sie
Strg + V(Mac:Cmd + V) – das Bildschirmfoto wird sofort geöffnet. - Klicken Sie auf die gewünschte Schaltfläche oder Schrift und kopieren Sie den Farbcode.
Je nach Farbeinstellungen des Monitors, Dunkelmodus oder Browser-Zoom kann die Farbe im Bildschirmfoto leicht vom ursprünglichen Designwert abweichen. Wenn Sie exakte Werte brauchen, etwa für Markenfarben aus einem Corporate Design, prüfen Sie die Original-Designdatei oder den offiziellen Styleguide.
Tipps für genauere Ergebnisse
- Verlustfreie Formate bevorzugen: PNG-Dateien enthalten keine Kompressionsartefakte, JPG-Bilder dagegen oft leichte Farbabweichungen an Kanten und Verläufen.
- Mitte einer Fläche wählen: An Rändern mischen sich durch Kantenglättung benachbarte Farben.
- Mehrere Stellen vergleichen: Klicken Sie auf einige Punkte derselben Fläche; im Verlauf sehen Sie sofort, ob die Werte übereinstimmen.
- Kleine Details vergrößern: Zoomen Sie vor dem Bildschirmfoto in den Bereich hinein, damit dünne Linien oder kleine Symbole mehr Pixel haben.