Afbeeldingstools

Kleurpalet-extractor

Drop een afbeelding en haal er de dominante kleuren uit met HEX-, RGB- en HSL-waarden, klaar om te kopiëren.

Drop hier een afbeelding of klik om te kiezen

Drop hier een afbeelding of klik om te kiezen PNG, JPG, WebP of GIF

Alle verwerking in je browser — geen upload, geen tracking.

Hoeveel kleuren

4 6 8 12

Palet

Wat doet deze tool

Designers stelen kleurpaletten van overal — een zonsondergang, een poster, een filmstill, een screenshot van iemands app. Deze tool automatiseert dat. Drop een afbeelding en krijg de dominante kleuren terug als swatches met HEX-, RGB- en HSL-waarden. Klik op één om de HEX te kopiëren of exporteer als CSS-variabelen, Tailwind-config of JSON. Volledig client-side: er gaat geen afbeelding naar een server, dus je kunt niet-uitgebrachte schermafbeeldingen, mood boards of gevoelige media zonder zorgen verwerken.

Hoe gebruik je het

Drop de afbeelding — Elk gangbaar formaat werkt — PNG, JPG, WebP, GIF. De paletkwaliteit is het beste bij afbeeldingen met heldere kleurgebieden; zeer ruisige of korrelige afbeeldingen kunnen modderige swatches geven.
Kies het aantal — 4 voor een punchy merkachtig palet. 6 is de UI sweet spot. 8–12 vangen subtieler tinten, handig voor illustratiereferenties.
Kopieer individuele swatches — Klik op een swatch om de HEX-waarde naar het klembord te kopiëren. De chip flasht "Gekopieerd!" ter bevestiging.
Exporteer het hele palet — Gebruik de onderste knoppen om het palet als CSS-variabelen, Tailwind colors-object of JSON te kopiëren. Plak direct in je project.

Hoe extractie werkt

We resizen de afbeelding naar een 200×200-canvas (sample de hele afbeelding, niet de hoeken) en lezen elk pixel via getImageData. Elke pixel-RGB wordt afgerond naar het dichtstbijzijnde veelvoud van 32, wat ongeveer 512 "buckets" geeft. We tellen pixels per bucket, sorteren op frequentie, nemen de top-N en middelen de echte RGB-waarden binnen elke bucket om de uiteindelijke swatch-kleur te krijgen. Snel, deterministisch en goed genoeg voor 95% van de afbeeldingen.

Het juiste aantal kiezen

4 kleuren werkt voor logo's en minimale merkidentiteiten — dwingt strikte hiërarchie af. 6 kleuren is waar de meeste design systems uitkomen: 1–2 merk, 1 accent, neutrals. 8–10 als je illustraties of game-assets bekijkt waarbij subtielere shades tellen. 12+ nadert het punt waarop je liever de hele afbeelding bekijkt — palet-extractie is niet ideaal voor schilderachtig werk met fijne gradiënten.

Veelgestelde vragen

Waarom zijn mijn paletkleuren iets anders dan een Photoshop-pipet?

We middelen kleuren binnen een bucket, dus een swatch komt mogelijk niet exact overeen met één pixel — die representeert het bucket-gemiddelde. Dat ligt meestal dichter bij de waargenomen dominante kleur dan willekeurig één pixel kiezen.

Werkt het algoritme als K-means?

Het is een eenvoudigere frequentie-bucketing-aanpak. K-means produceert marginaal betere clusters voor lastige afbeeldingen maar is veel trager en voegt een dependency toe. Voor 95% van de input geeft de bucket-methode even bruikbare resultaten — direct.

Waarom missen sommige kleuren die ik verwachtte?

Kleine kleurspatten worden overschaduwd door achtergronddominantie. Beslaat een kleur minder dan ~1-2% van de afbeelding, dan komt hij waarschijnlijk niet in het palet tenzij je het aantal verhoogt. Crop de afbeelding tot het gewenste gebied en run opnieuw.

Worden afbeeldingen geüpload?

Nee. Alles gebeurt in je browser. De enige netwerkcalls die deze pagina doet zijn voor zijn eigen assets.

Kan ik paletten extraheren uit afbeeldingen op een website?

Sla de afbeelding eerst op of maak een screenshot en drop die hier. We halen geen URL's op omdat dat een CORS-proxy of server vereist en we strikt client-side blijven.

Waarom gebruikt de Tailwind-export brand-1, brand-2?

Generieke namen die je kunt hernoemen naar je project. Drop het fragment in tailwind.config.js onder theme.extend.colors en hernoem de keys naar wat je design tokens noemen.

Kleurpalet-extractor