Fargekoder
Velg en farge eller skriv inn en fargekode — HEX, RGB og HSL oppdateres automatisk til å vise samme farge.
Hvordan bruke fargekoder-verktøyet
- Bruk fargevelgeren, eller skriv direkte inn en HEX-, RGB- eller HSL-verdi.
- De to andre formatene oppdateres automatisk til å vise nøyaktig samme farge.
- Trykk "Kopier" ved siden av formatet du trenger.
Hva er forskjellen på HEX, RGB og HSL?
HEX (f.eks. #2f6b4f) er den vanligste måten å skrive farger på i CSS og designverktøy — en sekstallssystem-kode for rødt, grønt og blått.
RGB skriver ut de samme tre fargekomponentene som tall fra 0–255 hver, ofte lettere å lese og justere manuelt enn HEX.
HSL (Hue/Saturation/Lightness — fargetone/metning/lyshet) er ofte den mest intuitive å justere for hånd: hold fargetonen fast og endre kun lyshet for en lysere/mørkere variant av samme farge.
Dette verktøyet dekker de tre heldekkende (opake) formatene. I CSS finnes det også gjennomsiktighetsvarianter av alle tre — HEXA (8-tegns HEX med en ekstra alfakanal), RGBA og HSLA — der en fjerde verdi mellom 0 og 1 angir hvor gjennomsiktig fargen skal være. Trenger du en gjennomsiktig farge, legg til alfakanalen manuelt i verdien denne kalkulatoren gir deg.
En fin fargekombinasjon er ikke nødvendigvis en tilgjengelig fargekombinasjon — bruk gjerne fargekontrast-sjekkeren ved siden av denne for å bekrefte at en tekstfarge og bakgrunnsfarge du har valgt her, faktisk oppfyller WCAG-kravene til lesbarhet.
Ofte stilte spørsmål
Hvorfor har HEX-koder noen ganger bare 3 tegn?
En forkortet 3-tegns HEX-kode (f.eks. #0f6) er en snarvei der hvert tegn dobles (#0f6 blir #00ff66) — nyttig når hver fargekanal kun trenger én av 16 verdier.
Hvilket format bør jeg bruke i CSS?
Alle tre støttes direkte i moderne CSS. HEX er mest kompakt og vanligst i designverktøy, RGB er ofte lettest å lese, og HSL er nyttig når du vil lage fargevarianter (lysere/mørkere/mer/mindre mettet) av samme grunnfarge.
Lagrer dere fargen jeg velger?
Nei. Konverteringen skjer helt i din egen nettleser — ingenting sendes til noen server.
Støtter dette gjennomsiktighet (alpha-kanal)?
Nei, verktøyet viser kun heldekkende (opake) farger. For gjennomsiktighet, legg til en alfakanal manuelt: HEXA (8 tegn), RGBA eller HSLA med en fjerde verdi mellom 0 og 1.
Hvordan vet jeg om fargekombinasjonen min er tilgjengelig?
Bruk fargekontrast-sjekkeren ved siden av denne for å bekrefte at valgt tekstfarge og bakgrunnsfarge oppfyller WCAG-kravene til lesbarhet.