Tokenlabor

Farbpalette aus Bild erstellen

Farbpalette aus Bild erstellen: Foto oder Logo laden und die wichtigsten 5 bis 10 Farben als HEX-Codes erhalten, ohne Upload direkt im Browser.

Palette (Klick auf eine Farbe kopiert den HEX-Code)
Bild
Palette zum Kopieren

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Farben aus Bild extrahieren

Mit diesem Werkzeug erstellen Sie eine Farbpalette aus Bild-Dateien, etwa aus einem Foto, einem Logo oder einem Screenshot. Es ermittelt die 5 bis 10 Farben, die das Bild am stärksten prägen, und zeigt sie als HEX-Codes mit RGB-Wert und Anteil. So können Sie Farben aus Bild-Vorlagen extrahieren und als Farbschema für eine Website, eine Präsentation oder ein Moodboard verwenden. Die Farbcodes aus Bild-Dateien lassen sich als Liste, als CSS- oder SCSS-Variablen oder als JSON kopieren.

Technisch wird das Bild im Browser auf einer Canvas-Fläche verkleinert. Danach fasst das Verfahren k-means alle Bildpunkte zu Gruppen ähnlicher Farben zusammen; jede Farbe der Palette ist der Mittelwert ihrer Gruppe. Der Start ist fest vorgegeben, deshalb liefert dasselbe Bild mit denselben Einstellungen immer dieselbe Palette. Transparente Pixel, etwa bei PNG-Logos, werden nicht mitgezählt.

Grenzen: Weil die Palette aus Mittelwerten besteht, kommt ein HEX-Code nicht unbedingt exakt so im Bild vor. Kleine, auffällige Akzente wie ein rotes Detail auf großer Fläche können in einer größeren Gruppe aufgehen; erhöhen Sie dann die Anzahl der Farben. Das Bild wird nicht hochgeladen, sondern nur in Ihrem Browser gelesen.

Anleitung: Farbpalette aus Bild in 4 Schritten

  1. Ein Bild wählen, in das Feld ziehen oder mit Strg+V einfügen; alternativ „Beispielbild laden“.
  2. Anzahl Farben (5 bis 10), Sortierung und Genauigkeit einstellen.
  3. Das Ausgabeformat wählen: HEX-Liste, CSS-Variablen, SCSS-Variablen, JSON-Array oder RGB-Liste.
  4. Einzelne Farben per Klick kopieren oder die ganze Palette mit „Kopieren“ übernehmen.

Typische Anwendungsfälle

  • Aus dem Logo eines Kunden die Markenfarben für Website oder Präsentation ableiten.
  • Ein Moodboard-Foto in ein Farbschema für Social-Media-Grafiken übersetzen.
  • Farbcodes aus einem Screenshot ermitteln, wenn keine Designvorlage vorliegt.
  • Die Palette als CSS-Variablen direkt in ein Stylesheet übernehmen.
Fragen

Häufige Fragen

Wird mein Bild hochgeladen?

Nein. Das Bild wird nur in Ihrem Browser auf eine Canvas-Fläche gezeichnet und dort ausgewertet. Es verlässt Ihr Gerät nicht und wird nicht gespeichert.

Welche Bildformate funktionieren?

Alles, was Ihr Browser anzeigen kann, also in der Regel JPG, PNG, WebP, GIF (erstes Bild) und SVG. HEIC-Fotos vom iPhone öffnet nicht jeder Browser; wandeln Sie sie dann vorher in JPG um.

Warum finde ich eine bestimmte Farbe nicht in der Palette?

Das Verfahren fasst ähnliche Farben zusammen und gewichtet nach Fläche. Kleine Details gehen dabei leicht in größeren Flächen auf. Stellen Sie mehr Farben ein oder schneiden Sie das Bild vorher auf den gewünschten Ausschnitt zu.

Kann ich die Palette direkt in CSS verwenden?

Ja. Wählen Sie als Ausgabeformat CSS-Variablen; Sie erhalten einen :root-Block mit --farbe-1, --farbe-2 und so weiter, den Sie in Ihr Stylesheet kopieren und danach sinnvoll umbenennen.

Wie wird aus der Palette ein gutes Farbschema?

Nehmen Sie eine dunkle Farbe für Text, eine helle für Flächen und eine kräftige als Akzent. Prüfen Sie Text- und Hintergrundfarbe anschließend mit dem Kontrastprüfer, damit die Kombination gut lesbar ist.

Wie finde ich den genauen Farbcode eines einzelnen Pixels?

Dafür eignet sich eine Pipette, etwa in Grafikprogrammen oder unter Windows der Farbwähler der PowerToys (Win+Umschalt+C). Dieses Werkzeug ermittelt dagegen die prägenden Farben des ganzen Bildes als Mittelwerte.

Wie viele Farben sollte ein Farbschema haben?

Für Websites reichen meist drei bis fünf: eine Text- und eine Hintergrundfarbe, eine Akzentfarbe und ein bis zwei Abstufungen. Mehr Farben machen ein Design schnell unruhig.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen

CSS-Grid-Generator

Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.

Öffnen