# HSL-färg: det vänligaste sättet att skriva färger i CSS

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

Hex talar om för webbläsaren vad den ska måla. HSL talar om vad färgen är: vilken nyans, hur stark, hur ljus. Det gör det till det enklaste formatet att redigera för hand.

## The short version

- En HSL-färg beskriver en färg med nyans, mättnad och ljushet i stället för mängder av rött, grönt och blått.
- Nyans är en vinkel på färghjulet från 0 till 360 grader, där 0 är rött, 120 är grönt och 240 är blått.
- Mättnad går från 0 % (grått) till 100 % (full färg), och ljushet går från 0 % (svart) via 50 % (den rena nyansen) till 100 % (vitt).
- Modern CSS skriver den som hsl(262 83% 58%), med en valfri alfa efter ett snedstreck, och alla webbläsare i bruk stöder det.
- HSL-ljushet är inte hur ljus en färg ser ut för människor, så två färger med samma ljushet kan skilja sig enormt i kontrast.

En **HSL-färg** skrivs som tre tal: nyans, mättnad och ljushet. I CSS betyder `hsl(262 83% 58%)` en nyans på 262 grader (violett), 83 % mättnad (stark) och 58 % ljushet (lite över mittpunkten). Det är samma violett som `#7c3bed`, men du kan läsa den. Vill du ha den ljusare? Höj sista talet. Mjukare? Sänk det i mitten. Den enda egenskapen, en betydelse per tal, är varför HSL är det vänligaste sättet att skriva färger för hand.

## Vad nyans, mättnad och ljushet betyder

