Färgpalettextraherare

Ladda upp en bild för att extrahera dess dominerande färger. Hämta HEX-koder för varje nyans, kopiera med ett klick. Allt körs i din webbläsare.

Så fungerar Färgpalettextraherare

Färgpalettextraheraren analyserar din bild och identifierar de mest visuellt dominerande färgerna med hjälp av en k-means-klustringsalgoritm som körs mot pixeldata i ett Canvas. Resultatet är en uppsättning färgprover med deras HEX-värden som du kan kopiera individuellt. Inga bildbytes lämnar din webbläsare; pixelprobetagningen körs lokalt i en Web Worker så att huvudtråden förblir responsiv.

Extraheringen grupperar de hundratusentals individuella pixelfärgerna i ett mindre antal representativa kluster. Antalet utdatafärger kan konfigureras så att du kan extrahera en kompakt palett med fem färger eller en bredare uppsättning med tolv. Detta är användbart för att snabbt hämta varumärkesfärger från en logotyp, identifiera de dominerande tonerna i ett fotografi för en stämningstavla eller kontrollera vilka färger som visas i en användarladdad bild.

Skrivet av Bastien Sulyan

Så här använder du Färgpalettextraherare, steg för steg

Släpp din bild i uppladdningsområdet eller klicka för att bläddra.
Ange antalet färger du vill extrahera (vanligtvis 5 till 12).
Klicka på Extrahera. Pixelklustring körs lokalt i en Web Worker.
Visa de resulterande färgproverna och deras HEX-värden.
Klicka på ett prov för att kopiera dess HEX-kod till urklipp.

Vanliga användningsområden

En designer extraherar den dominerande paletten från ett varumärkesfotografi för att säkerställa att nytt marknadsföringsmaterial matchar den befintliga färgberättelsen.
En utvecklare identifierar huvudfärgerna i en användarladdad avatar för att dynamiskt generera en matchande UI-accentfärg.
En konstnär bygger en referensstämningstavla genom att extrahera paletter från flera referensbilder och jämföra de extraherade HEX-koderna.
En bloggare hämtar de fem dominerande tonerna från ett sidhuvudsfoto för att välja kompletterande text- och knappfärger för en inläggsayout.

Vanliga frågor

Hur fungerar färgextrakthionsalgoritmen?

Verktyget läser alla pixelvärden från bilden via Canvas.getImageData(), nedsampler dem för hastighet och kör sedan k-means-klustring. Varje klustercentroid blir en av utdatafärgerna. K-means grupperar pixlar efter färgnärhet så att de dominerande visuella tonerna framträder som centroidfärger.

Kräver extrahering av färger att bilden laddas upp?

Nej. Pixelprobetagningen sker inuti en Web Worker i din webbläsare. Bilden läses från din lokala disk, ritas på ett OffscreenCanvas och pixelmatrisen bearbetas i minnet. Data lämnar inte din enhet.

Varför ser de extraherade färgerna något annorlunda ut än vad jag ser i bilden?

K-means-centroider representerar det matematiska genomsnittet av ett kluster av pixelfärger. En färg som är mycket vanlig men något varierande (en blå himmel med svaga gradientvariationer) ger en centroid som är den genomsnittliga nyansen snarare än ett exakt pixelvärde du kan peka på. Resultatet är ett representativt genomsnitt, inte ett stickprov av en specifik pixel.

Kan jag extrahera paletter från foton med transparens?

Fullt transparenta pixlar (alfa = 0) utesluts från klustring för att undvika att det transparenta området snedvrider de extraherade färgerna mot svart eller vitt beroende på Canvas-bakgrundsfyllningen. Halvtransparenta pixlar ingår i provet viktade efter deras alfavärde.

Vilket format är färgkoderna i?

Verktyget ger HEX-koder (till exempel #3A7BD5). Om du behöver RGB, HSL eller andra format, kopiera HEX-värdet till verktyget Färgkonverterare, som accepterar HEX och konverterar till alla vanliga färgmodeller.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla bildverktyg