Ga naar inhoud

Afbeelding Kleurkiezer & Palet

Afbeelding Kleurkiezer & Palet

Afbeelding Kleurkiezer & Palet laat je kleuren uit een afbeelding aanklikken, hoofdkleuren extraheren en CSS-variabelen of JSON exporteren voor design, merkkleuren en themapaletten.

Sleep afbeelding hierheen of klik om te selecteren

Ondersteunt PNG / JPEG / WebP / AVIF / HEIC / HEIF

Afbeelding Kleurkiezer & Palet

Snelstart

1
Afbeelding importeren: Slepen en neerzetten of klikken om te selecteren
2
Panel wisselen: Desktop toont zijpanel; Mobiel tik op onderste knop
3
Klikken om te kiezen: Klik ergens op afbeelding om die pixelkleur te krijgen
4
Kleur kopiëren: Na selectie HEX/RGB/CSS-formaat kopiëren
5
Kleurenaantal instellen: Sleep schuifregelaar of klik preset (4/6/8/12/16/24/32)
6
Palet extraheren: Klik extractieknop voor dominante kleurenlijst
7
CSS exporteren: Na extractie CSS-variabelenbestand exporteren
8
JSON exporteren: Na extractie JSON-databestand exporteren
9
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 en veiligheid

Alle verwerking gebeurt lokaal in de browser. Je kunt de huidige inhoud op elk moment vervangen, wissen en opnieuw verwerken.

Veelgestelde vragen

5

Ga verder met deze gerelateerde tools voor de volgende stap.