HEX-farvekoder forklaret: sådan virker #RRGGBB

Sådan virker en HEX-farvekode

Alle farver på en skærm blandes af rødt, grønt og blåt lys. En HEX-kode skriver styrken af hvert lys som to tegn efter #-tegnet: først rød, så grøn, så blå. Det er mønsteret #RRGGBB.

Tegnene er hexadecimale, en måde at tælle på med 16 cifre: 0 til 9 og derefter a (10), b (11), c (12), d (13), e (14) og f (15). Ét par dækker 256 værdier, fra 00 (0) til ff (255), præcis samme interval som rgb().

For at lave et par om til et almindeligt tal ganger du det første ciffer med 16 og lægger det andet til. Nedenfor ser du #1e90ff, CSS-farven dodgerblue, i fire formater og derefter regnet ud par for par.

#1e90ff er altså rgb(30, 144, 255): lidt rød, en del grøn og fuld blå, som tilsammen giver en klar himmelblå. Tre par med 256 værdier giver 16.777.216 mulige farver.

Kortform med tre og fire cifre

Når begge cifre i hvert par er ens, kan du skrive hvert par én gang. #ffcc00 bliver til #fc0, og browseren fordobler hvert ciffer igen. #1e90ff har ingen kortform, fordi 1e og 90 ikke er fordoblede par.

Kortformen dækker kun 4.096 af de 16,7 millioner farver. En version med fire cifre tilføjer opacitet på samme måde, så #f008 betyder #ff000088.

HEX-opacitet: HEX med otte cifre og alfa

En kode med otte cifre tilføjer et fjerde par til alfa, altså opaciteten: #RRGGBBAA. 00 er helt gennemsigtig, og ff er helt dækkende. Alle aktuelle browsere understøtter det i CSS, og det samme gælder kortformen #RGBA med fire cifre.

For at finde parret ganger du opaciteten med 255, afrunder til et helt tal og omregner det til hex. 50 % giver 127,5, som rundes op til 128 og skrives 80. Her er hele tabellen anvendt på #1e90ff.

.overlay {
    background: #00000080;
}

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

To faldgruber. For det første er 80 lig med 128 ud af 255, altså 50,2 % og ikke præcis 50 %: alfa i hex har kun 256 trin, så de fleste runde procenttal er tætte tilnærmelser. For det andet sætter Android alfa først. I en farveressource i Android betyder #801e90ff det samme som #1e90ff80 i CSS.

Sådan aflæser du en HEX-kode med øjet

Du kan gætte en farve uden at omregne noget. Kig på det første ciffer i hvert par, for det bærer næsten al informationen.

• Det største første ciffer er det dominerende lys. #d2691e har d i rød, 6 i grøn og 1 i blå, så det er en orangebrun.
• To høje kanaler blandes: rød og grøn giver gul, grøn og blå giver cyan, rød og blå giver magenta eller lilla.
• Tre ens par giver en grå. #333333 er mørkegrå, #999999 er lysegrå. Næsten ens par, som #708090, giver en dæmpet, grålig farve.
• Generelt høje cifre betyder en lys farve, lave cifre en mørk. Når alle tre par er c0 eller højere, er farven bleg. Når alle tre er 30 eller lavere, er den meget mørk.
• Grøn ser langt lysere ud end blå ved samme tal. #00ff00 har en OKLCH-lyshed på 0,866, #0000ff kun 0,452.

Hvorfor #808080 ikke er mellemgrå

#808080 ligger præcis midt i tallene: 128 ud af 255 i hver kanal. Den ser ikke ud til at ligge midt mellem sort og hvid. Dens OKLCH-lyshed er 0,600, så den opleves som 60 % af vejen mod hvid.

HEX-værdier er allerede kodet med sRGB-kurven, som nogenlunde følger øjet, men ikke præcist. #808080 udsender omkring 21,6 % af lyset fra hvid, og perceptuelle modeller lægger det visuelle midtpunkt lavere: OKLCH ved #636363, CIELAB ved #777777.

Det har betydning for tekst. Grå #808080 på hvid giver 3,95:1 og består ikke WCAG AA for brødtekst. #767676 er den lyseste grå, der når 4,5:1, og #777777, ét trin lysere, dumper allerede med 4,48:1.

Store eller små bogstaver, med eller uden #

HEX-koder skelner ikke mellem store og små bogstaver. #1E90FF, #1e90ff og #1E90ff er den samme farve i CSS, SVG og designværktøjer. Vælg én stil, og hold fast i den overalt, så en søgning i koden finder alle forekomster. Små bogstaver er det mest almindelige i CSS.

#-tegnet er en del af CSS-syntaksen, ikke af farven. Figma og mange designværktøjer viser koden uden, og programmeringssprog skriver den ofte som et tal med præfikset 0x, som i Flutter, hvor Color(0xFF1E90FF) begynder med alfaparret.

Sådan finder du HEX-koden for en farve på skærmen

Brug en pipette: et værktøj, der læser farven under markøren og viser dens kode. De er gratis og for det meste allerede installeret.

• Chrome og Edge: åbn DevTools med F12, klik på en farvefirkant i panelet Styles, og brug pipetteikonet til at vælge fra siden.
• PickShade: farvevælgeren på forsiden har en pipetteknap i Chrome og Edge, der vælger fra et hvilket som helst sted på skærmen.
• Windows: installér Microsoft PowerToys, og tryk på Win + Shift + C for at åbne Farvevælger.
• macOS: åbn Digital farvemåler under Programmer, Værktøjer. Skift til sRGB, og vælg derefter Oversigt, Vis værdier, Som hexadecimal.
• Figma, Photoshop og de fleste designprogrammer: tryk på I for pipetten.
• I et foto eller et skærmbillede: åbn det i billedfarvevælgeren, og klik på en pixel. Billedet bliver på din enhed.

En valgt værdi kan afvige et par enheder fra originalen, fordi skærme bruger farveprofiler, og billeder komprimeres. Når du skal bruge den præcise værdi, så kopiér den fra designfilen eller CSS’en, ikke fra et skærmbillede.

Spørgsmål og svar