CodeKitHubHva er dette verktøyet?
En fargevelger gjør et visuelt valg — denne blåfargen, akkurat den pikselen i en logo — om til de numeriske kodene programvare forstår. Samme farge har flere likeverdige notasjoner: HEX (#3b82f6) dominerer i CSS og designoverleveringer, RGB (59, 130, 246) matcher hvordan skjermer og kode representerer farge, og HSL (217°, 91%, 60%) beskriver fargetone, metning og lyshet på en måte mennesker lettere kan resonnere rundt.
Den andre halvdelen av verktøyet er en bildepipette. Last opp et skjermbilde, en logo eller et bilde, og klikk et hvilket som helst punkt for å hente fargen under markøren — den vanlige måten å svare på «hvilken nøyaktig farge er dette?». Der nettleseren støtter EyeDropper-API-et, brukes den innebygde forstørrende lupen; i andre nettlesere leser verktøyet pikselverdien fra en canvas-kopi av bildet. I begge tilfeller skjer behandlingen lokalt: bildet lastes aldri opp.
Hvorfor bruke det?
- Tre formater samtidig: hver valgte farge vises som HEX, RGB og HSL på én gang, hver med egen kopieringsknapp med ett klikk — uten et eget konverteringssteg.
- Hent farge fra bilde: last opp et hvilket som helst bilde og klikk for å hente den nøyaktige pikselfargen — ideelt for å hente merkevarefarger fra en logo eller matche en farge sett i et skjermbilde.
- Bruker nettleserens innebygde EyeDropper med forstørrelse når det er tilgjengelig, og faller tilbake til presis canvas-pikselavlesning ellers.
- En live forhåndsvisning viser gjeldende farge på et blikk, så du kan bekrefte valget før du kopierer.
- Gratis, umiddelbart og helt lokalt: farger beregnes og bilder leses i nettleseren din — ingenting lastes opp, lagres eller logges.
Slik bruker du det
- Velg en farge med fargefeltet, eller lim inn/rediger en verdi direkte.
- For å hente farge fra et bilde: last opp et bilde og klikk på punktet med fargen du vil ha.
- Les av HEX-, RGB- og HSL-verdiene, vist sammen med en live forhåndsvisning.
- Klikk kopieringsknappen ved siden av formatet du trenger — HEX for CSS, RGB eller HSL for kode.
Eksempel
Inndata
Klikker på det blå området i en opplastet logoResultat
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Alle tre linjene beskriver nøyaktig samme farge. Bruk HEX i stilark og designverktøy, RGB der kode forventer kanalverdier, og HSL når du vil lage lysere eller mørkere varianter ved å endre bare det siste tallet.
Hvilket fargeformat for hvilken oppgave
Moderne CSS godtar alle tre overalt hvor en farge er tillatt, så valget handler om arbeidsflyt, ikke kompatibilitet. Team standardiserer ofte på HEX i designtokens, og bruker HSL mens de utforsker varianter — endre lysheten med 10–15 poeng for å få en brukbar hover-tilstand uten å forskyve fargetonen.
| Format | Eksempel | Best for |
|---|---|---|
| HEX | #3b82f6 | CSS, designverktøy, deling av farger i chat og spesifikasjoner |
| RGB | rgb(59, 130, 246) | Kode som håndterer kanaler, canvas-tegning, rgba()-gjennomsiktighet |
| HSL | hsl(217, 91%, 60%) | Lage lysere/mørkere/hover-varianter, bygge paletter |
Fra valgt farge til ferdig CSS
Å hente en farge er som regel bare første steg i en styling-oppgave. Trenger du samme farge i andre notasjoner — CMYK for print eller en OKLCH-verdi for bredt fargespekter i CSS — fortsetter Fargekonverteren der denne velgeren slutter.
Den valgte fargen brukes ofte rett inn i en visuell effekt: Box Shadow-generatoren tar en HEX-verdi for realistiske skygger, og avrundede kort bygget med Border Radius-generatoren fullfører utseendet.
→ Fargekonverterer · Box Shadow-generator · Border Radius-generator
Ofte stilte spørsmål
Hva er forskjellen mellom HEX, RGB og HSL?
De er tre notasjoner for samme fargemodell. HEX pakker de røde, grønne og blå kanalene inn i seks heksadesimale sifre (#3b82f6) og er den vanligste formen i CSS og designverktøy. RGB lister de samme tre kanalene som desimaltall fra 0 til 255. HSL uttrykker fargen på nytt som fargetone (0–360°), metning og lyshet — langt mer intuitivt når du vil ha «samme farge, bare lysere». Konvertering mellom dem endrer aldri selve fargen.
Hvordan fungerer det å hente en farge fra et bilde?
Det opplastede bildet tegnes på en usynlig canvas i nettleseren din. Når du klikker, leser verktøyet de røde, grønne og blå verdiene til pikselen på akkurat den posisjonen og konverterer dem til HEX, RGB og HSL. I nettlesere som støtter EyeDropper-API-et (Chrome og Edge på desktop) åpnes i stedet en innebygd forstørrende lupe, slik at du kan velge med pikselpresisjon hvor som helst på skjermen.
Blir bildet mitt lastet opp noe sted?
Nei. Bildet åpnes direkte av nettleseren din og leses lokalt fra en canvas; ingen fil og ingen fargedata blir noensinne sendt eller lagret. Du kan laste siden, gå offline, og både fargevelgeren og bildepipetten fortsetter å fungere — noe som gjør det trygt for uutgitte design og interne skjermbilder.
Hvorfor stemmer ikke den hentede fargen nøyaktig med det jeg ser på skjermen?
To vanlige årsaker. Kantutjevning: piksler i kantene av tekst og former blandes med bakgrunnen, så klikker du én piksel feil, får du en mellomfarge — hent i stedet fra midten av et jevnt område. Fargestyring: JPG-/PNG-filer med uvanlige fargeprofiler kan gjengis litt forskjellig på ulike skjermer; verktøyet rapporterer pikselverdien slik den er lagret i filen, som er verdien du vil ha til designarbeid.
Hvilket format bør jeg kopiere til CSS?
HEX er det tryggeste standardvalget — alle nettlesere og verktøy godtar det. Bruk HSL når du planlegger å lage hover- eller mørk modus-varianter, siden justering av kun lyshetskomponenten holder fargetone og metning konsistent. RGB er hovedsakelig nyttig når kode bygger farger fra numeriske kanaler, eller når du legger til gjennomsiktighet, hvor rgba(59, 130, 246, 0.5) leses tydeligere enn en åtte-sifret HEX.