Geen upload, 100% lokaal, geen account

Kleurpalet-extractor

Upload een afbeelding om de dominante kleuren te extraheren. Krijg HEX-codes voor elk staal, kopieer met een klik. Alles draait in je browser.

Hoe Kleurpalet-extractor werkt

Kleurpalet-extractor analyseert je afbeelding en identificeert de visueel meest dominante kleuren met een k-means-clusteringalgoritme dat wordt uitgevoerd op de pixeldata in een Canvas. Het resultaat is een set kleurstalen met hun HEX-waarden die je afzonderlijk kunt kopiëren. Er verlaten geen afbeeldingsbytes je browser; de pixelsampling vindt lokaal plaats in een Web Worker zodat de hoofdthread responsief blijft.

De extractie groepeert de honderdduizenden afzonderlijke pixelkleuren in een kleiner aantal representatieve clusters. Het aantal uitvoerkleuren is instelbaar, zodat je een beknopt palet van vijf kleuren of een breder palet van twaalf kunt extraheren. Dit is handig voor het snel ophalen van merkkleuren uit een logo, het identificeren van de dominante tinten van een foto voor een stemmingsbord, of het controleren welke kleuren er voorkomen in een door de gebruiker geüploade afbeelding.

Hoe je Kleurpalet-extractor gebruikt, stap voor stap

  1. Sleep je afbeelding naar het uploadgebied of klik om te bladeren.
  2. Stel het aantal te extraheren kleuren in (doorgaans 5 tot 12).
  3. Klik op Extraheren. De pixelclustering wordt lokaal uitgevoerd in een Web Worker.
  4. Bekijk de resulterende kleurstalen en hun HEX-waarden.
  5. Klik op een staal om de bijbehorende HEX-code naar het klembord te kopiëren.

Veelvoorkomende toepassingen

  • Een ontwerper extraheert het dominante palet uit een merkfoto om ervoor te zorgen dat nieuw marketingmateriaal overeenkomt met het bestaande kleurverhaal.
  • Een ontwikkelaar identificeert de hoofdkleuren in een door de gebruiker geüploade avatar om dynamisch een bijpassende UI-accentkleur te genereren.
  • Een kunstenaar maakt een referentie-stemmingsbord door paletten uit verschillende referentieafbeeldingen te extraheren en de geëxtraheerde HEX-codes te vergelijken.
  • Een blogger haalt de vijf dominante tinten uit een koptekstfoto om complementaire tekst- en knopkleuren te kiezen voor een berichtindeling.

Veelgestelde vragen

Hoe werkt het kleurextractie-algoritme?

Het hulpmiddel leest alle pixelwaarden van de afbeelding via Canvas.getImageData(), verkleint ze voor snelheid, en voert vervolgens k-means-clustering uit. Elke clustermiddelpunt wordt een van de uitvoerkleuren. K-means groepeert pixels op kleurproximiteit zodat de dominante visuele tinten naar voren komen als de middelpuntkleuren.

Vereist het extraheren van kleuren het uploaden van de afbeelding?

Nee. De pixelsampling vindt plaats binnen een Web Worker in je browser. De afbeelding wordt ingelezen van je lokale schijf, op een OffscreenCanvas getekend, en de pixelarray wordt in het geheugen verwerkt. De data verlaat je apparaat niet.

Waarom zien de geëxtraheerde kleuren er enigszins anders uit dan wat ik in de afbeelding zie?

K-means-middelpunten vertegenwoordigen het mathematische gemiddelde van een cluster van pixelkleuren. Een kleur die zeer gebruikelijk is maar licht varieert (een blauwe lucht met lichte gradiëntvariaties) zal een middelpunt opleveren dat de gemiddelde tint is in plaats van een exacte pixelwaarde waarnaar je kunt wijzen. Het resultaat is een representatief gemiddelde, geen steekproef van een specifieke pixel.

Kan ik paletten extraheren uit foto's met transparantie?

Volledig transparante pixels (alpha = 0) worden uitgesloten van de clustering om te voorkomen dat het transparante gebied de geëxtraheerde kleuren naar zwart of wit beïnvloedt, afhankelijk van de Canvas-achtergrondvulling. Semi-transparante pixels worden meegenomen in het steekproef gewogen naar hun alfawaarde.

In welk formaat zijn de kleurcodes?

Het hulpmiddel geeft HEX-codes (zoals #3A7BD5). Als je RGB, HSL of andere formaten nodig hebt, kopieer je de HEX-waarde in het Kleurconverter-hulpmiddel, dat HEX accepteert en naar alle gangbare kleurmodellen converteert.