Kleurenpalet uit afbeelding

Zo haal je een kleurenpalet uit een afbeelding

1. Sleep een afbeelding naar het uploadvlak, of klik erop om een bestand te kiezen. JPG, PNG, WebP, GIF en elk ander formaat dat je browser kan tonen, werken.
2. De tool analyseert de afbeelding meteen en toont de Dominante kleuren, gesorteerd van meest naar minst aanwezig.
3. Pas het Aantal kleuren aan (3 tot 12) voor een breder of compacter palet. Vink Witte en bijna witte pixels negeren uit als wit een belangrijke kleur in je afbeelding is, bijvoorbeeld bij een wit product of sneeuw.
4. Kopieer één kleur met de knop Kopiëren onder het kleurstaal, of kies een formaat bij Exporteren als (HEX-lijst, CSS-variabelen, SCSS-variabelen, JSON-array of Tailwind-kleuren) en klik op Kopiëren of Downloaden voor het hele palet. Kleuren bepalen voert de analyse opnieuw uit.

Je afbeelding wordt lokaal door je browser gelezen. Ze wordt nooit naar een server geüpload.

Hoe de dominante kleuren worden bepaald

De afbeelding wordt eerst op een onzichtbaar canvas getekend en verkleind, zodat de langste zijde hooguit 512 pixels is. Zo blijft de analyse snel zonder dat de algemene kleuren veranderen. Daarna worden de pixels gegroepeerd met een kwantiseringsalgoritme (modified median cut, uit de open-sourcebibliotheek Color Thief) dat in de kleurruimte OKLCH werkt, zodat kleuren die voor het oog op elkaar lijken in dezelfde groep belanden.

Elke groep wordt één kleur van het palet, en het percentage onder elk kleurstaal is het aandeel ervan in de gemeten pixels. De balk boven de kleurstalen toont die verhoudingen in één oogopslag. Transparante pixels worden overgeslagen, net als witte en bijna witte pixels zolang de optie aangevinkt is, omdat effen witte achtergronden anders de meeste productfoto’s en screenshots zouden overheersen.

Elk kleurstaal toont zijn HEX-code in zwart of wit, afhankelijk van wat het best leesbaar is, zodat het label op lichte en donkere kleuren even goed te lezen blijft.

Ideeën voor een palet uit een afbeelding

• Huisstijl en webdesign: bouw een websitethema op basis van een headerfoto of een logo, zodat de interface bij het beeld past.
• Presentaties en sociale media: kies tekst- en achtergrondkleuren die passen bij een coverafbeelding.
• Interieur, mode en kunst: leg de sfeer vast van een foto, een schilderij of een stofstaal.
• Datavisualisatie: neem de kleuren van grafieken over uit een illustratie in hetzelfde rapport.

De gevonden kleuren zijn gemiddelden van veel pixels, dus ze kunnen iets minder fel ogen dan de meest verzadigde plek in de foto. Heb je de exacte kleur van één bepaalde pixel nodig, gebruik dan een tool om een kleur uit een afbeelding te halen.