Hvordan finner jeg HEX-koden til en farge i et bilde?

Last opp bildet, og hold deretter pekeren over det eller klikk på en piksel — et forstørrelsesglass hjelper deg med å treffe helt nøyaktig. HEX-koden (som #4f46e5) vises med en gang, og ett klikk kopierer den.

Hva er en HEX-fargekode?

En HEX-kode skriver en farge som # etterfulgt av seks heksadesimale sifre — to hver for rød, grønn og blå, som i #4f46e5. Det er dette formatet CSS, HTML og de fleste designverktøy forventer.

Kan jeg også få RGB og HSL, ikke bare HEX?

Ja — hver piksel du velger viser RGB og HSL ved siden av HEX, og hver av dem kan kopieres med ett klikk.

Finn HEX-farge fra bilde — Fargekodevelger

Hvordan hente hex-fargekode fra et bilde – verktøyet som gir deg nøyaktig pikselverdi

Dette verktøyet lar deg laste opp et bilde, flytte markøren over det for å se fargen på hver enkelt piksel, og deretter kopiere den heksadesimale fargekoden (hex) som utdata. I motsetning til søstersider som fokuserer på RGB- eller HSL-verdier, er hex den primære visningsformen her. Hex-koden er sekssifret (for eksempel #1E90FF) og har ingen alfakanal innebygd – eventuell gjennomsiktighet rapporteres separat som en prosentandel. Dette gjør siden til det naturlige valget når du trenger en fargeverdi som kan limes direkte inn i CSS uten ekstra parenteser eller syntaks.

Verktøyet kjører helt på klientsiden. Bildet forlater aldri enheten din. Du velger en fil (PNG, JPG, WebP, GIF, AVIF eller HEIC), og så snart bildet er lastet, vises fargen i midtpikselen sammen med koordinater. Beveg musen eller bruk piltastene for å sample andre piksler. Klikk for å lagre fargen i en historikk på opptil 12 elementer. Hver lagrede farge vises som en sirkel, og et klikk på sirkelen laster inn fargen på nytt.

Hva skiller denne siden fra andre verktøy?

Det viktigste skillet er at hex-koden er først og fremst. RGB- og HSL-verdiene vises også, men de kommer etter hex. Dette betyr at du får den mest kompakte, web-standard representasjonen av fargen. Hex er standard i CSS for color, background-color, border-color og alle andre egenskaper som tar en farge. Du trenger ikke å skrive rgb(30, 144, 255) eller hsl(210, 100%, 56%) – du kopierer bare #1E90FF.

En annen viktig forskjell: hex-koden inneholder ikke alfainformasjon. Hvis bildet har en PNG med gjennomsiktige områder, vises alfakanalen som en separat linje: «Alfa 50 % – denne pikselen er delvis gjennomsiktig.» Dette er nyttig fordi du ellers kunne tro at fargen er ren hex, men i virkeligheten er den blandet med bakgrunnen. Verktøyet leser pikselens opprinnelige verdi, ikke slik den ser ut mot en hvit eller svart bakgrunn.

Mange andre nettbaserte fargevelgere tar skjermdump eller bruker nettleserens innebygde pipette, men dette verktøyet gir deg kontroll over hver enkelt piksel i et opplastet bilde. Du kan zoome inn på et område ved hjelp av forstørrelsesglasset som følger musepekeren. Det er spesielt nyttig når du skal plukke farger fra antialiasede kanter eller komprimerte JPEG-filer.

Hvordan fungerer pikselavlesning og fargeomregning?

Når bildet vises i en HTML5 Canvas, kan JavaScript lese RGBA-verdiene til hver piksel via getImageData(). Verktøyet gjør dette hver gang musepekeren flytter seg eller når du trykker på en piltast. Deretter konverteres RGB til hex med standard algoritme:

R, G og B (0–255) konverteres til to sifre i base 16.
Hvis en verdi er mindre enn 16, foranstilles et null: 0xFF er 255, 0x0F er 15.

HSL beregnes fra RGB ved hjelp av formelen som er definert i CSS Color Module Level 4. Hue er en vinkel 0–360°, saturation og lightness er prosenter.

Hvis pikselen har en alfakanal mindre enn 255 (100 %), leses den opprinnelige verdien, og alfaprosenten vises i en egen linje. Verktøyet endrer ikke pikselens farge for å simulere blending – du får den nøyaktig slik den ligger i filen.

Inndata og utdata i detalj

Støttede bildeformater og MIME-typer:

Format	MIME-type
PNG	image/png
JPG	image/jpeg
WebP	image/webp
GIF	image/gif
AVIF	image/avif
HEIC	image/heic, image/heif

Verktøyet godtar filer med disse utvidelsene. Hvis du drar en annen filtype (for eksempel BMP eller SVG), vises meldingen: «Den filtypen støttes ikke. Prøv en PNG, JPG, WebP, GIF, AVIF eller HEIC-bildefil.»

Hva vises etter at bildet er lastet?

Meldingen «Bildet er klart – flytt musen over det for å sample, klikk for å lagre en farge.»
Bildedimensjoner: bredde × høyde i piksler.
Pikselkoordinater (x, y) for den samplede pikselen.
HEX: Den heksadesimale fargekoden (seks siffer, f.eks. #1E90FF).
RGB: Røde, grønne og blå verdier.
HSL: Hue, Saturation og Lightness.
Hvis pikselen er delvis gjennomsiktig: «Alfa ‹n› % – denne pikselen er delvis gjennomsiktig.»
Når du klikker: «‹hex› lagret i utvalget ditt.»

Utvalgshistorikken viser de siste 12 lagrede fargene som sirkler. Klikk på en sirkel for å hente tilbake den fargen i de tre fargevisningene. Hvis du lagrer en ny farge når historikken er full, blir den eldste fjernet.

Kanttilfeller du må forstå

Størrelsesbegrensning og nedskalering

Bilder med en lengste side som overstiger 4096 piksler skaleres ned proporsjonalt slik at den lengste siden blir 4096 piksler. Forholdet mellom bredde og høyde beholdes. Dette gjøres for å unngå for høy minnebruk i canvas og for å holde samplingsytelsen god. Hvis bilde har oppløsning 8000×6000, blir det skalert til 4096×3072. Alle pikselverdier blir da interpolert under nedskaleringen, så fargene vil ikke være identiske med originalpikslene. For nøyaktig fargehenting bør du derfor bruke et bilde som allerede er mindre enn 4096 piksler på lengste side, eller beskjære det før opplasting.

Komprimeringsartefakter og antialiasing

JPEG-bilder er tapskomprimerte. Det betyr at selv om et område visuelt ser jevnt ut (for eksempel en blå himmel), ligger flere forskjellige fargeverdier lagret hver piksel. Antialiasing i grafikk og skjermbilder (fra operativsystemer og nettlesere) gjør også at kanter får gradvise overganger. Derfor kan nabopiksler i en tilsynelatende flat flate ha ulike hex-verdier. Verktøyet leser den nøyaktige pikselen under markøren. For å få en representativ farge bør du sample flere piksler og se på gjennomsnittet eller velge pikselen med mest areal.

Gjennomsiktige piksler (alfa)

PNG-bilder kan ha en alfakanal. Hvis en piksel er 50 % gjennomsiktig, viser verktøyet hex-verdien slik den er lagret (for eksempel #FF0000 for ren rød) og legger til «Alfa 50 % – denne pikselen er delvis gjennomsiktig.» Du må selv bestemme hvordan du vil håndtere dette i designet ditt. Hex-koden har ingen notasjon for alfa; i CSS kan du i stedet bruke rgba(255, 0, 0, 0.5) eller hsla(0, 100%, 50%, 0.5).

Merk: Hvis pikselen er helt gjennomsiktig (alfa 0), vises hex-verdien basert på RGB-verdien som er lagret. Ofte er denne svart (#000000), men det kan være hvilken som helst farge avhengig av hvordan bildet ble opprettet.

Kopiering til utklippstavle

Alle fargeverdiene (hex, RGB og HSL) kan kopieres ved å klikke på dem. Dette bruker navigator.clipboard.writeText(). Hvis nettleseren blokkerer tilgang (noe som kan skje i HTTP i stedet for HTTPS, eller på grunn av tredjeparts innstillinger), vises meldingen: «Kunne ikke kopiere – nettleseren blokkerte tilgang til utklippstavlen.» I slike tilfeller kan du markere teksten manuelt og trykke Ctrl+C.

Tilgjengelighet og tastaturnavigasjon

For deg som ikke kan eller vil bruke musepeker, støttes tastatur:

Piltaster: Flytter korshåret en piksel i den retningen.
Shift + piltast: Flytter korshåret 10 piksler om gangen. Nyttig for å hoppe over store områder raskt.
Enter eller Mellomrom: Lager pikselen under korshåret.

Dette gjør at du kan jobbe presist uten å måtte stole på finmotorikk. Korshåret vises som et lite pluss-symbol på bildet, og forstørrelsesglasset følger med slik at du ser pikslene.

Ofte stilte spørsmål (FAQ)

1. Hvorfor får jeg en annen hex-kode enn forventet fra et skjermbilde?

Skjermbilder komprimeres ofte med JPEG eller PNG, og operativsystemet kan ha antialiasing på tekst og kanter. I tillegg kan fargekalibreringen på skjermen påvirke utseendet, men verktøyet leser pikselverdien uavhengig av skjermens innstillinger. Hvis du vet at bildet skal ha en ren farge (f.eks. #FF0000), men du får #FE0101, skyldes det komprimering eller nærliggende pikselverdier.

2. Kan jeg bruke verktøyet til å finne farger på en webside uten å ta skjermdump?

Nei, dette verktøyet krever et opplastet bilde. For å sample farger direkte fra en webside må du bruke nettleserens innebygde utviklerverktøy eller en utvidelse for fargepipette. Dette verktøyet er designet for å analysere bilder du allerede har på enheten.

3. Hva skjer hvis jeg laster opp et veldig stort bilde?

Hvis lengste side er over 4096 piksler, skaleres bildet ned. Det er en praktisk begrensning for å unngå at nettleseren bruker for mye minne. Du får ikke noen advarsel om dette – det skjer automatisk. For presis fargehenting bør du bruke et bilde som allerede er mindre.

4. Hvorfor lagrer historikken to farger som ser like ut?

Historikken skiller på RGB-verdier og alfakanal. En piksel med RGBA (255,0,0,255) og en med (255,0,0,128) er to separate oppføringer, selv om hex-koden vises som #FF0000 i begge tilfeller. Det er fordi de har forskjellig gjennomsiktighet.

5. Kan jeg få hex-koden uten #-tegnet?

Nei, verktøyet viser alltid hex med # foran (for eksempel #1E90FF). Dette er standard i CSS. Hvis du trenger koden uten #, kan du fjerne tegnet manuelt.

6. Hvorfor får jeg meldingen om at bildet ikke kan åpnes?

Meldingen «Det bildet kunne ikke åpnes. Det kan være ødelagt eller i et ustøttet format.» vises hvis filen ikke er en gyldig bildefil, eller hvis den har et ustøttet format til tross for riktig filendelse. For eksempel kan en korrupt JPEG gi denne feilen. Prøv å åpne bildet i et annet program først for å bekrefte at det er intakt.

Ofte stilte spørsmål