# OKLCH förklarat: perceptuell färg för designers

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

HSL lovade läsbar färg och levererade nästan. OKLCH behåller den läsbara delen och rättar lögnen om ljushet, vilket är varför designsystem går över till det.

## The short version

- OKLCH beskriver en färg med tre värden: perceptuell ljushet (L), kroma eller färgstyrka (C) och nyansvinkel (H).
- Till skillnad från HSL stämmer OKLCH-ljusheten med hur ljusa färger ser ut för människor, så två färger med samma L har liknande kontrast mot vitt.
- I CSS skrivs det `oklch(60% 0.2 293)`, med valfri alfa efter ett snedstreck, och alla nuvarande större webbläsare stöder det.
- Kroma har inget fast maximum: hur mycket färg som är möjlig beror på ljusheten, nyansen och skärmen, och färger utanför skärmens område mappas tillbaka in i det.
- Att interpolera gradienter i OKLCH eller OKLab undviker den gråa, leriga mitten som sRGB-blandningar ger mellan avlägsna nyanser.

**OKLCH** är ett sätt att skriva färg som ljushet, kroma och nyans, där ljusheten mäts så som människans ögon uppfattar den. I CSS är `oklch(60% 0.2 293)` en violett som ser ut att ligga 60 % av vägen från svart till vitt, med stark färg, vid en nyansvinkel på 293 grader. Den praktiska vinsten för designers är enkel: ändra nyansen och behåll L, så ser den nya färgen precis lika ljus ut. HSL kan inte lova det, och det är därför OKLCH har blivit standard i nyare designsystem, inklusive Tailwinds färgpalett.

## Ljushet, kroma och nyans

| Bokstav | Namn | Område | Vad den styr |
| --- | --- | --- | --- |
| L | Ljushet | 0 % till 100 % (eller 0 till 1) | Hur ljus färgen ser ut, så som ögat bedömer det |
| C | Kroma | 0 och uppåt, sällan över 0,37 | Hur mycket färg: 0 är grått, högre är mer livfullt |
| H | Nyans | 0 till 360 grader | Vilken färg: ungefär 30 rött, 110 gult, 140 grönt, 265 blått |
| / A | Alfa | 0 till 1, eller 0 % till 100 % | Opacitet, valfritt |

Nyansvinklar i OKLCH sammanfaller inte med HSL:s. Rent blått ligger nära 264 här, inte 240.

**Ljushet** är stjärnan. Den kommer från OKLab, ett färgrum som publicerades 2020 och byggdes för att förutsäga upplevd ljushet, färgstyrka och nyans jämnare än äldre modeller. **Kroma** ersätter mättnad: i stället för en procentsats av något maximum är det en absolut mängd färg, så en kroma på 0,1 betyder samma visuella intensitet oavsett nyans. **Nyans** är fortfarande en vinkel, men vinklarna är fördelade så att ett steg på 30 grader ser ut som en liknande förändring hela varvet runt.

## OKLCH mot HSL: samma ljushet, sida vid sida

