Fargevelger for bilder

Last opp et bilde og klikk på en piksel for å få den nøyaktige HEX-, RGB- og HSL-verdien — alt behandles på enheten din.

Slik bruker du verktøyet

  1. Velg et bilde eller slipp det på boksen — PNG, JPG og WebP fungerer alle, og filen forlater aldri enheten din.
  2. Beveg pekeren over bildet for å inspisere piksler i forstørrelsesglasset, og klikk så for å fange fargen under markøren.
  3. Kopier HEX-, RGB- eller HSL-verdien, gjenbruk hvilken som helst av de åtte siste fangstene fra raden med fargeruter, eller last ned alle sammen som en tekstfil.

Om dette verktøyet

En fargevelger for bilder svarer på et ganske hverdagslig spørsmål: hvilken farge er egentlig den pikselen? En logo du fikk som PNG, et skjermbilde av en annens nettsted, et foto der du vil treffe himmelfargen i en gradient — i alle tilfellene ligger fargen rett foran deg på skjermen, men koden gjør det ikke. Dette verktøyet laster bildet inn i et canvas på din egen maskin og leser de rå pikselverdiene ut igjen.

Mekanikken er enkel og verdt å kjenne til. Filen leses med FileReader som en data-URL, tegnes én gang inn i et canvas i sin egen oppløsning, og hver avlesning er et getImageData-kall på én enkelt piksel — de samme fire byteene (rød, grønn, blå, alfa) som nettleseren allerede har i minnet. Fordi canvaset beholder den opprinnelige oppløsningen mens siden viser det nedskalert, regnes pekerkoordinatene tilbake til bildekoordinater før avlesningen, så pikselen du klikker på er pikselen du får, selv på et foto som er 4000 piksler bredt. Forstørrelsesglasset tegner et nabolag på elleve ganger elleve piksler på nytt med bildeutjevning slått av, og det er derfor du ser harde ruter i stedet for uskarphet, og HSL utledes fra RGB-trippelen med standardformelen for fargetonesektorer. Hvis en piksel er helt gjennomsiktig, sier verktøyet fra i stedet for å rapportere et meningsløst svart.

Utover bilder eksponerer Chromium-nettlesere det innebygde EyeDropper-API-et, så der nettleseren din støtter det, lar en ekstra knapp deg ta prøve av hvilken som helst piksel på hele skjermen — nyttig for farger som sitter fast i en video, en PDF-leser eller et annet program. De åtte siste fangstene blir liggende i en rad med fargeruter du kan klikke på for å kopiere, og hele settet kan lastes ned som en enkel tekstfil med HEX, RGB og HSL for hver farge. Bildet ditt lastes aldri opp: det leses lokalt, tegnes lokalt og forkastes når du lukker siden.

Ofte stilte spørsmål

Blir bildet mitt lastet opp noe sted?

Nei. Filen leses av nettleseren din med FileReader og tegnes inn i et canvas på enheten din. Den sendes aldri til en server, og den forsvinner i det øyeblikket du lukker fanen.

Hvilke bildeformater fungerer?

PNG, JPEG og WebP — alt nettleseren din kan dekode. Bilder på opptil 8000 piksler per side godtas; større filer avvises så canvaset ikke tømmer minnet på enheten din.

Hva gjør knappen «velg farge fra skjermen»?

Den bruker nettleserens innebygde EyeDropper-API til å ta prøve av hvilken som helst piksel på skjermen din, ikke bare inne i bildet som er lastet inn. Den dukker opp i Chromium-nettlesere som Chrome, Edge, Opera og Brave; Firefox og Safari støtter den ikke ennå, så der vises knappen rett og slett ikke.

Hvorfor er fargen litt annerledes enn i originalfilen?

Som regel av én av to grunner. JPEG-komprimering endrer piksler nær skarpe kanter, og nettleseren kan bruke bildets innebygde fargeprofil under dekodingen. For flate merkevarefarger lagret som PNG er verdien du får eksakt.

Kan jeg hente ut en hel palett på én gang?

Ikke automatisk — dette verktøyet fanger ett klikk av gangen og beholder de åtte siste fargene, som du kan laste ned som en tekstfil. Å ta prøver av de dominerende områdene i et bilde er som regel nok til å gjenskape en merkevarepalett.

Relaterte verktøy

Lange lenker? Forkort dem gratis

Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.

Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.