VoriTools

Dominante Bildfarben und HEX-Codes ermitteln

Wählen Sie ein Bild oder fügen Sie es ein und lassen Sie 4 bis 12 Farben extrahieren. Klicken Sie auf ein Farbfeld, um seinen HEX-Code zu kopieren; die Palette zeigt angenäherte dominante Farben.

Läuft lokal in deinem Browser
Kategorie ansehen: Frontend & Design (34)
Pixel werden nur in diesem Browser abgetastet und reduziert. Das Bild wird nie an VoriTools oder einen Bilddienst gesendet.
Bildquelle

Legen Sie ein Bild hier ab, fügen Sie eines ein oder wählen Sie eine lokale Datei

Palettenoptionen

Transparente Pixel werden ignoriert. Große Bilder werden vor der Analyse verkleinert, damit der Browser reaktionsfähig bleibt; Farbfelder stehen für dominante Bereiche, nicht für exakte Pixel.

Palette verwenden

Klicken Sie auf ein Farbfeld, um den Hexwert zu kopieren. Prüfen Sie Vordergrund und Hintergrund mit dem Barrierefreiheitsprüfer auf WCAG-Kontrast.

Kontrastprüfer öffnen
Extrahierte Palette

Wählen Sie ein Bild, um eine lokale Farbpalette zu extrahieren.

Nutzbare Farben finden, ohne ein Design-Asset weiterzugeben

Der Extraktor analysiert eine verkleinerte Canvas im Browser und belässt die Originaldatei auf Ihrem Gerät. Für barrierefreie Oberflächen validieren Sie jedes endgültige Text-/Hintergrundpaar separat.

So extrahieren Sie eine Farbpalette aus einem Bild

Der Image Color Extractor gewinnt eine praktische Palette aus einem lokalen Bild: ablegen, einfügen oder Datei wählen, 4 bis 12 Farben festlegen und die HEX-Werte direkt für CSS kopieren.

Das Bild wird auf einer verkleinerten Zeichenfläche in diesem Browser-Tab ausgewertet — nichts wird hochgeladen. Das Ergebnis nähert die dominanten Farben an; es ist kein Pipettenwerkzeug mit exakten Pixelwerten.

  1. Bild hinzufügen: in die Ablagefläche ziehen, bei fokussierter Seite einfügen oder eine lokale Datei wählen — PNG, JPEG, WebP, GIF, AVIF oder BMP, bis 40 MB.
  2. Farbanzahl wählen: 4, 5, 6, 8, 10 oder 12. Standard ist 6.
  3. Farben extrahieren anklicken. Pixel mit Alpha unter 90 werden ignoriert, die Palette stammt also nur aus deckenden Bereichen.
  4. Auf ein Farbfeld klicken, um den HEX-Code zu kopieren; jedes Feld zeigt außerdem den rgb()-Wert und seinen Anteil an den abgetasteten Pixeln. Synthetisches Beispiel laden nutzt ein eingebautes Testbild mit 960 × 560.
  5. Leeren setzt Bild und Ergebnisse zurück. Für ein Vordergrund/Hintergrund-Paar aus der Palette geht es im Barrierefreiheitsprüfer weiter.

Wie die Palette berechnet wird und was die Prozentwerte bedeuten

Dominante Gruppen, keine exakten Pixel

Das Bild wird auf eine Zeichenfläche gezeichnet, deren längste Kante auf 420 Pixel skaliert ist, und dann über ein Raster von höchstens rund 140.000 Pixeln gelesen. Farben landen in 4-Bit-Gruppen je Kanal; die Gruppen werden nach Pixelzahl sortiert, und Farben mit einem Abstand unter 28 werden zusammengeführt, bevor die endgültigen 4–12 gewählt werden.

Jedes Farbfeld ist der Mittelwert seiner Gruppe; das Ergebnis fasst also dominante Bereiche zusammen. Feine Verläufe, Raster, ein Pixel breite Linien und weichgezeichnete Kanten können bei der Reduktion verschwinden — die Werte sind Ausgangspunkte, keine gemessenen Originale.

Die Farbfelder lesen

Der Prozentwert unter einem Farbfeld ist der Anteil der abgetasteten, deckenden Pixel in dieser Gruppe; die Werte summieren sich auf rund 100 %. Die gewählte Zahl ist ein Maximum: Ein einfarbiges Bild ergibt ein einzelnes Feld mit 100 %, ein Bild mit wenigen unterschiedlichen Farben entsprechend weniger Felder.

Ein vollständig transparentes Bild meldet 0 dominante Farben und zeigt keine Felder. Die Felder sind echte Buttons und damit per Tastatur erreichbar; jede Kopie wird in der Statuszeile bestätigt — oder als blockiert gemeldet, wenn der Browser den Zugriff auf die Zwischenablage verweigert.

Lokale Verarbeitung und praktische Grenzen

Die Analyse läuft vollständig im Tab: Der Browser dekodiert die Datei, die Zeichenfläche wird über Pixel-APIs gelesen, und es werden keine Bilddaten übertragen, sodass das Werkzeug auch offline arbeitet. In einem Test mit Desktop-Chrome wurde ein Foto mit 4000 × 3000 in etwa 0,2 Sekunden analysiert.

Die Grenze von 40 MB existiert, weil das Dekodieren im Browser stattfindet. Für Barrierefreiheit prüfen Sie jedes endgültige Text/Hintergrund-Paar im Kontrast-Prüfer, statt die Palette als WCAG-Garantie zu behandeln.

Zuletzt verwendet: