Gå til hovedindhold

Gratis Billedfarvepalette-udtrækker

Udtræk de dominerende farver fra et billede ved hjælp af k-means farvekvanticering. Få hex-koder for de 2-16 øverste farver i dit foto eller logo.

Virker offline, når den er indlæst

Slip en fil her, eller klik for at vælge

JPG, PNG, WebP, GIF, HEIC, HEIF · behandles på din enhed

eller tryk Ctrl+V for at indsætte fra udklipsholderen

Gennemse filer

Tip: du kan indsætte et skærmbillede med Ctrl+V

Dine filer forlader aldrig din enhed. Al behandling sker lokalt i din browser.

Almindelige anvendelser

  • Udtræk brandfarver fra en logoFå de nøjagtige hex-koder for de dominerende farver i enhver logo eller brandimage.
  • Byg webfarvepaletter fra fotosGenerer matchende webstedsfarvepaletter fra herofotos eller baggrundsbilleder.
  • Udtræk farver fra inspirationsfotosUdtræk farvepaletter fra indretnings- eller modefoto til brug i dine egne projekter.
  • Analyser malerier og kunstpaletterStuder farvepaletter fra berømte malerier eller dine egne kunstværker ved at udtrække de dominerende farver.
  • Tema CSS fra billederGenerer CSS-variabeltemaer fra billeder — brugbar til dynamisk tematisering eller automatisk genererede farveskemaer.

Sådan fungerer det

Farveudtrækning kører udelukkende i din browser med en håndskrevet k-means++-klyngealgoritme anvendt på rå pixeldata læst fra Canvas API — ingen server, intet tredjepartsbibliotek. Samme billede og antal farver giver altid samme palet, fordi algoritmen bruger en deterministisk pseudotilfældig talgenerator (mulberry32) i stedet for Math.random.

  1. 1
    Canvas læser pixeldata
    Billedet tegnes på et usynligt HTML Canvas-element og nedskaleres til højst 200px på den længste side. Canvas API's getImageData() returnerer hver pixel som rå RGBA-bytes, og helt gennemsigtige pixels (alpha < 128) kasseres, før klyngedannelsen begynder.
  2. 2
    k-means++ grupperer pixelerne
    En k-means++-initialisering placerer centroiderne deterministisk, og algoritmen gentager op til 20 gange: hver pixel tildeles den nærmeste centroid i RGB-rummet, og centroiderne genberegnes som gennemsnittet af alle tildelte pixels. Klynger, der ender med samme hex-værdi, slås sammen, så hver farveprøve i resultatet er unik.
  3. 3
    Metadata pr. farve beregnes
    Hver centroid omregnes til HEX, HSL og dens andel af alle pixels (procent). WCAG-relativ luminans beregnes efter standardformlen, og kontrastforhold mod både sort og hvid vises ved hver farveprøve.
  4. 4
    Eksport og pipette-output
    Paletten kan kopieres som CSS custom properties, SCSS-variabler, et Tailwind-konfigurationsudsnit eller JSON. En klik-for-at-hente-pipette omsætter dit klik på forhåndsvisningen til de præcise pixelkoordinater i kilden på et lærred i fuld opløsning og føjer pixelens farve til en separat liste over valgte farver. En PNG-farvestribe kan downloades via Canvas toBlob().

Dit billede uploades aldrig — det afkodes og behandles udelukkende i browserens hukommelse, og kun filstørrelsen (i KB) rapporteres til statistik.

Relaterede værktøjer

Ofte stillede spørgsmål