Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis Kleurpalet-extractor voor afbeeldingen

Extraheer de dominante kleuren uit elke afbeelding met k-means kleurkwantisering. Ontvang hexcodes voor de top 2-16 kleuren in je foto of logo.

Werkt offline na het laden

Sleep een bestand hierheen of klik om te bladeren

JPG, PNG, WebP, GIF, HEIC, HEIF · verwerkt op je apparaat

of druk op Ctrl+V om vanaf het klembord te plakken

Bestanden bladeren

Tip: je kunt een schermafbeelding plakken met Ctrl+V

Jouw bestanden verlaten nooit je apparaat. Alle verwerking vindt lokaal in je browser plaats.

Veelvoorkomend gebruik

  • Extraheer merkkleren uit een logoVerkrijg de exacte hexcodes voor de dominante kleuren in een logo of merkafbeelding.
  • Bouw webkleurenpaletten van foto'sGenereer overeenkomende websitepalettten vanuit helderafbeeldingen of achtergrondafbeeldingen.
  • Extraheer kleuren uit inspiratiefoto'sTrek kleurenpaletten uit interieurontwerp of modefoto's om in uw projecten te gebruiken.
  • Analyseer schilder- en kunstwerkpalettenBestudeer kleurenpaletten van beroemde schilderijen of uw eigen kunst door dominante kleuren te extraheren.
  • CSS-thema van afbeeldingenGenereer CSS-variabele-thema's vanuit afbeeldingen - handig voor dynamische thema's of automatisch gegenereerde kleurenschema's.

Hoe het werkt

Kleurextractie draait volledig in je browser met een zelfgeschreven k-means++-clusteralgoritme op ruwe pixelgegevens uit de Canvas API — geen server, geen bibliotheek van derden. Dezelfde afbeelding en hetzelfde aantal kleuren geven altijd hetzelfde palet, omdat het algoritme een deterministische pseudowillekeurige getallengenerator (mulberry32) gebruikt in plaats van Math.random.

  1. 1
    Canvas leest de pixelgegevens
    De afbeelding wordt op een onzichtbaar HTML Canvas-element getekend en verkleind tot hooguit 200px aan de langste zijde. getImageData() van de Canvas API geeft elke pixel als ruwe RGBA-bytes terug, en volledig transparante pixels (alfa < 128) worden weggelaten voordat het clusteren begint.
  2. 2
    k-means++ clustert de pixels
    Een k-means++-initialisatie kiest de centroïden deterministisch, waarna het algoritme tot 20 keer herhaalt: elke pixel wordt toegewezen aan de dichtstbijzijnde centroïde in de RGB-ruimte, en de centroïden worden opnieuw berekend als het gemiddelde van alle toegewezen pixels. Clusters die op dezelfde hexwaarde uitkomen worden samengevoegd, zodat elk staal in het resultaat uniek is.
  3. 3
    Metagegevens per kleur worden berekend
    Elke centroïde wordt omgezet naar HEX, HSL en het aandeel in het totaal aantal pixels (percentage). De relatieve WCAG-luminantie wordt volgens de standaardformule berekend, en contrastverhoudingen tegenover zwart en wit worden bij elk staal getoond.
  4. 4
    Export en pipetuitvoer
    Het palet kan worden gekopieerd als CSS custom properties, SCSS-variabelen, een Tailwind-configuratiefragment of JSON. Een pipet waarmee je klikt om kleuren te nemen, zet je klik op het voorbeeld om naar de exacte pixelcoördinaten van de bron op een canvas op volledige resolutie en voegt de kleur van die pixel toe aan een aparte lijst met gekozen kleuren. Een PNG-paletstrook kan worden gedownload via Canvas toBlob().

Je afbeelding wordt nooit geüpload — ze wordt volledig in het geheugen van je browser gedecodeerd en verwerkt, en alleen de bestandsgrootte (in KB) wordt aan analytics doorgegeven.

Gerelateerde tools

🎨

Willekeurige kleurengenerator

Genereer willekeurige kleuren één voor één of als palet van vijf, vergrendel de kleuren die je mooi vindt, kopieer HEX-, RGB- of HSL-waarden en exporteer het palet als PNG of CSS.

Probeer het
🎨

Kleurpalet-generator

Genereer complementaire, analoge, triadische en monochromatische kleurpaletten van elke basiskleur. Kopieer hexcodes met één klik.

Probeer het
🎨

Kleurenkiezer en palettengenerator

Kies kleuren, converteer HEX/RGB/HSL en genereer harmonieuze paletten.

Probeer het

Veelgestelde vragen