# Hex-fargekoder, RGB, HSL og OKLCH forklart

[Canonical HTML page](https://gradiently.design/nb/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) og oklch(54.1% 0.247 293) er den samme fiolette fargen. Her er hva hver skrivemåte faktisk sier, og når hver av dem fortjener plassen sin.

## The short version

- Hex-fargekoder som `#7c3aed` er en kompakt måte å skrive verdiene for rødt, grønt og blått fra 0 til 255, hver som to sifre i sekstentallsystemet.
- RGB, hex og HSL beskriver alle de samme sRGB-fargene, så en farge skrevet i én kan regnes nøyaktig om til de andre.
- HSL er lett å justere for hånd, men lysverdien samsvarer ikke med hvordan lyse farger faktisk ser ut, så gult og blått på 50 % ser svært ulike ut.
- OKLCH beskriver farge etter oppfattet lyshet, kroma og fargetone, noe som gjør den til den beste skrivemåten for paletter, toner og myke gradienter.
- En praktisk regel: del merkevarefarger som hex, og bygg paletter og gradienter i OKLCH.

**Hex-fargekoder** som `#7c3aed` er den vanligste måten å skrive en farge på skjerm: en `#` etterfulgt av seks tegn som angir mengden rødt, grønt og blått. RGB skriver de samme tallene i titallsystemet, HSL omorganiserer dem til fargetone, metning og lyshet, og OKLCH beskriver farge slik øyet oppfatter den. Det er ulike skrivemåter for de samme fargene, og hver er best til sin jobb.

- Fiolett: #7c3aed
- Himmel: #0ea5e9
- Oransje: #f97316
- Grønn: #16a34a
- Blekk: #111827

Fem farger brukt som eksempler gjennom hele guiden. Tabellen under skriver hver av dem i alle fire skrivemåtene.

## Slik fungerer hex-fargekoder

En hex-kode er tre par sifre i sekstentallsystemet: `#RRGGBB`. Sekstentallsystemet teller 0 til 9 og deretter a til f, så hvert par går fra `00` (ingenting) til `ff` (255, full styrke). I `#7c3aed` er rød `7c` (124), grønn er `3a` (58) og blå er `ed` (237): mye blått, en del rødt, lite grønt, altså fiolett. Tre kanaler med 256 verdier gir 16 777 216 mulige farger.

- **Forkortelse:** `#f0c` er det samme som `#ff00cc`. Hvert siffer dobles, så det fungerer bare for farger der parene gjentar seg.
- **Gjennomsiktighet:** en kode med åtte sifre legger til alfa på slutten. `#7c3aed80` er fiolett med omtrent 50 % dekning, fordi `80` er 128 av 255.
- **Store og små bokstaver spiller ingen rolle:** `#7C3AED` og `#7c3aed` er identiske.
- **Grå toner har tre like par:** `#767676`, `#1a1a1a` og `#f4f4f4` er alle nøytrale.

## RGB: de samme tallene i titallsystemet

RGB skriver de tre kanalene som vanlige tall fra 0 til 255. Moderne CSS skiller dem med mellomrom og legger til gjennomsiktighet etter en skråstrek, mens den eldre kommasyntaksen og `rgba()` fortsatt fungerer overalt. RGB er praktisk når et verktøy eller en API ber om tall, eller når du vil lese hva en farge består av med et øyekast.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

Moderne syntaks med mellomrom øverst, den eldre kommasyntaksen under. Nettlesere godtar begge.

## HSL: fargetone, metning og lyshet

HSL beskriver en farge med **fargetonen** som en vinkel på fargehjulet (0 er rødt, 120 grønt, 240 blått), **metningen** fra grått (0 %) til full farge (100 %), og **lysheten** fra svart (0 %) via den rene fargen (50 %) til hvitt (100 %). Den er lett å justere for hånd: for å lage en mørkere fiolett senker du det siste tallet.

Haken er at HSLs lyshet er en formel, ikke et mål på hvor lys en farge ser ut. Gult på 50 % lyshet ser langt lysere ut enn blått på 50 %. Bygger du en palett med lik HSL-lyshet, ser ikke fargene like lyse ut, og det er nettopp derfor standard regnbuer ser stripete ut. Se [regnbuegradienter](https://gradiently.design/nb/guide/rainbow-gradient) for det synlige resultatet.

## OKLCH: farge slik du ser den

OKLCH kommer fra Oklab, et fargerom publisert av Björn Ottosson i 2020 og nå en del av CSS. Den bruker tre verdier: **L** er oppfattet lyshet fra 0 % til 100 %, **C** er kroma, hvor fargesterk den er, fra 0 for grått opp til omtrent 0,37 for de mest livlige fargene, og **H** er fargetonevinkelen. Like L-verdier ser faktisk like lyse ut, så du kan endre én egenskap uten å forstyrre de andre.

| Farge | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Fiolett | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Himmel | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Oransje | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Grønn | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Blekk | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

De samme fem fargene i fire skrivemåter. HSL- og OKLCH-verdiene er avrundet. Legg merke til at HSL kaller den grønne mørkere enn den fiolette, mens OKLCH viser at den faktisk er lysere.

OKLCH gjør seg best i gradienter. Når du blander i vanlig sRGB, standarden for hex-farger, trekkes det en rett linje gjennom RGB-kuben, og farger på motsatte sider av hjulet møtes i grått. Å blande i OKLCH bevarer kromaen og går i stedet rundt fargetonehjulet.

- Blått til gult i sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Blått til gult i OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

De samme to stoppene. I sRGB faller midten til en grå oliven, mens den i OKLCH går gjennom turkis og grønt. Mer i [sølete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

OKLCH gjør toner og skygger forutsigbare: endre L i jevne steg og senk C nær endene, så fargene holder seg på skjermen.

## Hvilken fargekode du bruker hvor

| Jobb | Beste skrivemåte | Hvorfor |
| --- | --- | --- |
| Merkevareguide, overlevering til design | Hex | Kort, universell, limes inn i alle verktøy |
| Gjennomsiktighet i CSS | RGB eller hex med 8 sifre | Tydelig alfa etter skråstreken |
| Raske justeringer for hånd | HSL | Lett å dytte fargetone eller mørkhet |
| Paletter, toner og skygger | OKLCH | Like steg ser like ut |
| Gradienter | OKLCH | Blander uten grå midtpartier |
| Skjermer med bredt fargerom | OKLCH | Kan nå farger utenfor sRGB |
| Trykk | CMYK eller spotfarger | Skjermkoder trykkes aldri nøyaktig, se [å trykke gradienter](https://gradiently.design/nb/guide/print-gradients) |

Ingen av disse er feil. Ferdigheten er å bruke hver der den hjelper.

> **Skjermer er ikke papir** Hex, RGB, HSL og OKLCH beskriver alle lys fra en skjerm. Skrivere blander blekk, som dekker et annet fargeområde, så prøvetrykk alltid merkevarefarger i stedet for å stole på en omregnet kode.

For å teste noen av disse verdiene viser [oklch.com](https://oklch.com) en farge i alle skrivemåter og advarer når den faller utenfor en skjerms område, og [MDNs fargereferanse](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) dekker alle syntaksene. Hvis du velger farger i stedet for å skrive dem, er [slik velger du merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors) neste steg, og [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility) viser hvordan du sjekker at tekst forblir lesbar.

## FAQ

### Hva betyr de seks tegnene i en hex-fargekode?

De er tre par sifre i sekstentallsystemet for rødt, grønt og blått. Hvert par går fra `00` (0) til `ff` (255), så `#7c3aed` betyr rød 124, grønn 58, blå 237.

### Er hex det samme som RGB?

Ja. Hex er RGB skrevet i sekstentallsystemet. `#7c3aed` og `rgb(124 58 237)` er nøyaktig den samme fargen.

### Hva er OKLCH?

OKLCH er en fargeskrivemåte basert på fargerommet Oklab. Den beskriver oppfattet lyshet, kroma og fargetone, så like lysverdier ser like lyse ut, og det gjør paletter og gradienter langt mer forutsigbare.

### Hvordan legger jeg til gjennomsiktighet i en hex-kode?

Legg til to sifre til for alfa. `#7c3aed80` er omtrent 50 % dekning og `#7c3aedcc` omtrent 80 %. I CSS kan du også skrive `rgb(124 58 237 / 0.5)`.

### Hvilken fargekode bør jeg bruke i CSS?

Hex er fint til enkeltfarger. Bruk OKLCH til paletter, toner, mørk modus og gradienter, der den perseptuelle lysheten unngår ujevne steg og grå midtpartier.