Grab the exact color from any image

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.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

In de losstaande Kleurkiezer en Kleurwiel stelt u uw kleur in en toont het paneel de contrastverhouding ten opzichte van puur wit en puur zwart, samen met de WCAG-beoordeling — AAA, AA, AA Large of Fail. Gebruik dit voordat u een tekst- of knopkleur definitief maakt, zodat deze leesbaar blijft en voldoet aan de toegankelijkheidsrichtlijnen van WCAG 2.1.

Ja. De standalone Color Picker & Wheel toont de dichtstbijzijnde overeenkomende benoemde CSS-kleur naast de HEX-, RGB- of HSL-waarde die je hebt ingesteld, wat handig is om een tint snel te beschrijven in een briefing, ticket of designspecificatie zonder te gokken.

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.

Gebruik de dropdown Formaat boven het palet om 5, 8, 10, 16 of 24 dominante kleuren te kiezen — het palet herberekent direct wanneer je het wijzigt. Combineer een klein formaat zoals 5 voor een strak merkpalet met de kleurenpipet om een of twee exacte accenttinten te pakken die de automatische extractie mogelijk zou wegmiddelen.

Ja — de zelfstandige Kleurkiezer & wiel toont het contrastverhouding van je huidige kleur ten opzichte van zuiver wit en zuiver zwart direct onder het staal, gelabeld AAA, AA, AA Large of Fail volgens de WCAG-drempels (7:1, 4.5:1, 3:1). Gebruik het om te controleren of een tekst-/achtergrondcombinatie aan de toegankelijkheidsnormen voldoet voordat je een ontwerpkleur vastlegt.

De kleurenkiezer en het kleurenwiel koppelen elke kleur die je instelt — via de kiezer, het HEX-vak of de RGB/HSL-velden — automatisch aan de dichtstbijzijnde standaard-CSS-kleurnaam, weergegeven als 'Dichtstbijzijnde naam' naast het kleurstaal. Het is een snelle manier om een kleur mondeling te beschrijven of het dichtstbijzijnde web-veilige equivalent te vinden.

Ja — elke klik of tik op de geüploade afbeelding voegt een nieuw staal toe aan je lijst Gekozen kleuren in plaats van de vorige te vervangen, zodat je een eigen set exacte pixelkleuren uit verschillende delen van een foto kunt opbouwen. Verwijder een afzonderlijk staal met de bijbehorende ×-knop, of wis de hele lijst met Gekozen wissen.

Ja — de knop Willekeurig (shuffle-pictogram) in de Kleurkiezer & wiel springt met één klik naar een nieuwe combinatie van tint, verzadiging en helderheid, handig om een creatieve blokkade te doorbreken of een palet te verkennen dat je niet handmatig had ingetypt. HEX, RGB, HSL en de harmoniestalen eronder worden allemaal samen bijgewerkt.

Op een touchscreen sleep je je vinger over de afbeelding om de kleur eronder in een live zwevend staal te bekijken en til je je vinger op om die exacte pixel toe te voegen aan je lijst met Gekozen kleuren — geen aparte bevestigingstik nodig. Dezelfde vervolgkeuzelijst voor paletgrootte en exportknoppen werken op mobiel op precies dezelfde manier.

Ja. Het kleurenwiel bovenaan de pagina heeft een knop Willekeurig die naar een willekeurige kleur springt en direct de HEX-, RGB- en HSL-codes toont, de dichtstbijzijnde benoemde kleur, contrastverhoudingen op wit en zwart, en volledige harmoniesets — complementair, analoog, triadisch, gesplitst complementair, tetradisch en monochroom. Het is een snelle manier om startpunten voor een palet te verkennen.

Deze tool haalt kleuren uit een geüploade afbeelding of van het ingebouwde kleurenwiel, in plaats van je scherm live uit te lezen. De snelste oplossing voor een schermkleurpicker: maak een screenshot, sleep het op de pagina en klik op precies de pixel die je wilt — je krijgt dezelfde HEX-, RGB- en HSL-codes zonder een extensie te installeren, en de screenshot verlaat je browser nooit.