Farbe aus Bild bestimmen — HEX, RGB und Palette
Browser-Tool, das Farbcodes aus einem Bild aufnimmt und eine Palette der dominanten Farben erstellt
Verarbeitung im Browser · kein Hochladen
Bild zum Farben-Aufnehmen hier ablegen
Ein Bild, etwa JPG, PNG oder WebP. Ein kopiertes Bild können Sie auch mit Strg+V (⌘V auf dem Mac) einfügen. Es verlässt Ihren Browser nie.
Klicken oder tippen Sie auf das Bild, um die Farbe an dieser Stelle aufzunehmen. Nach dem Klick können Sie sich auch mit den Pfeiltasten bewegen (Umschalt + Pfeil für 10 Pixel).
Lupe
Cursor: -
Aufgenommene Farbe
Noch keine Farbe aufgenommen. Klicken Sie auf das Bild.
Dominante Farbpalette
Ermittelt mit k-means: Das Bild wird verkleinert und ähnliche Farben werden gruppiert. Dasselbe Bild ergibt immer dasselbe Ergebnis. Klicken Sie auf eine Farbe, um sie oben zu übernehmen.
Worum es geht
Dieses Tool zeigt Ihnen die Farbe jedes beliebigen Pixels in einem Foto oder Entwurf als HEX-Code (#2563EB), RGB und HSL. Klicken oder tippen Sie auf das Bild, um ein Pixel aufzunehmen; eine Lupe vergrößert die Umgebung, damit Sie genau die richtige Stelle treffen. Außerdem erstellt es automatisch eine Palette der 5 bis 8 auffälligsten Farben.
So funktioniert es
- Legen Sie ein Bild ab oder klicken Sie auf Bild auswählen. Ein kopiertes Bild können Sie auch mit Strg+V (⌘V auf dem Mac) einfügen.
- Wenn Sie über das Bild fahren, zeigt die Lupe rechts die Pixel in der Nähe vergrößert. Klicken oder tippen Sie auf die gewünschte Stelle.
- Lesen Sie HEX, RGB und HSL unter Aufgenommene Farbe ab und klicken Sie auf Kopieren.
- Nach einem Klick ins Bild bewegen die Pfeiltasten den Cursor Pixel für Pixel, Umschalt + Pfeil um zehn Pixel – für feinere Kontrolle.
- Wählen Sie unter Dominante Farbpalette zwischen 5 und 8 Farben und klicken Sie auf ein Farbfeld, um es oben in die Werte zu übernehmen.
Wie es funktioniert
- HEX: jeder Kanal als zwei hexadezimale Ziffern in Großbuchstaben. R37 G99 B235 ergibt #2563EB.
- HSL: Farbton 0 bis 360 Grad, Sättigung und Helligkeit 0 bis 100 %, auf ganze Zahlen gerundet. Die Farbe oben ist hsl(221, 83%, 53%).
- Palette: Pixel mit mindestens 50 % Deckkraft werden mit k-means gruppiert (k-means++-Initialisierung, fester Seed, höchstens 20 Iterationen), die Zentren werden gerundet. Größere Gruppen stehen vorn, mit ihrem Anteil am Bild in Prozent.
- Verkleinerung: Vor dem Clustern wird das Bild auf etwa 10.000 Pixel reduziert, damit auch große Fotos schnell bleiben. Die Pixel werden ohne Mischen abgetastet, sodass sich keine Zwischenfarbe, die im Bild gar nicht vorkommt, in die Palette schleicht.
- Farbwerte: die Pixelwerte, wie der Browser sie in sRGB gezeichnet hat; ein Bild mit anderem Farbprofil wird nach der Umrechnung des Browsers in sRGB gelesen.
Anwendungsbeispiele
| Ziel | Vorgehen |
|---|---|
| Markenfarbe eines Logos prüfen | in eine einheitliche Fläche klicken und den HEX-Wert kopieren |
| Hintergrund passend zu einem Foto wählen | die größte Farbe der Palette nehmen |
| Ein einzelnes Pixel prüfen | mit den Pfeiltasten bewegen und die Lupe beobachten |
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Das Zeichnen des Bildes und das Auslesen der Pixelwerte passieren in Ihrem Browser. Weder die Datei noch die aufgenommenen Farben werden irgendwohin gesendet.
Die aufgenommene Farbe sieht etwas anders aus als das, was ich sehe.
Das Tool liest die Pixelwerte, die der Browser für den Bildschirm in sRGB gezeichnet hat. Enthält das Bild ein Farbprofil wie Display P3 oder Adobe RGB, rechnet der Browser es zuerst in sRGB um, sodass die Werte von den Dokumentwerten in einem Programm wie Photoshop abweichen können. Auch Monitoreinstellungen und Helligkeit verändern den Eindruck. Fotos enthalten außerdem feines Rauschen, benachbarte Pixel unterscheiden sich also leicht. Für eine exakte Farbe klicken Sie in eine einheitliche Fläche.
Kann ich Farben mit der Tastatur aufnehmen?
Ja. Klicken Sie einmal auf das Bild oder wählen Sie es mit Tab aus. Mit den Pfeiltasten bewegen Sie den Cursor dann um ein Pixel, mit Umschalttaste um zehn, und die Farbe darunter wird sofort aufgenommen. Eingabe oder Leertaste nimmt die Farbe an der aktuellen Position erneut auf. Die Lupe zeigt die umliegenden 11 × 11 Pixel.
Wie wird die Palette gewählt?
Das Bild wird auf etwa 10.000 Pixel verkleinert, und ähnliche Farben werden mit k-means zu 5 bis 8 Farben gruppiert. Die Startpunkte stammen aus einem festen Zufalls-Seed, daher ergibt dasselbe Bild immer dieselbe Palette. Transparente Pixel bleiben außen vor.
Funktionieren auch sehr große Bilder?
Ist die lange Seite größer als 4096 Pixel, wird das Bild in dieser Größe geladen, und die Farben stammen aus dem verkleinerten Bild. Brauchen Sie bei einem riesigen Bild pixelgenaue Werte, schneiden Sie den benötigten Teil zuerst zu.
Was ist mit teilweise transparenten Pixeln?
HEX, RGB und HSL zeigen nur die Farbe, ohne Alphawert. Wenn Sie ein halbtransparentes Pixel aufnehmen, weist ein Hinweis darauf hin, dass der Alphawert nicht enthalten ist.
