Dominante Bildfarbe
Finde die dominante Farbe eines beliebigen Bildes und eine Palette seiner häufigsten Farben. Das Tool ordnet jedes sichtbare Pixel einem von 4096 Farbbereichen zu, gibt den häufigsten Bereich als dominante Farbe aus, listet bis zu 12 Palettenfarben mit ihrem Bildanteil auf und ergänzt die durchschnittliche Gesamtfarbe – jeweils als Hex-, RGB- und HSL-Wert. Ideal für Designer, Theme-Ersteller und Entwickler, die Platzhalter- oder Akzentfarben benötigen.
Häufig gestellte Fragen
Wie wird die dominante Farbe ermittelt?
Jedes Pixel wird einem von 4096 Farbbereichen zugeordnet, mit jeweils 16 Stufen für Rot, Grün und Blau. Der Bereich mit den meisten Pixeln gewinnt. Seine Farbe entspricht dem Durchschnitt der darin enthaltenen Pixel, sodass ein weißer Hintergrund als reines Weiß und nicht als gerundeter Wert ausgegeben wird.
Was ist die Palette?
Die Palette listet die häufigsten Farbbereiche nach dem dominanten Bereich auf. Du kannst 1 bis 12 Farben auswählen, standardmäßig sind es 5. Jeder Eintrag zeigt seinen Hex-, RGB- und HSL-Wert sowie den Anteil der sichtbaren Pixel, den er abdeckt.
Wie unterscheidet sich die durchschnittliche Farbe?
Die durchschnittliche Farbe ist der Mittelwert aller sichtbaren Pixel. Bei einem Foto mit blauem Himmel über einem roten Feld ist die dominante Farbe Blau oder Rot, der Durchschnitt dagegen eine trübe Mischung aus beiden. Der Durchschnitt eignet sich gut für unscharfe Platzhalter, die dominante Farbe für Akzente.
Wie werden transparente Pixel behandelt?
Pixel mit mehr als 50 % Transparenz werden ignoriert. So werden bei einem Logo auf transparentem Hintergrund die Logofarben statt Schwarz ausgegeben. Das Ergebnis zeigt dir, welcher Anteil des Bildes transparent war. Bei einem Bild ohne sichtbare Pixel wird eine Meldung statt einer Farbe ausgegeben.
Welche Formate kann ich analysieren?
JPEG-, PNG-, GIF-, WebP-, TIFF- und AVIF-Bilder bis zu 5 MB werden unterstützt. Animierte Dateien im Format GIF und WebP werden anhand ihres ersten Frames ausgewertet. CMYK-Bilder werden vor der Zählung in sRGB umgewandelt.
Werden große Bilder vorher verkleinert?
Bilder, die auf einer Seite größer als 4000 Pixel sind, werden vor der Zählung auf 4000 Pixel verkleinert. Dadurch ändern sich die Anteile höchstens geringfügig. Kleinere Bilder werden Pixel für Pixel gezählt.
Warum erscheinen ähnliche Farbtöne als separate Farben?
Die Farbbereiche umfassen jeweils 16 Stufen. Zwei Farbtöne auf unterschiedlichen Seiten einer Bereichsgrenze werden daher separat gezählt. Deshalb zeigt die Palette bei Farbverläufen und Fotos oft benachbarte Farbtöne. Erhöhe die Palettengröße, um mehr davon zu sehen.
Kann ich die Farben in CSS verwenden?
Ja. Jede Farbe wird als Hex-Code wie #3366cc sowie als rgb()- und hsl()-Wert ausgegeben. Bei letzterem werden der Farbton in Grad sowie Sättigung und Helligkeit in Prozent angegeben. Du kannst die Werte direkt in CSS, Designtools oder Theme-Einstellungen einfügen.
Wofür kann ich die dominante Farbe verwenden?
Typische Einsatzmöglichkeiten sind Hintergrundplatzhalter, während Bilder laden, Akzentfarben für Karten und Überschriften passend zu einem Titelbild, das Sortieren von Produktfotos nach Farbe und die Prüfung, ob Markenbilder zur Farbpalette passen. Das strukturierte Ergebnis erleichtert auch die Wiederverwendung der Werte in Skripten und Themes.
Ist das Ergebnis jedes Mal gleich?
Ja. Die Zählung ist deterministisch: Dieselbe Datei liefert immer dieselbe dominante Farbe, Palette und dieselben Anteile. Haben zwei Farbbereiche exakt dieselbe Anzahl, richtet sich ihre Reihenfolge danach, welche ihrer Farben zuerst auftritt.