# Hexkoder för färg, RGB, HSL och OKLCH förklarade

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

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) och oklch(54.1% 0.247 293) är samma violett. Här är vad varje skrivsätt egentligen säger, och när var och en gör nytta.

## The short version

- Hexkoder som `#7c3aed` är ett kompakt sätt att skriva värden för rött, grönt och blått från 0 till 255, var och ett som två hexadecimala siffror.
- RGB, hex och HSL beskriver samma sRGB-färger, så vilken färg som helst som skrivs i ett av dem kan konverteras exakt till de andra.
- HSL är lätt att justera för hand, men dess ljushetsvärde stämmer inte med hur ljusa färger faktiskt ser ut, så gult och blått vid 50 % ser mycket olika ut.
- OKLCH beskriver färg efter upplevd ljushet, kromatisk styrka och nyans, vilket gör det till det bästa skrivsättet för att bygga paletter, toner och mjuka gradienter.
- En praktisk tumregel: dela varumärkesfärger som hex, och bygg paletter och gradienter i OKLCH.

**Hexkoder för färg** som `#7c3aed` är det vanligaste sättet att skriva en färg på skärmen: ett `#` följt av sex tecken som anger mängden rött, grönt och blått. RGB skriver samma tal decimalt, HSL ordnar om dem till nyans, färgmättnad och ljushet, och OKLCH beskriver färg så som ögat uppfattar den. De är olika skrivsätt för samma färger, och vart och ett är bäst på ett eget jobb.

- Violett: #7c3aed
- Himmelsblå: #0ea5e9
- Orange: #f97316
- Grön: #16a34a
- Bläck: #111827

Fem färger som används som exempel genom hela den här guiden. Tabellen nedan skriver var och en i alla fyra skrivsätten.

## Så fungerar hexkoder för färg

En hexkod är tre par av hexadecimala siffror: `#RRGGBB`. Bas 16 räknar 0 till 9 och sedan a till f, så varje par löper från `00` (ingen) till `ff` (255, full). I `#7c3aed` är rött `7c` (124), grönt `3a` (58) och blått `ed` (237): mycket blått, en hel del rött, lite grönt, vilket ger violett. Tre kanaler med 256 värden ger 16 777 216 möjliga färger.

- **Förkortning:** `#f0c` är detsamma som `#ff00cc`. Varje siffra dubbleras, så det fungerar bara för färger vars par upprepas.
- **Genomskinlighet:** en kod med åtta siffror lägger till alfa i slutet. `#7c3aed80` är violetten med ungefär 50 % opacitet, eftersom `80` är 128 av 255.
- **Versaler spelar ingen roll:** `#7C3AED` och `#7c3aed` är identiska.
- **Grått har tre lika par:** `#767676`, `#1a1a1a` och `#f4f4f4` är alla neutrala.

## RGB: samma tal decimalt

RGB skriver de tre kanalerna som vanliga tal från 0 till 255. Modern CSS skiljer dem åt med mellanslag och lägger till genomskinlighet efter ett snedstreck; den äldre syntaxen med kommatecken och `rgba()` fungerar fortfarande överallt. RGB är praktiskt när ett verktyg eller ett API ber om tal, eller när du snabbt vill se hur en färg är sammansatt.

```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);
```

Modern syntax med mellanslag överst, den äldre syntaxen med kommatecken under. Webbläsare accepterar båda.

## HSL: nyans, färgmättnad och ljushet

HSL beskriver en färg med sin **nyans** som en vinkel på färgcirkeln (0 är rött, 120 grönt, 240 blått), sin **färgmättnad** från grått (0 %) till full färg (100 %) och sin **ljushet** från svart (0 %) via den rena färgen (50 %) till vitt (100 %). Det är lätt att justera för hand: för att få en mörkare violett sänker du sista talet.

