Zum Inhalt springen

Bildfarben auswählen und Palette erstellen

Wählen Sie Farben aus einem Bild lokal im Browser aus, kopieren Sie HEX/RGB/CSS, erstellen Sie eine repräsentative Palette mit 2-32 Farben und exportieren Sie CSS-Variablen oder JSON mit HEIC/HEIF-Eingabe.

Bild hierher ziehen oder klicken zum Auswählen

Unterstützt PNG / JPEG / WebP / AVIF / HEIC / HEIF

Dateianzahl

0 / 1

Gesamtgröße

0 bytes / 25 MB

Einzeldatei-Limit

25 MB

Bildfarben auswählen und Palette erstellen

Schnellstart

1
Ein Bild importieren
2
Vorschau anklicken und HEX/RGB/CSS kopieren
3
Palettengröße wählen (4/6/8/12/16/24/32)
4
Repräsentative Farben extrahieren
5
CSS-Variablen oder JSON exportieren

Häufige Anwendungsfälle

Design/Poster Farbauswahl

Primär- und Akzentfarben für Farbschema extrahieren

Theme/Designsystem

CSS-Variablen oder JSON für Projekt exportieren

Komponenten-Styling

Passende Farben für Buttons, Tags, Diagramme extrahieren

Markenkonsistenz

Standard-Farbpalette aus Marken-Assets extrahieren

Farbwähler & Palettenoptionen

Farbanzahl: 2–32, üblicherweise 8/12; Fotos/Verläufe deuten auf 16-32 hin
Voreinstellungsbuttons: 4/6/8/12/16/24/32 Ein-Klick-Wechsel
Sortierung: Nach quantisierter Probenanzahl von hoch nach niedrig, die häufigsten Farben zuerst
Zahl neben der Farbe: Zeigt die quantisierte Beispielanzahl aus dem heruntergerechneten Palettenbild an
Exportvertrag: CSS-Variablen verwenden Namen wie :root { --color-1: ... }; JSON listet index/hex/css/rgb/count für jede Palettenfarbe auf.

Nutzungstipps

Mit 8/12 beginnen für Gesamteffekt, dann bei Bedarf auf 16/24/32 erhöhen
Bei Projektverwendung --color-1 in semantische Namen umbenennen (z. B. --color-primary)
Seite bei großen Bildern im Vordergrund halten um Browser-Drosselung zu vermeiden

Einschränkungen und Kompatibilität

Automatisches Downsampling der Palettenextraktion für Leistung, Ergebnisse sind repräsentative Farben.
Präzision: Die Klickauswahl nutzt eine angezeigte Leinwand mit bis zu 2.048 Pixeln auf der längsten Seite. Bei der Palettenextraktion wird ein 256-Pixel-Beispiel verwendet.
HEIC/HEIF ist nur eine Eingabe; Die lokale Dekodierung schlägt möglicherweise fehl. Konvertieren Sie daher bei Bedarf in PNG/JPEG.
Alpha-Handhabung: CSS kann rgba(...) ausgeben; HEX/RGB enthalten kein Alpha; JSON behält Alpha über den CSS-Wert bei.
Eingabegrenze: kein URL-Import, kein Paste-Import, keine Bildschirmpipette und kein Browsererweiterungs-Workflow.
Farbgrenze: keine HSL/CMYK/Pantone/LAB/OKLCH-Konvertierung, Kontrastprüfung oder WCAG-Matrix.
Exportgrenze: kein Tailwind/SCSS/ASE/Figma/Procreate-Farbfeldexport.

Datenschutz & Sicherheit

Farbauswahl und Palettenextraktion laufen im Browser. Das Quellbild bleibt im Seitenspeicher, solange dieses Tool geöffnet ist. Die Einstellung für die Palettengröße kann im Browserspeicher bleiben; wenn WebDAV-Synchronisierung aktiviert ist, kann diese Einstellung nach deinen Vorgaben synchronisiert werden. Ausgewählte Farbe, Palette, Fehlermeldung und Vorschau-Zoom/Pan-Daten sind ein Laufzeit-Prüfzustand und können, solange vorhanden, auch über das WebDAV state schema synchronisiert werden. Die Bilddatei wird standardmäßig nicht synchronisiert; sie gelangt nur in die WebDAV-Anhangssynchronisierung, wenn du die Anhangssynchronisierung ausdrücklich aktivierst. CSS/JSON-Palettenexporte werden beim Download erzeugt und nicht als separate Ergebnisse gespeichert. Lösche auf gemeinsam genutzten Geräten bei Bedarf Bild, ausgewählte Farben, Palette, gespeicherte Einstellungen und Websitedaten.

Häufige Fragen

5

Fahren Sie mit diesen verwandten Tools im nächsten Schritt fort.

Die gesamte Verarbeitung der Tools findet lokal in Ihrem Browser statt.