**Nyans** är en position på [färghjulet](https://gradiently.design/sv/guide/color-wheel), angiven i grader. Rött ligger på 0 och igen på 360, gult på 60, grönt på 120, cyan på 180, blått på 240 och magenta på 300. Att flytta nyansen roterar färgen men behåller dess styrka.

Nyans från 0 till 360 grader: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)`

Varje nyans med 100 % mättnad och 50 % ljushet. Läs från vänster till höger: 0, 60, 120, 180, 240, 300 och tillbaka till 360.

**Mättnad** är hur mycket färg det finns. Vid 0 % är varje nyans samma grå. Vid 100 % är den så stark som skärmen tillåter. **Ljushet** går från svart vid 0 % till vitt vid 100 %, med den rena nyansen vid 50 %. Modellen beskrivs bredare i [nyans, mättnad och ljusstyrka](https://gradiently.design/sv/guide/hue-saturation-brightness), som också förklarar hur HSB i designappar skiljer sig från HSL i CSS.

| Värde | Intervall | Vad en ändring gör |
| --- | --- | --- |
| Nyans | 0 till 360 (grader) | Roterar färgen: violett till blått till teal |
| Mättnad | 0 % till 100 % | Från grått till full färg |
| Ljushet | 0 % till 100 % | Från svart, via den rena nyansen vid 50 %, till vitt |
| Alfa (valfritt) | 0 till 1, eller 0 % till 100 % | Från osynlig till ogenomskinlig |

Fyra tal, vart och ett med ett jobb. Den uppdelningen är hela tjusningen.

## HSL-syntax i CSS

Det finns två skrivsätt. Det moderna skiljer värden med mellanslag och sätter alfa efter ett snedstreck. Det äldre använder kommatecken och en separat funktion `hsla()`. Webbläsare accepterar båda, och `hsl()` tar numera alfa också, så `hsla()` behövs inte längre. [MDN:s referens för hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) listar varje form.

```css
.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}
```

Alla fyra är samma violett. Den andra och tredje lägger till 80 % opacitet.

## Bygg en färgskala genom att ändra ljushet

Här förtjänar HSL sin plats. Håll nyans och mättnad fasta, stega ljusheten, och du får en familj av [toner och skuggor](https://gradiently.design/sv/guide/tints-tones-shades) som uppenbart hör ihop. Här är en violett i sju steg, med den hex var och en konverteras till.

- L 95% #efe8fd: #efe8fd
- L 85% #d0b9f8: #d0b9f8
- L 70% #a273f2: #a273f2
- L 58% #7c3bed: #7c3bed
- L 45% #5914d2: #5914d2
- L 30% #3c0d8c: #3c0d8c
- L 15% #1e0746: #1e0746

hsl(262 83% L) vid sju ljushetsvärden. Ljusa steg för bakgrunder, mitten för knappar, mörka steg för text.

Kombinera det med CSS-variabler så hänger hela ditt tema på två tal. Spara nyans och mättnad en gång och välj sedan en ljushet per roll. Ändra nyansvariabeln och hela gränssnittet går från violett till teal, vilket är tanken bakom [CSS-variabler för teman](https://gradiently.design/sv/guide/css-custom-properties-theming).

```css
:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}
```

Varje varumärkesfärg härleds från samma nyans, så skalan kan aldrig glida ur familjen.

### Relativa färger

Nyare webbläsare stöder också syntax för relativa färger, som läser HSL-delarna i vilken färg som helst och låter dig justera dem. `hsl(from var(--brand) h s calc(l + 15%))` ger en ljusare version av vad varumärkesfärgen än är, även om den definierats i hex. Kontrollera aktuellt stöd på caniuse innan du förlitar dig på det, och behåll en enkel reservlösning. För att blanda två färger snarare än att putta på en är [color-mix() i CSS](https://gradiently.design/sv/guide/css-color-mix) verktyget.

## Där HSL ljuger för dig

HSL är en omordning av RGB, inte en modell av mänskligt seende. Dess ljushet är ett enkelt medelvärde av den ljusaste och den svagaste kanalen, så den bortser från att våra ögon ser gult och grönt som långt ljusare än blått. Resultatet: två färger med identisk HSL-ljushet kan se helt olika ljusa ut.

- hsl(60 100% 50%): #ffff00
- hsl(120 100% 50%): #00ff00
- hsl(0 100% 50%): #ff0000
- hsl(240 100% 50%): #0000ff

Alla fyra har 50 % ljushet. Mot vitt har det gula ett kontrastförhållande på ungefär 1,07:1 och det blå ungefär 8,6:1.

Det här spelar roll på två ställen. För det första blir en skala byggd genom att stega HSL-ljushet ojämn mellan nyanser: ett gult vid 50 % är långt för ljust för text medan ett blått vid 50 % klarar det lätt. Testa alltid riktiga par med en [kontrastkontroll](https://gradiently.design/sv/guide/color-contrast-accessibility). För det andra blir gradienter och genererade paletter som roterar nyans vid fast ljushet ljusare och mörkare när de passerar gult och blått.

### HSL är bra för

- Att läsa och redigera färger för hand
- Toner och skuggor av en enda nyans
- Snabbt temabyte med variabler
- Att dämpa mättnaden i en färg för ett nedtonat läge

### Använd OKLCH i stället för

- Skalor som matchar över olika nyanser
- Förutsägbar kontrast utifrån ett ljushetsvärde
- Gradienter som håller jämn ljusstyrka
- Genererade paletter för designsystem

[OKLCH](https://gradiently.design/sv/guide/oklch-explained) behåller samma vänliga idé (ljushet, färgstyrka, nyans) men mäter ljushet så som ögon gör. Om du startar ett nytt designsystem är det det bättre valet. Om du redigerar befintlig CSS eller vill ha en snabb, läsbar justering är HSL fortfarande helt bra.

## Att konvertera HSL till hex och tillbaka

Du behöver sällan räkna själv, eftersom varje designverktyg och webbläsares utvecklarpanel konverterar åt dig: klicka på en färgruta i Chromes eller Firefoxs utvecklarverktyg och växla mellan formaten. Under huven konverteras HSL först till RGB, och RGB till hex är enkel parräkning, förklarad i [hex till RGB](https://gradiently.design/sv/guide/hex-to-rgb). Räkna med små avrundningsskillnader: `hsl(262 83% 58%)` landar på `#7c3bed`, ett steg från den `#7c3aed` du kanske började med, eftersom hela procent inte kan träffa vart och ett av de 16,7 miljoner hexvärdena.

Om du designar i Gradiently rör du sällan de här talen alls: en Mark bär sin egen palett, och i Pro lagrar varumärkeskitet dina färger så att Designern tillämpar dem åt dig.

## FAQ

### Vad står HSL för?

Hue, saturation och lightness, alltså nyans, mättnad och ljushet. Nyans är vinkeln på färghjulet, mättnad är hur stark färgen är och ljushet är hur nära svart eller vitt den ligger.

### Hur skriver jag en HSL-färg i CSS?

Använd hsl(nyans mättnad% ljushet%), till exempel hsl(262 83% 58%). Lägg till genomskinlighet efter ett snedstreck: `hsl(262 83% 58% / 0.5)`.

### Behövs hsla() fortfarande?

Nej. hsl() accepterar ett alfavärde i varje aktuell webbläsare, så hsla() finns bara kvar för äldre kod.

### Vad är skillnaden mellan HSL och RGB?

RGB anger hur mycket rött, grönt och blått ljus som ska blandas. HSL anger vilken nyans, hur stark och hur ljus. De beskriver samma färger, men HSL är lättare att justera för hand.

### Varför ser två HSL-färger med samma ljushet olika ut?

HSL-ljushet bortser från hur känsliga ögonen är för varje nyans, så gult ser långt ljusare ut än blått vid samma värde. OKLCH löser det med perceptuell ljushet.