So verwenden Sie Farbwähler aus Bild
- 1
Bild öffnen
Ziehen Sie einen Screenshot, ein Foto oder ein Logo mit bis zu 25 MB hierher, wählen Sie es aus oder fügen Sie es ein – JPG, PNG, WebP, AVIF, HEIC, GIF oder SVG.
- 2
Mit der Lupe zielen
Fahren Sie mit der Maus über das Bild oder ziehen Sie darüber. Eine Lupe mit 11 × 11 Pixeln zeigt das genaue Pixel unter dem Fadenkreuz und seinen HEX-Code.
- 3
Zum Wählen klicken
Sie erhalten HEX-, RGB-, HSL- und OKLCH-Werte, jeweils mit eigener Schaltfläche zum Kopieren. Mit den Pfeiltasten verschieben Sie das Fadenkreuz, mit Enter wählen Sie.
- 4
Palette übernehmen
Wählen Sie 5 bis 12 dominante Farben und kopieren Sie sie als CSS-Variablen, JSON oder Tailwind-Theme-Block.
Limits und Pro
Ein Bild nach dem anderen, bis zu 25 MB, mit unbegrenzt vielen Farbwahlen, 5–12 Palettenfarben und einem Verlauf mit 24 Farben.
Mit Pro können Sie Bilder mit bis zu 4 GB abtasten. Pro ansehen
Über Farbwähler aus Bild
Der Farbwähler für Bilder liest den genauen Wert jedes beliebigen Pixels in einem Bild aus und macht aus dem ganzen Bild eine Palette. Jede gewählte Farbe erhalten Sie in vier Schreibweisen: HEX für Designprogramme, rgb() und hsl() für CSS sowie oklch() für moderne Farbarbeit in CSS, bei der sich Helligkeit und Buntheit so verhalten, wie es das Auge erwartet. Die Farben landen in einem Verlauf der letzten 24 Farben, der in diesem Browser gespeichert bleibt und beim nächsten Mal noch da ist. In Chrome und Edge auf dem Desktop erfasst „Vom Bildschirm wählen“ über die Pipette des Browsers auch Farben außerhalb der Seite.
Die Palette wird per k-Means-Clustering im Farbraum OKLab berechnet, und zwar auf einer Kopie des Bildes, die auf höchstens 200 Pixel an der längsten Seite verkleinert wird. Ähnliche Cluster werden zusammengeführt, transparente Pixel bleiben unberücksichtigt, und die Farben sind danach sortiert, wie viel vom Bild sie abdecken. Der Anteil steht auf jedem Farbfeld. Dasselbe Bild ergibt immer dieselbe Palette.
Im Design nutzt man das Tool, um eine Markenfarbe aus einem Logo zu übernehmen, ein Theme aus einem Foto aufzubauen, die genaue Farbe einer Schaltfläche in einem Screenshot zu prüfen oder ein Moodboard zusammenzustellen. Die Werte sind Standard-sRGB, so wie Ihr Browser das Bild anzeigt. JPG-Artefakte oder eine Quelle mit großem Farbraum können eine gewählte Farbe daher um wenige Einheiten von der ursprünglichen Designdatei abweichen lassen. Halbtransparente Pixel geben ihre Farbe ohne die Transparenz an, und das Tool benennt keine Farben und prüft keine Kontrastverhältnisse.
Datenschutz
Das Bild wird in diesem Tab dekodiert und abgetastet, und das Clustering der Palette läuft in einem kleinen Web Worker, der erst nach dem Öffnen des Bildes erstellt wird. Es wird nichts hochgeladen. Ihr Verlauf wird nur im lokalen Speicher dieses Browsers gespeichert, und „Vom Bildschirm wählen“ nutzt die integrierte Pipette Ihres Browsers, die nur die eine gewählte Farbe an diese Seite weitergibt, sonst nichts.
Funktionen
Pixelgenaue Lupe
Eine Lupe mit 11 × 11 Pixeln und Tastatursteuerung für präzise Auswahl mit Maus und Touch.
Dominante Palette
5–12 Farben per k-Means in OKLab, sortiert nach Anteil am Bild.
Exporte für Entwickler
HEX-, RGB-, HSL- und OKLCH-Werte sowie CSS-Variablen, JSON oder ein Tailwind-@theme-Block.
Farbhistorie
Ihre letzten 24 Farben bleiben in diesem Browser und lassen sich als Liste kopieren.