Fargepalettuttrekker

Last opp et bilde for å hente ut de dominerende fargene. Få HEX-koder for hver fargeprøve, kopier med ett klikk. Alt kjøres i nettleseren.

Slik fungerer Fargepalettuttrekker

Fargepalettuttrekker analyserer bildet ditt og identifiserer de mest visuelt dominerende fargene ved hjelp av en k-means-klyngealgoritme kjørt mot pikseldata i et Canvas. Resultatet er et sett med fargeprøver med deres HEX-verdier som du kan kopiere enkeltvis. Ingen bildebytar forlater nettleseren din; pikselprøvetakingen kjøres lokalt i en Web Worker slik at hovedtråden forblir responsiv.

Utvinningen grupperer hundretusenvis av individuelle pikselfarger til et mindre antall representative klynger. Antallet utdatafarger er konfigurerbart slik at du kan trekke ut en tett palett med fem farger eller et bredere sett med tolv. Dette er nyttig for raskt å trekke ut merkefarger fra en logo, identifisere de dominerende tonene i et fotografi for et stemningsvindu, eller sjekke hvilke farger som vises i et brukeropplastet bilde.

Skrevet av Bastien Sulyan

Slik bruker du Fargepalettuttrekker, steg for steg

Slipp bildet ditt på opplastingsområdet eller klikk for å bla gjennom.
Angi antallet farger du vil trekke ut (vanligvis 5 til 12).
Klikk Trekk ut. Pikselklyngingen kjøres lokalt i en Web Worker.
Se de resulterende fargeprøvene og deres HEX-verdier.
Klikk en prøve for å kopiere HEX-koden til utklippstavlen.

Vanlige bruksområder

En designer trekker ut den dominerende paletten fra et merkevarefotografi for å sikre at nytt markedsføringsmateriell samsvarer med den eksisterende fargehistorien.
En utvikler identifiserer hovedfargene i en brukeropplastet avatar for dynamisk å generere en matchende UI-aksentfarge.
En kunstner bygger et referansestemningsvindu ved å trekke ut paletter fra flere referansebilder og sammenligne de uttrukne HEX-kodene.
En blogger trekker ut de fem dominerende tonene fra et headerbilde for å velge komplementære tekst- og knappefarger for et innleggslayout.

Ofte stilte spørsmål

Hvordan fungerer fargeuttrekningsalgoritmen?

Verktøyet leser alle pikselverdier fra bildet via Canvas.getImageData(), nedskalerer dem for hastighet, og kjører deretter k-means-klynging. Hvert klyngesenter blir én av utdatafargene. K-means grupperer piksler etter fargenærhet slik at de dominerende visuelle tonene fremstår som sentrumsfargene.

Krever uttrekking av farger opplasting av bildet?

Nei. Pikselprøvetakingen skjer inne i en Web Worker i nettleseren din. Bildet leses fra din lokale disk, tegnes på et OffscreenCanvas, og pikselmatrisen behandles i minnet. Dataene forlater ikke enheten din.

Hvorfor ser de uttrukne fargene litt forskjellige ut fra det jeg ser i bildet?

K-means-sentre representerer det matematiske gjennomsnittet av en klynge med pikselfarger. En farge som er svært vanlig, men litt variert (en blå himmel med svak gradientvariasjon), vil gi et sentrum som er gjennomsnittsnyanssen snarere enn en eksakt pikselverdi du kan peke på. Resultatet er et representativt gjennomsnitt, ikke en prøve av en bestemt piksel.

Kan jeg trekke ut paletter fra bilder med gjennomsiktighet?

Fullt gjennomsiktige piksler (alfa = 0) utelukkes fra klyngingen for å unngå at den gjennomsiktige regionen påvirker de uttrukne fargene mot svart eller hvitt avhengig av Canvas-bakgrunnsfyllet. Halvgjennomsiktige piksler inkluderes i prøven vektet etter alfaverdien.

Hvilket format er fargekodene i?

Verktøyet gir HEX-koder (som #3A7BD5). Hvis du trenger RGB, HSL eller andre formater, kopier HEX-verdien inn i Fargekonverter-verktøyet, som godtar HEX og konverterer til alle vanlige fargemodeller.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle bildeverktøy