Afbeelding Kleurkiezer & Palet
Afbeelding Kleurkiezer & Palet
Klik om kleuren uit afbeelding te kiezen, extraheer automatisch dominante kleuren en palet, kopieer HEX/RGB en exporteer CSS-variabelen. Ondersteunt PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Sleep afbeelding hierheen of klik om te selecteren
Ondersteunt PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Snelstart
- Afbeelding importeren: Slepen en neerzetten of klikken om te selecteren
- Panel wisselen: Desktop toont zijpanel; Mobiel tik op onderste knop
- Klikken om te kiezen: Klik ergens op afbeelding om die pixelkleur te krijgen
- Kleur kopiëren: Na selectie HEX/RGB/CSS-formaat kopiëren
- Kleurenaantal instellen: Sleep schuifregelaar of klik preset (4/6/8/12/16/24/32)
- Palet extraheren: Klik extractieknop voor dominante kleurenlijst
- CSS exporteren: Na extractie CSS-variabelenbestand exporteren
- JSON exporteren: Na extractie JSON-databestand exporteren
- Resetten: Huidige afbeelding en resultaten wissen
📌 Veelvoorkomende scenario's
- Design/poster kleurselectie: Primaire en accentkleuren extraheren voor kleurenschema
- Thema/designsysteem: CSS-variabelen of JSON voor project exporteren
- Componentstyling: Bijpassende kleuren extraheren voor knoppen, tags, grafieken
- Merkconsistentie: Standaard kleurenpalet extraheren uit merkassets
🎛️ Kleurkiezer & Paletopties
- Kleurenaantal: 2–32, gebruikelijk 8/12; foto's/verlopen suggereren 16–32
- Presetknoppen: 4/6/8/12/16/24/32 één-klik wisselen
- Sortering: Op percentage van hoog naar laag, meest voorkomende kleuren eerst
- Nummer naast kleur: Toont pixelpercentage in afbeelding
🧭 Gebruiksadvies
- Begin met 8/12 voor algeheel effect, verhoog dan naar 16/24/32 indien nodig
- Bij gebruik in project, hernoem --color-1 naar semantische namen (bijv. --color-primary)
- Houd pagina op voorgrond bij extractie grote afbeeldingen om browserbeperking te vermijden
⚠️ Beperkingen & compatibiliteit
- Enkel bestandslimiet 128MB, zeer grote afbeeldingen kunnen vertraging veroorzaken
- Paletextractie downsampled automatisch voor prestaties, resultaten zijn representatieve kleuren
- HEIC/HEIF-decodering hangt af van browserondersteuning, converteer naar JPG/PNG bij falen
- Transparante pixels worden genegeerd of verwerkt als werkelijke RGBA
🔒 Privacy & veiligheid
- Alle verwerking gebeurt in uw browser; gegevens verlaten nooit uw apparaat
❓ Veelgestelde vragen
Hoe het geëxporteerde CSS-bestand gebruiken?
Zet geëxporteerde :root { --color-1: ... } in globale CSS, verwijs dan met var(--color-1).
Waar is geëxporteerde JSON voor?
Voor script/designsysteem hergebruik, bijv. Design Tokens of themaconfiguratie genereren. Elke kleur bevat hex/css/rgb en count.
Welk kleurenaantal wordt aanbevolen?
Algemene UI: 8 of 12; minimale iconen: 4–6; foto's/verlopen: 16–32. Gebruik presets om snel te vergelijken.
Waarom zijn geklikte en paletkleuren verschillend?
Klik-selectie krijgt enkele pixel; palet quantiseert hele afbeelding voor representatieve kleuren die algehele trend benadrukken.
Waarom is exportknop grijs?
Moet eerst 'Palet Extraheren' klikken, export beschikbaar na voltooiing extractie.
Hoe wordt geëxporteerde bestandsnaam gegenereerd?
Standaard gebruikt originele bestandsnaam (zonder extensie) + .palette-aantal + .css/.json, met illegale tekens automatisch opgeschoond.