Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis Bildfärgpalettextraherare

Extrahera de dominerande färgerna från valfri bild med k-means-färgkvantisering. Hämta hexkoder för de 2–16 vanligaste färgerna i ditt foto eller logotyp.

Fungerar offline när den väl lästs in

Släpp en fil här, eller klicka för att bläddra

JPG, PNG, WebP, GIF, HEIC, HEIF · bearbetas på din enhet

eller tryck Ctrl+V för att klistra in från urklipp

Bläddra bland filer

Tips: du kan klistra in en skärmbild med Ctrl+V

Dina filer lämnar aldrig din enhet. All bearbetning sker lokalt i din webbläsare.

Vanliga användningar

  • Extrahera varumärkesfarger från en logotypFå de exakta hexkoderna för de dominanta färgerna i en logotyp eller varumärkesimage.
  • Bygg webbfärgpaletter från fotonGenerera matchande webbplatsens färgpaletter från herofoton eller bakgrundsbilder.
  • Extrahera färger från inspirationsfotonExtrahera färgpaletter från inrednings- eller modefoto för användning i dina egna projekt.
  • Analysera målnings- och konstpaletterStudera färgpaletter från kända målningar eller din egen konst genom att extrahera de dominanta färgerna.
  • Tema CSS från bilderGenerera CSS-variabeltemat från bilder — användbar för dynamisk tematisering eller automatiskt genererade färgscheman.

Så här fungerar det

Färgextraktion körs helt i din webbläsare med en handskriven k-means++-klustringsalgoritm tillämpad på rå pixeldata läst från Canvas-API:et — ingen server, inget tredjepartsbibliotek. Samma bild och antal-färger-inställningar ger alltid samma palett eftersom algoritmen använder en deterministisk pseudoslumptalsgenerator (mulberry32) istället för Math.random.

  1. 1
    Canvas läser pixeldata
    Bilden ritas på ett osynligt HTML-canvas-element och nedsamplas till högst 200px på sin längsta sida. Canvas-API:ets getImageData() returnerar varje pixel som råa RGBA-byte, och helt transparenta pixlar (alfa < 128) kastas innan klustringen börjar.
  2. 2
    k-means++ klustrar pixlarna
    En k-means++-initierare sätter frön för centroiderna deterministiskt, och algoritmen itererar sedan upp till 20 gånger: varje pixel tilldelas sin närmaste centroid i RGB-rymden, och centroiderna räknas sedan om som medelvärdet av alla tilldelade pixlar. Kluster som får samma hexvärde slås samman, så varje färgprov i resultatet är unikt.
  3. 3
    Metadata per färg beräknas
    Varje centroid omvandlas till HEX, HSL och sin andel av totala pixlar (procent). WCAG relativ luminans beräknas enligt standardformeln, och kontrastförhållanden mot både svart och vitt visas tillsammans med varje färgprov.
  4. 4
    Export och pipettutdata
    Paletten kan kopieras som anpassade CSS-egenskaper, SCSS-variabler, ett Tailwind-konfigurationsutdrag, eller JSON. En klicka-för-att-provta-pipett mappar ditt klick i förhandsvisningen tillbaka till de exakta källpixelkoordinaterna på en canvas i full upplösning, och lägger till den pixelns färg i en separat lista med valda färger. En PNG-palettremsa kan laddas ned via Canvas toBlob().

Din bild laddas aldrig upp — den avkodas och bearbetas helt i din webbläsares minne, och bara filstorleken (i KB) rapporteras till analysverktyg.

Relaterade verktyg

🎨

Slumpmässig färggenerator

Skapa slumpmässiga färger en i taget eller som en palett med fem, lås de du gillar, kopiera HEX-, RGB- eller HSL-värden och exportera paletten som PNG eller CSS.

Prova det
🎨

Färgpalettgenerator

Generera komplementära, analoga, triadiska och monokromatiska färgpaletter från valfri basfärg. Kopiera hexkoder med ett klick.

Prova det
🎨

Färgväljare och palettgenerator

Välj färger, konvertera mellan HEX/RGB/HSL och generera harmoniska paletter.

Prova det

Vanliga frågor