Sådan bruger du det
- Vælg et billede, eller træk det ind i feltet.
- Før markøren hen over billedet; forstørrelsesglasset viser pixels omkring markøren.
- Klik eller tryk for at vælge farven og kopiere den som HEX, RGB eller HSL.
- Rul ned for at se de dominerende farver, vælg hvor mange du vil have, og kopier dem eller download dem som CSS-variabler.
Sådan fungerer det
Billedet tegnes på et lærred i din browser, og farven på den nøjagtige pixel under markøren aflæses derfra. Forstørrelsesglasset viser et 11 × 11 pixel stort område forstørret, med den valgte pixel markeret. Billeder større end 4096 pixels på en side skaleres først ned, så på meget store fotos er en valgt pixel gennemsnittet af nogle få oprindelige pixels.
De dominerende farver findes med k-means-klyngedannelse: pixels grupperes først i 32.768 små farvebøtter, hvorefter bøtterne flettes sammen til det antal farver, du vælger, vægtet efter hvor mange pixels hver indeholder. Startpunkterne vælges deterministisk, så det samme billede altid giver den samme palet.
Farver aflæses i det sRGB-farverum, browseren bruger til visning. Hvis et billede har en indlejret profil med bredt farvespektrum, kan værdierne afvige en smule fra, hvad et fotoredigeringsprogram viser. I browsere, der understøtter det (Chrome og Edge på computer), bruger knappen Vælg fra skærm den indbyggede EyeDropper til at tage en farve fra hvor som helst på din skærm.
Eksempler
Match en brandfarve
Upload et skærmbillede af et logo, klik på hovedfarven, og kopier #1a73e8 eller rgb(26, 115, 232) ind i din CSS.
Palet fra et foto
Et strandfoto opdelt i 6 farver giver sand-, hav- og himmeltoner, hver med den andel af billedet, den dækker, sorteret fra største til mindste.
Tjek en nuance
Zoom ind med forstørrelsesglasset for at vælge den nøjagtige pixel på en tynd linje i stedet for den kantudjævnede kant ved siden af.
Ofte stillede spørgsmål
Hvorfor afviger farven en smule fra mit fotoredigeringsprogram?
Browsere konverterer billeder til sRGB til visning. Fotografier med en profil med bredt farvespektrum (Display P3, Adobe RGB) kan vise lidt andre værdier i et redigeringsprogram, der beholder den oprindelige profil.
Hvorfor mangler knappen Vælg fra skærm?
Den kræver EyeDropper-API'et, som kun nogle browsere understøtter, i øjeblikket Chrome og Edge på computer. At vælge fra det uploadede billede virker overalt.
Hvordan vælges de dominerende farver?
Ved k-means-klyngedannelse af alle pixels, vægtet efter hvor ofte hver farve forekommer. Små, men klare detaljer kan blive slået sammen med en større nærliggende farve; øg antallet af farver for at adskille dem.
Bliver billedet uploadet?
Nej. Det afkodes og analyseres af denne side i din browser og forlader aldrig din enhed.
Privatliv
Billedet behandles udelukkende i din browser. Det uploades ikke, og valgte farver sendes eller gemmes ikke.