Haken är att HSL:s ljushet är en formel, inte ett mått på hur ljus en färg ser ut. Gult vid 50 % ljushet ser långt ljusare ut än blått vid 50 %. Bygg en palett genom att hålla HSL-ljusheten lika, så ser färgerna inte lika ljusa ut, vilket är precis varför standardregnbågar ser randiga ut. Se [regnbågsgradienter](https://gradiently.design/sv/guide/rainbow-gradient) för det synliga resultatet.

## OKLCH: färg så som du ser den

OKLCH kommer från Oklab, ett färgrum som Björn Ottosson publicerade 2020 och som numera ingår i CSS. Det använder tre värden: **L** är upplevd ljushet från 0 % till 100 %, **C** är kromatisk styrka, alltså hur färgstark den är, från 0 för grått upp till ungefär 0,37 för de mest intensiva färgerna, och **H** är nyansvinkeln. Lika L-värden ser verkligen lika ljusa ut, så du kan ändra en egenskap utan att störa de andra.

| Färg | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violett | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Himmelsblå | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Orange | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Grön | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Bläck | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Samma fem färger i fyra skrivsätt. HSL- och OKLCH-värdena är avrundade. Lägg märke till hur HSL kallar den gröna mörkare än violetten, medan OKLCH visar att den i själva verket är ljusare.

OKLCH glänser i gradienter. Vid blandning i vanlig sRGB, standard för hexfärger, dras en rak linje genom RGB-kuben, och färger på motsatta sidor av cirkeln möts i grått. Blandning i OKLCH behåller kromatisk styrka och färdas i stället runt nyanscirkeln.

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

Samma två stopp. I sRGB faller mitten till en grå oliv; i OKLCH passerar den turkos och grönt. Mer i [grumliga gradienter](https://gradiently.design/sv/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 gör toner och skuggor förutsägbara: ändra L i jämna steg och sänk C nära ändarna så att färgerna håller sig inom skärmens omfång.

## Vilken färgkod du använder till vad

| Uppgift | Bästa skrivsätt | Varför |
| --- | --- | --- |
| Grafisk manual, överlämning av design | Hex | Kort, universellt, går att klistra in i alla verktyg |
| Genomskinlighet i CSS | RGB eller hex med 8 siffror | Tydlig alfa efter snedstrecket |
| Snabba justeringar för hand | HSL | Lätt att putta på nyans eller mörkhet |
| Paletter, toner och skuggor | OKLCH | Lika steg ser lika ut |
| Gradienter | OKLCH | Blandar utan grå mitt |
| Skärmar med brett färgomfång | OKLCH | Kan nå färger utanför sRGB |
| Tryck | CMYK eller accentfärger | Skärmkoder trycks aldrig exakt; se [tryck av gradienter](https://gradiently.design/sv/guide/print-gradients) |

Inget av dem är fel. Konsten är att använda var och ett där det hjälper.

> **Skärmar är inte papper** Hex, RGB, HSL och OKLCH beskriver alla ljus från en skärm. Skrivare blandar bläck, som täcker ett annat spann av färger, så provtryck alltid varumärkesfärger i stället för att lita på en konverterad kod.

För att testa något av de här värdena visar [oklch.com](https://oklch.com) en färg i varje skrivsätt och varnar när den hamnar utanför en skärms omfång, och [MDN:s färgreferens](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) täcker varje syntax. Om du väljer färger snarare än skriver dem är [så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors) nästa steg, och [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) visar hur du kontrollerar att texten förblir läsbar.

## FAQ

### Vad betyder de sex tecknen i en hexkod för färg?

De är tre par hexadecimala siffror för rött, grönt och blått. Varje par löper från `00` (0) till `ff` (255), så `#7c3aed` betyder rött 124, grönt 58, blått 237.

### Är hex samma sak som RGB?

Ja. Hex är RGB skrivet i bas 16. `#7c3aed` och `rgb(124 58 237)` är exakt samma färg.

### Vad är OKLCH?

OKLCH är ett färgskrivsätt baserat på färgrummet Oklab. Det beskriver upplevd ljushet, kromatisk styrka och nyans, så lika ljushetsvärden ser lika ljusa ut, vilket gör paletter och gradienter mycket mer förutsägbara.

### Hur lägger jag till genomskinlighet i en hexkod?

Lägg till två siffror till för alfa. `#7c3aed80` är ungefär 50 % opacitet och `#7c3aedcc` ungefär 80 %. I CSS kan du också skriva `rgb(124 58 237 / 0.5)`.

### Vilken färgkod ska jag använda i CSS?

Hex duger för enstaka färger. Använd OKLCH för paletter, toner, mörkt läge och gradienter, där den perceptuella ljusheten undviker ojämna steg och grå mitt.