Ta sex nyanser och håll ljusheten och kroman fasta vid `oklch(65% 0.11 H)`. Färgproverna nedan ser ut som en familj, och deras kontrast mot vitt håller sig mellan 3,1:1 och 3,4:1. Gör samma sak i [HSL](https://gradiently.design/sv/guide/hsl-colors) vid 50 % ljushet och kontrasten mot vitt svänger från ungefär 1,07:1 för gult till 8,6:1 för blått.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` i sex nyanser. Lika ljushet, lika kroma, och de ser verkligen ut så.

Den jämnheten är det som gör OKLCH användbart i verkligt arbete. En uppsättning statusfärger, diagramserier eller kategoritaggar kan dela ett L och C och skilja sig bara i nyans, och ingen av dem skriker högre än de andra. Om du sedan behöver en färgblindsäker uppsättning varierar du L också, vilket tas upp i [färgblindsvänliga paletter](https://gradiently.design/sv/guide/color-blindness-design).

## Så skriver du OKLCH i CSS

```css
:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}
```

`oklch(60% 0.2 293)` ligger nära #8860ea i sRGB. Nuvarande versioner av Chrome, Edge, Firefox och Safari stöder alla oklch().

Webbläsarstödet är brett, och du kan bekräfta detaljerna på [caniuse](https://caniuse.com/mdn-css_types_color_oklch). För att utforska värden visuellt är [oklch.com](https://oklch.com) en färgväljare som visar vilka kombinationer en vanlig skärm kan visa. För att konvertera en befintlig hexkod för ett varumärke, klistra in den i den väljaren eller i färgpanelen i webbläsarens utvecklarverktyg, som kan visa vilken färg som helst i OKLCH.

## Bygga en skala med OKLCH

För att göra en skala av ljusare och mörkare toner, stega ljusheten jämnt och låt kroman stiga mot mitten och sjunka mot ändarna. Mycket ljusa och mycket mörka färger kan fysiskt inte hålla mycket färg, så om du håller kroman hög i ytterlägena måste webbläsaren klippa dem. Här är en violett skala byggd på det sättet.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Nyans 293 genomgående. Varje steg är ett liknande visuellt hopp, vilket HSL-skalor sällan klarar.

Eftersom L följer upplevd ljushet kan du fatta grova kontrastbeslut enbart utifrån siffrorna. I den här skalan klarar vit text 4,5:1 från L 50 och nedåt, och svart text klarar det från L 60 och uppåt. Bekräfta alltid med en [kontrastkontroll](https://gradiently.design/sv/guide/color-contrast-accessibility), men du kommer sällan att bli överraskad. Hur en sådan skala görs till namngivna tokens tas upp i [designtokens](https://gradiently.design/sv/guide/design-tokens).

## Gamut: när en färg inte finns på skärmen

OKLCH kan beskriva färger som ingen skärm kan visa. De flesta skärmar visar sRGB, många nyare telefoner och laptops visar det bredare Display P3. Skruva upp kroman tillräckligt högt och du lämnar båda. När det händer mappar webbläsaren färgen tillbaka till den närmaste som skärmen kan visa, så ingenting går sönder, men du får kanske inte det du skrev.

### Undvik

- Hög kroma vid mycket ljus eller mycket mörk L
- Att kopiera P3-värden in i en varumärkesguide avsedd för tryck
- Att anta att en livfull OKLCH-färg ser likadan ut på varje skärm
- Att använda kroma över ungefär 0,2 för stora bakgrundsytor

### Gör så här

- Kontrollera värden i en väljare som markerar sRGB-kanten
- Behåll en hex-reserv för varumärkesfärger
- Sänk kroman mot ändarna av en skala
- Spara de mest livfulla färgerna till små accenter

## OKLCH-gradienter

Gradienter är där perceptuell färg lönar sig mest synligt. En vanlig CSS-gradient blandar i sRGB, som sjunker ner i grått mellan avlägsna nyanser. Modern CSS låter dig välja rum att blanda i, och OKLab eller OKLCH håller mitten klar och ren.

- Blandat i sRGB: grå mitt: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Blandat i OKLab: ren: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Blandat i OKLCH: via grönt: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Samma två färger på tre sätt. OKLCH färdas runt nyanshjulet, så det kan passera nyanser som ingen av ändarna innehåller.

OKLab blandar i en rak linje och passar de flesta gradienter med två färger. OKLCH roterar nyansen, vilket är underbart för solnedgångar och regnbågar men kan överraska dig. Hela tekniken, inklusive nyckelorden `shorter hue` och `longer hue`, finns i [CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch), och teorin bakom i [interpolering av gradienter](https://gradiently.design/sv/guide/gradient-interpolation).

Marks i Gradiently renderas live i stället för att skrivas som CSS, och var och en bär sin egen palett: auto-bläck väljer ljus eller mörk text ur den paletten för varje rad, så orden läses utan att du kontrollerar siffror. Vill du hellre utgå från en färdig levande bakgrund än ett värde i en färgväljare, bläddra i Marknaden efter färgord.

## FAQ

### Vad är OKLCH?

OKLCH är ett färgformat baserat på färgrummet OKLab. Det beskriver färger med perceptuell ljushet, kroma och nyans, så lika värden ser lika ljusa och livfulla ut.

### Är OKLCH bättre än HSL?

För att bygga paletter, skalor och gradienter, ja, eftersom ljusheten stämmer med vad ögat ser. HSL går fortfarande bra för snabba handjusteringar.

### Kan jag använda oklch() i CSS idag?

Ja. Nuvarande versioner av Chrome, Edge, Firefox och Safari stöder det. Lägg en hex-reserv först om du måste stödja mycket gamla webbläsare.

### Vad är den maximala kroman i OKLCH?

Det finns inget fast maximum. Möjlig kroma beror på ljushet, nyans och skärm, och i sRGB når de flesta nyanser väl under 0,37.

### Hur konverterar jag hex till OKLCH?

Klistra in hexkoden i en OKLCH-väljare som oklch.com, eller i färgpanelen i webbläsarens utvecklarverktyg, som kan visa samma färg i OKLCH.