HEX-fargekoder forklart: slik fungerer #RRGGBB

Slik fungerer en HEX-fargekode

Alle farger på en skjerm er blandet av rødt, grønt og blått lys. En HEX-kode skriver styrken på hvert lys som to tegn etter #-tegnet: først rødt, så grønt, så blått. Det er mønsteret #RRGGBB.

Tegnene er heksadesimale, en måte å telle på med 16 sifre: 0 til 9, deretter a (10), b (11), c (12), d (13), e (14) og f (15). Ett par dekker 256 verdier, fra 00 (0) til ff (255), nøyaktig samme spenn som i rgb().

For å gjøre et par om til et vanlig tall ganger du det første sifferet med 16 og legger til det andre. Nedenfor ser du #1e90ff, CSS-fargen dodgerblue, i fire formater, og deretter regnet ut par for par.

#1e90ff er altså rgb(30, 144, 255): litt rødt, en god del grønt og fullt blått, som til sammen blir en klar himmelblå. Tre par med 256 verdier hver gir 16 777 216 mulige farger.

Kortform for HEX med tre og fire sifre

Når begge sifrene i hvert par er like, kan du skrive hvert par én gang. #ffcc00 blir #fc0, og nettleseren dobler hvert siffer tilbake. #1e90ff har ingen kortform, fordi 1e og 90 ikke er doble par.

Kortformen dekker bare 4 096 av de 16,7 millioner fargene. En variant med fire sifre legger til opasitet på samme måte, så #f008 betyr #ff000088.

Opasitet i HEX: åttesifret HEX med alfa

En kode med åtte sifre legger til et fjerde par for alfa, altså opasiteten: #RRGGBBAA. 00 er helt gjennomsiktig og ff er helt dekkende. Alle nåværende nettlesere støtter det i CSS, sammen med kortformen #RGBA med fire sifre.

For å finne paret ganger du opasiteten med 255, runder av til et helt tall og gjør det om til HEX. 50 % gir 127,5, som rundes av til 128 og skrives som 80. Her er hele tabellen, brukt på #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

To ting å passe på. For det første er 80 lik 128 av 255, altså 50,2 % og ikke nøyaktig 50 %: alfa i HEX har bare 256 trinn, så de fleste runde prosenttall blir tilnærminger. For det andre setter Android alfa først. I en fargeressurs i Android betyr #801e90ff det samme som #1e90ff80 i CSS.

Slik leser du en HEX-kode med øynene

Du kan gjette en farge uten å regne om noe. Se på det første sifferet i hvert par, for det bærer nesten all informasjonen.

• Det største første sifferet viser hvilket lys som dominerer. #d2691e har d i rødt, 6 i grønt og 1 i blått, så den er oransjebrun.
• To høye kanaler blandes: rødt og grønt gir gult, grønt og blått gir cyan, rødt og blått gir magenta eller lilla.
• Tre like par gir grått. #333333 er mørkegrå, #999999 er lysegrå. Nesten like par, som #708090, gir en dempet, gråaktig farge.
• Høye sifre totalt betyr en lys farge, lave sifre en mørk. Når alle tre parene er c0 eller høyere, er fargen blek. Når alle tre er 30 eller lavere, er den svært mørk.
• Grønt ser mye lysere ut enn blått ved samme tall. #00ff00 har OKLCH-lyshet 0,866, #0000ff bare 0,452.

Hvorfor #808080 ikke er mellomgrå

#808080 ligger nøyaktig midt på tallskalaen: 128 av 255 i hver kanal. Den ser likevel ikke ut som halvveis mellom svart og hvitt. OKLCH-lysheten er 0,600, så øyet oppfatter den som 60 % av veien mot hvitt.

HEX-verdier er allerede kodet med sRGB-kurven, som følger øyet omtrent, men ikke helt. #808080 sender ut rundt 21,6 % av lyset til hvitt, og perseptuelle modeller legger det visuelle midtpunktet lavere: OKLCH ved #636363, CIELAB ved #777777.

Dette betyr noe for tekst. Grå #808080 på hvitt gir 3,95:1 og består ikke WCAG AA for brødtekst. #767676 er den lyseste gråtonen som klarer 4,5:1, og #777777, ett trinn lysere, kommer allerede til kort med 4,48:1.

Store eller små bokstaver, med eller uten #

HEX-koder skiller ikke mellom store og små bokstaver. #1E90FF, #1e90ff og #1E90ff er samme farge i CSS, SVG og designverktøy. Velg én skrivemåte og hold deg til den overalt, så et søk i koden finner alle forekomster. Små bokstaver er vanligst i CSS.

#-tegnet er en del av CSS-syntaksen, ikke av fargen. Figma og mange designverktøy viser koden uten det, og programmeringsspråk skriver den ofte som et tall med prefikset 0x, som i Flutter, der Color(0xFF1E90FF) begynner med alfaparet.

Slik finner du HEX-koden til en farge på skjermen

Bruk en pipette: et verktøy som leser fargen under markøren og viser koden. De er gratis, og de fleste har du allerede.

• Chrome og Edge: åpne DevTools med F12, klikk på en fargerute i Styles-panelet og bruk pipetteikonet for å hente en farge fra siden.
• PickShade: fargevelgeren på forsiden har en pipetteknapp i Chrome og Edge som henter farger fra hvor som helst på skjermen.
• Windows: installer Microsoft PowerToys og trykk Win + Shift + C for å åpne Color Picker.
• macOS: åpne Digital fargemåler under Programmer, Verktøy. Sett den til sRGB, og velg deretter Vis, Vis verdier, Som heksadesimal.
• Figma, Photoshop og de fleste designprogrammer: trykk I for pipetten.
• I et foto eller en skjermdump: åpne bildet i verktøyet for å hente farger fra bilder og klikk på en hvilken som helst piksel. Bildet blir på enheten din.

En hentet verdi kan avvike noen enheter fra originalen, fordi skjermer bruker fargeprofiler og bilder komprimeres. Når du trenger den nøyaktige verdien, kopierer du den fra designfilen eller CSS-en, ikke fra en skjermdump.

Spørsmål og svar