Farbpaletten-Extraktor

Holen Sie eine sofort nutzbare Farbpalette mit HEX-Codes aus einem beliebigen Bild.

Läuft in Ihrem Browser
Keine Uploads
Kein Konto

Ihr Browser-Tool wird geladen…

Was Farbpaletten-Extraktor macht

Statt Farben Pixel für Pixel auszuwählen, gruppiert der Extraktor alle Pixel des Bildes in die gewählte Anzahl an Farben, von 3 bis 12, und listet sie von der häufigsten zur seltensten auf. Jede Karte zeigt den HEX-Code, die RGB-Werte und den Prozentanteil des Bildes, den sie abdeckt.

Zwei Kopier-Buttons machen das Ergebnis leicht wiederverwendbar: „Alle HEX kopieren“ liefert eine kommagetrennte Liste, und „Als CSS kopieren“ liefert die Variablen --color-1 bis --color-n in einem :root-Block. Aktivieren Sie „Weiß, Schwarz und Grau ignorieren“, um Seitenhintergründe und Text zu überspringen, damit die Akzentfarben sichtbar werden. Dasselbe Bild ergibt immer dieselbe Palette.

Beispiel

Ihre Auswahl

Ein Bild mit 1000 × 200 px aus vier einfarbigen Streifen: #3157D5 (40 %), #ED6C50 (30 %), #2BAE84 (20 %), #16181D (10 %)
Anzahl Farben: 4

„Als CSS kopieren“ liefert

:root {
  --color-1: #3157D5;
  --color-2: #ED6C50;
  --color-3: #2BAE84;
  --color-4: #16181D;
}

Bei vier Volltönen und vier Plätzen wird jeder Streifen zu einem Farbfeld, sortiert nach seinem Anteil von etwa 40 %, 30 %, 20 % und 10 %.

Anleitung: Farbpaletten-Extraktor

Wählen Sie „Datei auswählen“ oder fügen Sie das Bild ein.
Stellen Sie „Anzahl Farben“ ein und aktivieren Sie bei UI-Screenshots „Weiß, Schwarz und Grau ignorieren“.
Klicken Sie auf „Alle HEX kopieren“, „Als CSS kopieren“ oder bei einer einzelnen Farbe auf „Kopieren“.

Gut zu wissen

Palettenfarben sind Mittelwerte von Pixelgruppen, sodass eine Farbe im Bild unter Umständen nicht exakt vorkommt. Für einen exakten Pixel verwenden Sie den Screenshot-Farbwähler.
Kleine Akzente, etwa ein dünner Link in Markenfarbe, können in einer größeren Gruppe aufgehen. Erhöhen Sie die Anzahl der Farben, um sie zu trennen.
Transparente und überwiegend transparente Pixel werden ignoriert, sodass der Hintergrund eines Logos nicht in seiner Palette erscheint.

Fragen zu Farbpaletten-Extraktor

Wie erhalte ich eine Farbpalette aus einem Bild?

Laden Sie das Bild, und die Palette erscheint darunter, sortiert danach, wie viel des Bildes jede Farbe abdeckt. Ändern Sie „Anzahl Farben“ für mehr oder weniger Farbfelder und kopieren Sie dann die HEX-Codes oder die CSS-Variablen.

Wie viele Farben sollte eine Palette haben?

Fünf oder sechs sind typisch für eine UI- oder Markenpalette: ein Hintergrund, eine Fläche, Text, eine Primärfarbe und ein oder zwei Akzente. Verwenden Sie 8 bis 12 für Fotos oder Illustrationen, bei denen Sie das ganze Spektrum möchten.

Warum zeigt meine Palette vor allem Weiß und Grau?

Screenshots von Apps bestehen überwiegend aus Hintergrund und Text. Aktivieren Sie „Weiß, Schwarz und Grau ignorieren“, um fast weiße, fast schwarze und graue Pixel zu überspringen, damit Marken- und Akzentfarben nach oben rücken.