Gruppe eines Pixels
k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)
Pixel derselben Gruppe werden gemittelt.
Farben aus Bild extrahieren
Analysiere ein PNG-, JPEG- oder WebP-Bild lokal und erhalte seine dominanten Farben in HEX und RGB.
- Zwischenablage
Bild
Kein Bild geladen
Zieh ein Bild hierher
Füge ein PNG-, JPEG- oder WebP-Bild hinzu. Die Datei bleibt auf deinem Gerät und alle Änderungen laufen lokal im Browser.
Du brauchst mehr Möglichkeiten?
Nutze mehrere Bearbeitungswerkzeuge in einem Arbeitsbereich, deine geöffnete Datei und deine Änderungen kommen mit.
Vollständigen Editor öffnenVerarbeitung…0 %
War dieses Werkzeug hilfreich?
Wie funktioniert dieses Tool?
Ein Foto, ein Plakat oder ein Logo enthält einige dominante Farben, die seinen Charakter ausmachen. Dieser Extraktor findet sie automatisch, 4 bis 12 nach Wahl, mit HEX-Code und dem Anteil am Bild. So überträgst du die Stimmung eines Fotos in einen Entwurf, findest die Farben eines Logos ohne Quelldatei wieder oder baust eine zum Titelbild passende Palette.
Importiere ein PNG-, JPEG- oder WebP-Bild, wähle die Anzahl der Farben (4, 6, 8, 10 oder 12; Standard 6) und klicke auf Palette extrahieren. Damit es schnell geht, wird eine auf 420 px an der längsten Seite verkleinerte Kopie analysiert; fast transparente Pixel werden ignoriert.
Die Farben werden in Stufen von 24 Werten je Rot-, Grün- und Blaukanal gruppiert, und jede Gruppe erhält die Durchschnittsfarbe ihrer Pixel. Die größten Gruppen bleiben erhalten, danach werden Farben mit weniger als 28 Abstand im RGB-Raum zusammengelegt: Zwei fast gleiche Rottöne zählen als einer.
Die Palette erscheint von der häufigsten zur seltensten Farbe. Jedes Farbfeld zeigt seinen HEX-Code und den Prozentsatz am analysierten Bild; ein Klick kopiert den Code. Ein farbarmes Bild kann weniger Farben liefern als angefordert.
So verwenden Sie dieses Tool
Bild importieren
Lege ein Foto, einen Screenshot oder ein Logo als PNG, JPEG oder WebP ab.
Farbanzahl wählen
4 für ein einfaches Logo, 8 bis 12 für ein nuancenreiches Foto.
Extrahieren und kopieren
Klicke auf Palette extrahieren und dann auf ein Farbfeld, um seinen HEX-Code zu kopieren.
So wird die Palette berechnet
Die Extraktion kombiniert eine stufenweise Quantisierung, das Zusammenlegen benachbarter Farben und eine Anteilsberechnung.
Zusammenlegen benachbarter Farben
d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28
Zwei Farben mit weniger als 28 Abstand werden gewichtet gemittelt.
Bildanteil
p = nc ÷ n_deckend × 100
Auf eine Nachkommastelle gerundet.
- R, G, B
- Rot-, Grün- und Blaukanal von 0 bis 255
- nc
- Anzahl der Pixel, die der Farbe zugeordnet sind
- n_deckend
- Anzahl der analysierten nicht transparenten Pixel
Anwendungsfälle
Die Stimmung eines Fotos übernehmen
Übernimm die Töne eines Titelfotos für Überschriften und Schaltflächen einer Seite.
Logofarben zurückgewinnen
Erhalte die HEX-Codes eines Logos, das du nur als PNG-Bild hast.
Corporate Design prüfen
Kontrolliere, ob ein Entwurf die Markenfarben in den richtigen Anteilen nutzt.
Beispiele
Strandfoto mit transparentem Bereich
Die 200 transparenten Pixel werden nicht mitgezählt, daher 600 ÷ 1000 = 60 %. Es gibt nur 3 unterschiedliche Farben, also enthält die Palette 3 statt 4.
Eingabe
Bild mit 1.200 Pixeln: 600 Himmelblau (135, 206, 235), 300 Sand (228, 197, 144), 100 Dunkelgrau und 200 transparent; 4 Farben angefordertErgebnis
#87CEEB 60 % · #E4C590 30 % · #282828 10 %Zwei fast gleiche Rottöne
Die beiden Rottöne liegen √(15² + 10² + 5²) ≈ 18,7 < 28 auseinander und werden zu einem gewichteten Mittel (206, 34, 32) mit 80 % des Bildes zusammengelegt.
Eingabe
500 Pixel (200, 30, 30), 300 Pixel (215, 40, 35) und 200 blaue Pixel (30, 60, 200)Ergebnis
#CE2220 80 % · #1E3CC8 20 %Tipps und bewährte Vorgehensweisen
- Schneide das Bild vorher auf den interessanten Bereich zu: Ein großer weißer Hintergrund oder ein Himmel würde sonst Platz eins der Palette belegen.
- Fordere bei Fotos mehr Farben an als nötig und behalte die, die zusammenpassen.
- Die extrahierten Farben sind Mittelwerte: Für den exakten Code eines Pixels vergrößere eine einfarbige Fläche und prüfe ihn mit dem Farbkonverter.
- Teste die Palette anschließend mit dem Farbenblindheit-Simulator, wenn sie Informationen unterscheidbar machen soll.
Quellen und Referenzen
- MDN Web Docs, Pixel manipulation with canvas (öffnet in einem neuen Tab)Seite auf Englisch
Häufig gestellte Fragen
Wie wählt das Tool die dominanten Farben?
Es gruppiert ähnliche Pixel in Stufen von 24 Werten je Kanal, behält die größten Gruppen, legt zu ähnliche Farben zusammen und sortiert das Ergebnis nach Bildanteil.
Warum erhalte ich weniger Farben als angefordert?
Weil das Bild nicht genug unterschiedliche Farben enthält: Nach dem Zusammenlegen benachbarter Töne bleiben eventuell weniger übrig als gewählt.
Was bedeutet der Prozentsatz?
Den Anteil der analysierten Pixel ohne transparente, der dieser Farbe zugeordnet wurde. Die Summe kann unter 100 % liegen, wenn Nebenfarben nicht angezeigt werden.
Sind die Codes pixelgenau?
Es sind Mittelwerte von Pixelgruppen, berechnet auf einer auf 420 px verkleinerten Kopie. Sie geben die Stimmung treu wieder, nicht den Wert eines einzelnen Pixels.
Zählen transparente Bereiche mit?
Nein. Pixel mit sehr geringer Deckkraft werden ignoriert, damit ein freigestelltes Logo kein störendes Schwarz oder Weiß liefert.
Wird mein Bild auf einen Server hochgeladen?
Nein. Abtastung und Berechnung der Palette finden in deinem Browser statt.
Verwandte Werkzeuge
Mit diesen Werkzeugen weitermachen
Werkzeuge, die diesem ähnlich sind oder es ergänzen.
Ähnliche Werkzeuge
Erstelle aus einer Farbe eine komplementäre, analoge, triadische oder monochrome Palette.
Bilder & GrafikenDieses Werkzeug verwenden
Rechne eine Farbe zwischen HEX, RGB und HSL um, mit allen gleichwertigen Werten.
Bilder & GrafikenDieses Werkzeug verwenden
Zeige, wie ein Bild bei verschiedenen Formen von Farbsehschwäche wirken kann.
Bilder & GrafikenDieses Werkzeug verwenden
Auch interessant
ReferenzKonzepte und TechnologienAnfänger
Wie ist ein digitales Bild aufgebaut?
Verstehe, wie Pixel, Farbkanäle, Farbtiefe und Transparenz zusammenwirken und daraus ein auf dem Bildschirm sichtbares Bild entsteht.
31. August 20267 min
LeitfadenBewährte MethodenAnfänger
Wie erstellt man eine Farbpalette aus einem Bild?
Lerne, dominante Farben aus einem Bild auszuwählen, sie zu einer brauchbaren Webpalette zu ordnen und Kontrast, Rollen und Lesbarkeit getrennt zu prüfen.
31. August 20265 min
ReferenzKonzepte und TechnologienAnfänger
RGB, HEX oder HSL: Welche Notation ist sinnvoll?
Verstehe, wie RGB, HEX und HSL dieselben Webfarben unterschiedlich beschreiben und wann welche Notation in CSS, Design und Entwicklung praktisch ist.
31. August 20264 min
LeitfadenBewährte MethodenFortgeschritten
Bilder für Webperformance optimieren
Verbinde Dimensionen, Format, Kompression, responsive Quellen, Ladepriorität und Layoutstabilität zu einem vollständigen Web-Image-Workflow.
31. August 20265 min