Kleurenpalet-extractor
Haal de dominante kleuren uit elke afbeelding in je browser. 5–8 swatches, hex codes, kopieerbare CSS-variabelen. Bestanden verlaten je apparaat nooit.
🔒 Files never leave your browser — no upload, no server, no tracking.
No image yet.
Waarvoor is dit?
Deze tool leest een afbeelding, sampelt een paar duizend pixels en groepeert ze in 3–10 dominante kleurbuckets via een zelf-geschreven median-cut-quantizatie-algoritme. Het resultaat is een kleine set representatieve hex-kleuren die je kunt gebruiken als seed van een design system, basis van een moodboard of snelle manier om brand-kleuren uit andermans logo te tillen. Alles draait in je browser; de afbeelding wordt nooit geüpload.
Wanneer gebruiken
- Dominante kleuren uit een brand-logo lichten om een matchend thema te bouwen.
- Een Tailwind-config of CSS-custom-properties-blok seeden vanaf een hero-image.
- Een moodboard-palet bouwen vanuit een foto of artwork.
- Checken dat de hero-image van het design en de accentkleur van de pagina kloppen.
Hoe median-cut werkt
- Down-sample de afbeelding zodat de pixelcount behapbaar blijft.
- Vind de langste as van de pixelwolk (R-, G- of B-range).
- Sorteer langs die as, splits op de mediaan.
- Recursie in elke helft tot je het gevraagde aantal buckets hebt.
- Geef de gemiddelde kleur per bucket terug.
Veelvoorkomende valkuilen
- Transparante regio's worden overgeslagen. Pixels met alpha < 50% dragen niet bij — handig voor logo's op transparante achtergronden.
- Foto's met één dominante kleur (bv. een strand met veel blauwe lucht) geven je verschillende tinten van die kleur in plaats van een gevarieerd palet. Crop naar een kleurrijker gebied als je range wil.
- Median-cut is snel maar niet perceptueel perfect. Voor kleurleer-kwaliteit (complementair, analoog) heb je nog steeds een designer nodig — het algoritme kiest het meest voorkomende, niet het mooist.
- De slider telt buckets, geen "belangrijke" kleuren. 10 vragen van een 2-kleurig logo geeft je er 10 — die zullen near-duplicates zijn.