Kleurkiezer en paletextractor - Kies kleuren uit een afbeelding

Upload een willekeurige JPG, PNG, WebP of GIF en klik op een willekeurige plek op de weergegeven afbeelding — de exacte pixel onder je cursor wordt gemeten en getoond als HEX, RGB en HSL, met één klik kopiëren voor elk formaat. Perfect om een merkkleur te matchen, een staal uit een foto te nemen of accenttinten uit een ontwerpmodel te halen.

De afbeelding wordt verkleind tot 320 pixels aan de langste zijde, waarna elke pixel wordt ingedeeld op basis van de bovenste 4 bits per kanaal. De best gevulde groepen worden gemiddeld naar volledige 8-bitskleur, gesorteerd op frequentie en als jouw palet teruggegeven. Het resultaat bestaat doorgaans uit 5-24 dominante kleuren die de afbeelding visueel samenvatten.

Ja. De downloadknoppen leveren twee formaten op: een CSS-variabelenblok dat klaar is om in een :root-selector te plakken (--color-1, --color-2…), en een JSON-bestand met hex, RGB-componenten en gewichtspercentage voor elke kleur. Beide formaten integreren naadloos in designtokens, Tailwind-configuraties en paletbibliotheken.

Nee — het kiezen van kleuren en het extraheren van paletten gebeurt volledig in je browser via de HTML-canvas-API. De afbeelding blijft op je apparaat, waardoor de tool veilig is voor nog niet uitgebrachte productfoto's, conceptmock-ups en merkmateriaal onder geheimhouding.

Voor huisstijlwerk is 5-8 kleuren het ideale aantal — het vat het dominante thema zonder de accentkeuzes te verwateren. Voor datavisualisatie raden we 10-16 kleuren aan, zodat je voldoende categorische tinten hebt. Met de schuifregelaar kies je tussen 5 en 24.

Pixels met een alpha onder 128 worden genegeerd, zodat transparante achtergronden het palet niet vervuilen met "achtergrondkleuren". Daardoor is de Afbeeldingskleurkiezer bij uitstek geschikt voor uitgeknipte producten, stickerontwerpen en geïsoleerde onderwerpen.

HEX (#RRGGBB) is het compactst en is wat CSS, Figma en Sketch standaard gebruiken. RGB toont de drie componentwaarden van 0-255 — handig wanneer je programmatisch met beeldgegevens werkt. HSL (tint, verzadiging, helderheid) is intuïtief voor het aanpassen van kleuren: verschuif de tint om de kleurfamilie te wijzigen, pas de helderheid aan voor lichtere en donkerdere tinten.

Ja. Gratis, geen account nodig, geen limieten op de afbeeldingsgrootte of het aantal geëxtraheerde paletten. Er is niets te installeren — de hele tool is één enkele webpagina.