Waarom we automatische paletextractie aan de color picker hebben toegevoegd

Met onze color picker kon je altijd al een afbeelding uploaden en op een willekeurige pixel klikken om de exacte HEX-, RGB- en HSL-waarde te krijgen. Dat beantwoordt de vraag “welke kleur heeft dit specifieke punt?” — nuttig, maar niet de vraag die de meeste mensen eigenlijk hebben als ze een foto uploaden. Meestal is dat “wat is het algehele kleurenschema van deze afbeelding?” — een merkpalet uit een logo halen, of de sfeer van een referentiefoto matchen voor het kleurenschema van een website.

Met één pixel samplen kun je die vraag niet beantwoorden. Dus voegden we paletextractie toe: upload een afbeelding, en de tool haalt er nu automatisch de acht dominantste kleuren uit en toont ze als klikbare kleurstalen.

Hoe het werkt

Er komt geen AI-model aan te pas en er wordt niets geüpload — het is een rechttoe rechtaan frequentietel-algoritme dat in een paar milliseconden draait:

De afbeelding wordt verkleind naar een canvas van 80×80. Volledige resolutie is niet nodig voor kleurstatistieken, en het verkleinen houdt het geheel razendsnel, ook bij grote foto’s.
Elke pixel wordt in een emmer gestopt op basis van een vergroofde versie van zijn kleur — de bovenste 5 bits van elk RGB-kanaal, zodat pixels die visueel vrijwel identiek zijn in dezelfde emmer belanden in plaats van elk als unieke kleur te tellen.
De emmers worden gesorteerd op het aantal pixels erin, en de acht grootste vormen het palet, elk weergegeven als de gemiddelde kleur van alles in die emmer.

Dat is alles. Geen machine learning, geen externe service — alleen verkleinen en tellen, en daarom is het direct klaar en verlaat het nooit je browser.

Klik op een staal, krijg de code

Elk paletstaal is klikbaar: klik erop en het wordt de actieve kleur van de tool, met HEX, RGB en HSL automatisch ingevuld en de hexcode in dezelfde klik naar je klembord gekopieerd. Er is ook een “copy all”-knop als je het hele palet als kommagescheiden lijst wilt, handig om direct in een designtool of een blok CSS custom properties te plakken.

Probeer het

Upload een willekeurige afbeelding — een screenshot, een logo, een foto — op de color picker-pagina en het palet verschijnt automatisch eronder.