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.

Klik op een willekeurige pixel en deze kleurkiezer toont de HEX-kleurcode (bijvoorbeeld #FF6B35) naast RGB en HSL — dezelfde HTML/CSS-kleurcodes die je rechtstreeks in een stylesheet, designtoken of HTML-attribuut plakt. Klik op Kopiëren om de hex-code met één klik te pakken.

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.

Geen afbeelding nodig. De kleurkiezer en het kleurenwiel bovenaan werken op zichzelf — versleep het verzadigings-/helderheidsvierkant en de tintschuif, of typ een willekeurige HEX-, RGB- of HSL-waarde om een exacte kleur in te stellen. Een afbeelding uploaden is optioneel, alleen om kleuren uit een foto te pipetten.

Kies je basiskleur en het paneel Kleurharmonieën bouwt direct complementaire, analoge, triadische, split-complementaire, tetradische en monochromatische schema's op met behulp van kleurenwieltheorie. Klik op een staal om de HEX-code ervan te kopiëren.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Klik op Willekeurig in de Kleurkiezer & Kleurenwiel om naar een nieuwe kleur te springen, en gebruik dan het paneel Kleurharmonieën eronder om complementaire, analoge, triadische en andere afgestemde paletten te zien die op die kleur zijn gebaseerd — een snelle manier om een startpunt te vinden wanneer je vanaf nul ontwerpt in plaats van een bestaande afbeelding te bemonsteren.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.