Je ziet een kleur die je wilt hergebruiken — in een foto, een screenshot van een site die je mooi vindt, een oud logo waarvan de bronbestanden allang weg zijn — en je hebt de echte hex-code nodig, geen gok. Op het oog schatten werkt nooit helemaal; monitors liegen en "dat blauw" is eigenlijk zes iets verschillende blauwen. Het palet direct uit de pixels halen geeft je codes die je in CSS, een ontwerptool of een merkdocument kunt plakken.
Zo doe je het, en zo krijg je een palet dat echt bruikbaar is in plaats van een willekeurige greep pixels.
Wat "een palet extraheren" eigenlijk doet
De tool scant de afbeelding en vindt de kleuren die hem het best vertegenwoordigen — de dominante tonen plus de opvallende accenten — en geeft je elk als een hex-code die je kunt kopiëren. In plaats van een miljoen individuele pixelkleuren krijg je een nette set (zeg 5 of 8) die de afbeelding samenvat.
Dit is echt nuttig voor een paar gangbare klussen:
- Merkkleuren terughalen uit een logo of oude asset wanneer je de originele specificatie niet hebt.
- Een ontwerppalet bouwen vanuit een foto waarvan je de sfeer wilt matchen — een landschap, een productfoto, een kunstwerk.
- Een bestaande site of afbeelding matchen waar je alleen een screenshot van hebt.
- Een achtergrond of accent kiezen dat harmonieert met een afbeelding die je al gebruikt.
Sleep een afbeelding erin en lees de codes af:
Gebruik de aantalregelaar om een bruikbaar palet te krijgen
De allerbelangrijkste instelling is hoeveel kleuren je haalt. Het verandert het antwoord compleet.
- Minder kleuren (3–5) geven je het essentiële palet — het handjevol tonen dat de afbeelding definieert. Dit is meestal wat je wilt voor branding of een ontwerpsysteem, waar een strakke set een kenmerk is, geen beperking.
- Meer kleuren (8–12) vangen subtiele accenten en verlopen. Nuttig wanneer een afbeelding rijk en gevarieerd is en je ook de secundaire tonen wilt, of wanneer je bestudeert hoe een foto precies is samengesteld.
Voelt het eerste resultaat verkeerd — één tint domineert, of een accent dat je wilde is weggesmolten — pas dan het aantal aan en lees opnieuw. Een foto die 80% lucht is geeft je veel blauw bij lage aantallen; verhoog het aantal om de kleinere kleuraccenten naar boven te halen.
Klik om te kopiëren — de workflow die telt
Een hex-code lezen en overtypen is waar fouten insluipen (#3A7BD5 versus #3A7BD6 en je hebt tien minuten zitten afvragen waarom het verkeerd oogt). In de Color Palette-tool kopieert elk staal zijn hex-code bij een klik, zodat je rechtstreeks van afbeelding naar klembord naar je stylesheet gaat zonder het toetsenbord aan te raken.
Een praktische flow:
- Laad de afbeelding.
- Zet het aantal passend bij de klus — laag voor een merkpalet, hoger om accenten te vangen.
- Klik op elk staal dat je wilt; plak het waar het heen gaat.
- Niet genoeg bereik? Stel het aantal bij en pak de extra's.
De resultaten lezen met het oog van een ontwerper
Een paar dingen die de moeite waard zijn te weten zodat het palet goed landt:
- De dominante kleur is niet altijd de nuttige. Een productfoto op een witte achtergrond rapporteert veel wit of bijna-wit. Dat is accuraat, maar de kleur die je echt wilt is het product — zet het aantal hoger om het eruit te halen, of snij eerst tot het onderwerp bij.
- Foto's hebben meer kleuren dan ze lijken. Huid, schaduwen en reflecties voegen tonen toe die je niet bewust opmerkte. Een hoger aantal onthult ze; een lager aantal verbergt ze achter de gemiddelden.
- Hex is draagbaar. Elke code die je kopieert werkt direct in CSS, Figma, Photoshop, Canva of een merkdocument. Geen conversie nodig.
Waarom het in je browser blijft
De hele extractie draait lokaal — de afbeelding wordt in je browser met Canvas gelezen en geanalyseerd, en wordt nooit naar een server geüpload. Dat maakt uit wanneer de "afbeelding" een onuitgebrachte mockup, de privémerkasset van een klant of een interne screenshot is die je niet naar een willekeurige webtool zou moeten posten. Het is gratis, heeft geen aanmelding nodig, en na je eerste bezoek werkt het offline.
Pak de kleuren, klik om te kopiëren, plak ze waar ze horen.