Ga naar inhoud

Afbeelding Kleurkiezer & Palet

Kies kleuren uit één afbeelding in de browser, kopieer HEX/RGB/CSS, extraheer een representatief palet van 2-32 kleuren en exporteer CSS-variabelen of JSON met HEIC/HEIF-ondersteuning.

Sleep afbeelding hierheen of klik om te selecteren

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

Aantal bestanden

0 / 1

Totale grootte

0 bytes / 25 MB

Limiet per bestand

25 MB

Afbeelding Kleurkiezer & Palet

Snelstart

1
Importeer één afbeelding
2
Klik op voorbeeld en kopieer HEX/RGB/CSS
3
Kies paletgrootte (4/6/8/12/16/24/32)
4
Extraheer representatieve kleuren
5
Exporteer CSS-variabelen of JSON

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

Kleuraantal: 2-32, gewoonlijk 8/12; foto's/gradiënten suggereren 16-32
Presetknoppen: 4/6/8/12/16/24/32 één-klik wisselen
Sorteren: op gekwantificeerd aantal monsters van hoog naar laag, de meest voorkomende kleuren eerst
Getal naast kleur: Toont het gekwantiseerde aantal monsters van de gedownsampelde paletafbeelding
Contract exporteren: CSS-variabelen gebruiken:root --color-1 namen; JSON geeft index/hex/css/rgb/count weer voor elke paletkleur.

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

Paletextractie auto-downsamples voor prestaties, resultaten zijn representatieve kleuren.
Precisie: klikbemonstering gebruikt een weergegeven canvas tot 2.048 px aan de langste zijde; paletextractie gebruikt een monster van 256 px.
HEIC/HEIF is alleen invoer; lokale decodering kan mislukken, dus converteer indien nodig naar PNG/JPEG.
Alpha-verwerking: CSS kan rgba(...) uitvoeren;HEX/RGB bevatten geen alfa; JSON behoudt alpha via de CSS-waarde.
Invoergrens: geen URL-import, plakimport, schermpipet of workflow voor browserextensies.
Kleurgrens: geen HSL/CMYK/Pantone/LAB/OKLCH-conversie, contrastcontrole of WCAG-matrix.
Exportgrens: geen Tailwind/SCSS/ASE/Figma/Procreate-staalexport.

Privacy & veiligheid

Kleur kiezen uit een afbeelding en paletextractie gebeuren in de browser. De bronafbeelding blijft in het paginageheugen zolang deze tool open is. De instelling voor paletgrootte kan in browseropslag blijven; als WebDAV-sync is ingeschakeld, kan die instelling volgens je instellingen synchroniseren. Gekozen kleur, palet, foutmelding en preview-zoom/pan-gegevens zijn runtime-reviewstatus en kunnen, zolang aanwezig, ook via het WebDAV state schema synchroniseren. Het afbeeldingsbestand wordt standaard niet gesynchroniseerd; het komt alleen in WebDAV-bijlagesynchronisatie als je bijlagesynchronisatie expliciet inschakelt. CSS/JSON-paletexports worden bij het downloaden gegenereerd en niet als afzonderlijke resultaten opgeslagen. Wis op een gedeeld apparaat waar nodig de afbeelding, gekozen kleuren, het palet, opgeslagen instellingen en sitegegevens.

Veelgestelde vragen

5

Ga verder met deze gerelateerde tools voor de volgende stap.

Alle verwerking van tools vindt lokaal plaats in je browser.