Farbwähler & Palettenextraktor – Farben aus dem Bild auswählen

Lade ein beliebiges Foto hoch, klicke, um eine Pixelfarbe auszuwählen (HEX / RGB / HSL) oder extrahiere automatisch die dominante Palette. Lade sie als JSON- oder CSS-Variablen herunter.

Fügen Sie ein Bild ab, um dessen Palette zu extrahieren

Über Color Picker

Quantisiert dein Bild in die gewünschte Anzahl dominanter Farben mittels 4-Bit-pro-Kanal-Bucketing und sortiert dann nach Frequenz. Läuft komplett in deinem Browser – dein Bild verlässt dein Gerät nie.

Verbessern Sie Ihre Bilder weiter

Bringen Sie Ihre Fotobearbeitung mit diesen beliebten Tools auf die nächste Stufe

📝

Hinzufügen von Text zum Bild

Hinzufügen von Bildunterschriften und Titeln zu Ihrem optimierten Foto

🖼️

Fotorand hinzufügen

Umrahmen Sie Ihren Effekt mit schönen Rändern

🗜️

Bild komprimieren

Optimieren Sie Ihr verbessertes Bild für die Freigabe

📐

Bildgröße ändern

Ändern der Bildabmessungen

Entdecken Sie alle Foto-Tools

Frequently Asked Questions

Laden Sie beliebige JPG-, PNG-, WebP- oder GIF-Dateien hoch und klicken Sie irgendwo auf das angezeigte Bild – der genaue Pixel unter Ihrem Cursor wird als HEX, RGB und HSL mit einem Klick für jedes Format als HEX, RGB und HSL angezeigt. Perfekt, um eine Markenfarbe zu kombinieren, eine Probe aus einem Foto zu nehmen oder Akzenttöne aus einem Design-Mockup zu übernehmen.

usage

Das Bild wird auf seiner längsten Seite auf 320 Pixel heruntergesampelt, dann wird jedes Pixel um seine obersten 4 Bits pro Kanal eingeblendet. Die am häufigsten besetzten Buckets werden auf volle 8-Bit-Farben gemittelt, nach Häufigkeit sortiert und als deine Palette zurückgegeben. Das Ergebnis sind typischerweise 5–24 dominante Farben, die das Bild visuell zusammenfassen.

technical

Ja. Die Download-Buttons erzeugen zwei Formate: einen CSS-Variablenblock, der in einen :root-Selektor eingefügt werden kann (--farbe-1, --farbe-2...), und eine JSON-Datei mit Hex-, RGB-Komponenten und Gewichtsprozentsatz für jede Farbe. Beide Formate integrieren sich sauber in Design-Tokens, Tailwind-Konfigurationen und Palettenbibliotheken.

features

Nein – Farbauswahl und Palettenextraktion erfolgen komplett in Ihrem Browser über die HTML-Canvas-API. Das Bild bleibt auf deinem Gerät, was das Tool für nicht veröffentlichte Produktfotos, Entwurfs-Mockups und Markenassets unter NDA sicher macht.

privacy

Für die Markenidentität sind 5–8 Farben der ideale Spot – sie fangen das dominierende Thema ein, ohne Akzentwahlen zu verwässern. Für die Datenvisualisierung empfehlen wir 10–16 Farben, damit genügend kategorische Farbtöne vorhanden sind. Mit dem Schieberegler kannst du zwischen 5 und 24 wählen.

tips

Pixel mit Alpha unter 128 werden ignoriert, sodass transparente Hintergründe die Palette nicht mit "Hintergrund"-Farben verschmutzen. Das macht Image Color Picker besonders gut für Produktausschnitte, Aufkleberkunstwerke und isolierte Motive.

technical

HEX (#RRGGBB) ist am kompaktesten und wird standardmäßig von CSS, Figma und Sketch verwendet. RGB zeigt die drei Komponentenwerte von 0 bis 255 an – nützlich, wenn man programmatisch mit Bilddaten arbeitet. HSL (Farbton, Sättigung, Helligkeit) ist intuitiv, um Farben anzupassen: Farbton verschieben, um die Farbfamilie zu verändern, Helligkeit für Farbtöne und Schattierungen anpassen.

technical

Ja. Kostenlos, kein Konto erforderlich, keine Beschränkungen bei der Bildgröße oder der Anzahl der extrahierten Paletten. Es gibt nichts zu installieren – das gesamte Tool ist eine einzige Webseite.

pricing

Use Cases

Markenidentitätsprüfung

Holen Sie die genauen HEX-Werte aus einem bestehenden Logo oder Marketing-Asset heraus, um sie in Ihren Stilguide einzufüttern. Gleiche die Farben der Konkurrenzmarke für ein Positionierungsdeck oder Pitch ab.

design

Webdesign-Palettenbau

Extrahiere dominante Farben aus einem Foto oder Moodboard, exportiere sie als CSS-Variablen und füge sie in dein Stylesheet ein. Der 5-8 Farb-Sweet Spot deckt Primär-, Akzent- und Neutraltöne für einen vollständigen Design-System-Seed ab.

design

E-Commerce-Produktlisten

Passen Sie die Hintergrundfarben des Produktfotos an Ihr Ladenthema ab. Wähle die dominante Akzentfarbe aus einem Sneaker- oder Kleidfoto und nutze sie als Highlight-Profil im Angebot.

ecommerce

Innen- und Modeinspiration

Fotografiere einen Raum oder ein Outfit, das dir gefällt, und extrahiere die Farbpalette. Nutzen Sie es, um Farbe, Stoffe oder Accessoires auszuwählen, die das bestehende Schema ergänzen – und damit visuelle Inspirationen in umsetzbare Muster verwandeln.

lifestyle

Datenvisualisierungsschemata

Generiere eine kategorische Palette von 10–16 Farben, die von einem Bild abgeleitet ist, das du hervorrufen möchtest (z. B. ein Aquarell für eine weiche Karte, ein Sonnenuntergang für warm-zu-kühle Farbverläufe). Besser, als generische Farbtöne zu wählen.

data

Spiel- und UI-Asset-Workflows

Extrahiere die indexierte Farbpalette aus Sprite-Art oder UI-Mockups, um sie in ein Pixel-Art-Tool oder eine Spiele-Engine einzuspeisen. Der Paletten-JSON-Export integriert sich mit Aseprite, Photoshop und den meisten Asset-Pipelines.

gamedev