Afbeeldingskleur-extractor
Extraheer dominante kleuren en paletten uit elke afbeelding.
Elke afbeelding omzetten in een bruikbaar palet
Overview
Een kleurextractor analyseert een afbeelding en geeft de dominante kleuren terug als kant-en-klare codes — HEX, RGB en HSL — voor ontwerp en branding. Kleuren één voor één pipetteren is traag en mist de kleuren die de sfeer van een afbeelding bepalen. Dit hulpmiddel sampelt de hele afbeelding en clustert die tot een representatief palet in je browser, zonder upload, zodat zelfs ongepubliceerde productfoto's op je apparaat blijven.
How to Use (Step by Step)
- 1
Sleep een afbeelding
Foto's, logo's, screenshots of illustraties werken allemaal. Hogere resolutie geeft een representatiever palet.
- 2
Bekijk het palet
Dominante en accentkleuren verschijnen met HEX-, RGB- en HSL-waarden.
- 3
Kopieer de codes die je nodig hebt
Klik op een staal om de code te kopiëren en plak die in je CSS, ontwerptool of merkgids.
How It Works
De afbeelding wordt op een canvas getekend en als ruwe RGB-pixeldata gelezen. Een clusteralgoritme groepeert miljoenen pixels tot een kleine set representatieve kleuren, gewogen naar hoe vaak elke voorkomt, wat het dominante palet plus accentkleuren oplevert. Elk staal toont HEX-, RGB- en HSL-waarden om te kopiëren. Alle verwerking gebeurt lokaal.
When to Use This
Een website- of d-thema bouwen dat harmonieert met een gekozen foto. Exacte merkkleuren uit een logo halen. Een afgestemd palet maken voor een illustratie of UI-mockup. Moodboards maken uit inspiratiefoto's. Toegankelijke tekst- en achtergrondcombinaties kiezen uit een productfoto. Een CSS-gradiënt of grafiekkleuren afstemmen op de tinten van een afbeelding.
Frequently Asked Questions
Het zijn drie manieren om dezelfde kleur te schrijven. HEX (#3b82f6) is compact en gangbaar in CSS. RGB somt de rood/groen/blauw-kanalen op. HSL (tint, verzadiging, helderheid) is het makkelijkst om met de hand tinten en schakeringen te maken.