Slik bruker du det
- Velg et bilde, eller slipp det i boksen.
- Flytt pekeren over bildet; forstørrelsesglasset viser pikslene rundt.
- Klikk eller trykk for å velge fargen og kopiere den som HEX, RGB eller HSL.
- Bla ned for å se de dominerende fargene, velg hvor mange du vil ha, og kopier dem eller last dem ned som CSS-variabler.
Slik fungerer det
Bildet tegnes på et lerret i nettleseren din, og fargen på den nøyaktige pikselen under pekeren leses av fra det. Lupevisningen viser et forstørret område på 11 × 11 piksler, med den valgte pikselen markert. Bilder som er større enn 4096 piksler på én side, skaleres ned først, så på svært store bilder er en valgt piksel gjennomsnittet av noen få opprinnelige piksler.
Dominante farger finnes med k-means-klyngedannelse: piksler grupperes først i 32 768 små fargebøtter, deretter slås bøttene sammen til det antallet farger du velger, vektet etter hvor mange piksler hver bøtte inneholder. Startpunktene velges deterministisk, så samme bilde gir alltid samme palett.
Farger leses i sRGB-fargerommet nettleseren bruker for visning. Hvis et bilde har en innebygd fargeprofil med bredt fargespekter, kan verdiene avvike noe fra det et bilderedigeringsprogram viser. I nettlesere som støtter det (Chrome og Edge på datamaskin), bruker «Velg fra skjerm»-knappen den innebygde EyeDropper-funksjonen til å hente en farge fra hvor som helst på skjermen.
Eksempler
Matche en merkevarefarge
Last opp et skjermbilde av en logo, klikk på hovedfargen og kopier #1a73e8 eller rgb(26, 115, 232) inn i CSS-en din.
Palett fra et bilde
Et strandbilde delt inn i 6 farger gir sand-, hav- og himmeltoner, hver med andelen av bildet den dekker, sortert fra størst til minst.
Kontrollere en nyanse
Zoom inn med lupen for å velge den nøyaktige pikselen på en tynn linje i stedet for den kantutjevnede kanten ved siden av.
Ofte stilte spørsmål
Hvorfor avviker fargen litt fra bilderedigeringsprogrammet mitt?
Nettlesere konverterer bilder til sRGB for visning. Bilder med en bredspektret profil (Display P3, Adobe RGB) kan vise litt andre verdier i et redigeringsprogram som beholder den opprinnelige profilen.
Hvorfor mangler «Velg fra skjerm»-knappen?
Den krever EyeDropper-API-et, som bare enkelte nettlesere støtter, for øyeblikket Chrome og Edge på datamaskin. Å velge farge fra det opplastede bildet fungerer overalt.
Hvordan velges de dominerende fargene?
Ved k-means-klynging av alle piksler, vektet etter hvor ofte hver farge forekommer. Små, men livlige detaljer kan bli slått sammen med en større nærliggende farge; øk antallet farger for å skille dem ut.
Lastes bildet opp?
Nei. Bildet dekodes og analyseres av denne siden i nettleseren din og forlater aldri enheten din.
Personvern
Bildet behandles utelukkende i nettleseren din. Det lastes ikke opp, og valgte farger sendes ikke eller lagres.