Bild-Farbwähler & Palette
Bild-Farbwähler & Palette
Klicken zum Farbenwählen aus Bild, automatisch dominante Farben und Palette extrahieren, HEX/RGB kopieren und CSS-Variablen exportieren. Unterstützt PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Bild hierher ziehen oder klicken zum Auswählen
Unterstützt PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Schnellstart
- Bild importieren: Drag & Drop oder klicken zum Auswählen
- Panel wechseln: Desktop zeigt Seitenpanel; Mobil auf unteren Button tippen
- Klicken zum Wählen: Beliebige Stelle im Bild klicken um Pixelfarbe zu erhalten
- Farbe kopieren: Nach Auswahl HEX/RGB/CSS-Format kopieren
- Farbanzahl einstellen: Schieberegler ziehen oder Voreinstellung klicken (4/6/8/12/16/24/32)
- Palette extrahieren: Extrahieren-Button klicken für dominante Farbliste
- CSS exportieren: Nach Extraktion CSS-Variablen-Datei exportieren
- JSON exportieren: Nach Extraktion JSON-Datendatei exportieren
- Zurücksetzen: Aktuelles Bild und Ergebnisse löschen
📌 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, üblich 8/12; Fotos/Verläufe empfehlen 16–32
- Voreinstellungsbuttons: 4/6/8/12/16/24/32 Ein-Klick-Wechsel
- Sortierung: Nach Prozentsatz von hoch zu niedrig, häufigste Farben zuerst
- Zahl neben Farbe: Zeigt Pixelprozentsatz im Bild
🧭 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
- Einzeldateilimit 128MB, sehr große Bilder können Verlangsamung verursachen
- Palettenextraktion macht automatisches Downsampling für Leistung, Ergebnisse sind repräsentative Farben
- HEIC/HEIF Dekodierung hängt von Browser-Unterstützung ab, bei Fehler in JPG/PNG konvertieren
- Transparente Pixel werden ignoriert oder als tatsächliches RGBA verarbeitet
🔒 Datenschutz & Sicherheit
- Alle Verarbeitung erfolgt im Browser; Daten verlassen nie Ihr Gerät
❓ Häufige Fragen
Wie verwendet man die exportierte CSS-Datei?
Exportiertes :root { --color-1: ... } in globales CSS einfügen, dann mit var(--color-1) referenzieren.
Wofür ist exportiertes JSON?
Für Skript/Designsystem-Wiederverwendung, z.B. Design Tokens oder Theme-Konfiguration generieren. Jede Farbe enthält hex/css/rgb und count.
Welche Farbanzahl wird empfohlen?
Allgemeines UI: 8 oder 12; minimale Icons: 4–6; Fotos/Verläufe: 16–32. Voreinstellungen zum schnellen Vergleich nutzen.
Warum sind geklickte und Palettenfarben unterschiedlich?
Klick-Auswahl ist einzelnes Pixel; Palette quantisiert gesamtes Bild für repräsentative Farben mit Betonung des Gesamttrends.
Warum ist der Export-Button ausgegraut?
Zuerst 'Palette extrahieren' Button klicken, Export wird nach Extraktion verfügbar.
Wie wird der exportierte Dateiname generiert?
Standard verwendet Original-Dateiname (ohne Erweiterung) + .palette-Anzahl + .css/.json, ungültige Zeichen werden automatisch bereinigt.