# HSL-farver: den venligste måde at skrive farver i CSS

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

Hex fortæller browseren, hvad den skal male. HSL fortæller dig, hvad farven er: hvilken nuance, hvor kraftig, hvor lys. Det gør det til det nemmeste format at redigere i hånden.

## The short version

- En HSL-farve beskriver en farve ud fra nuance, mætning og lyshed i stedet for mængder af rød, grøn og blå.
- Nuance er en vinkel på farvecirklen fra 0 til 360 grader, hvor 0 er rød, 120 er grøn og 240 er blå.
- Mætning går fra 0% (grå) til 100% (fuld farve), og lyshed går fra 0% (sort) gennem 50% (den rene nuance) til 100% (hvid).
- Moderne CSS skriver det som hsl(262 83% 58%), med en valgfri alfa efter en skråstreg, og alle browsere i brug understøtter det.
- HSL-lyshed er ikke, hvor lys en farve ser ud for mennesker, så to farver med samme lyshed kan have meget forskellig kontrast.

En **HSL-farve** skrives som tre tal: nuance, mætning og lyshed. I CSS betyder `hsl(262 83% 58%)` en nuance på 262 grader (violet), 83% mætning (kraftig) og 58% lyshed (lidt over midten). Det er den samme violet som `#7c3bed`, men du kan læse den. Vil du have den lysere? Hæv det sidste tal. Blødere? Sænk det midterste. Den ene egenskab, én betydning pr. tal, er grunden til, at HSL er den venligste måde at skrive farver i hånden.

## Hvad nuance, mætning og lyshed betyder

**Nuance** er en position på [farvecirklen](https://gradiently.design/da/guide/color-wheel), angivet i grader. Rød ligger på 0 og igen på 360, gul på 60, grøn på 120, cyan på 180, blå på 240 og magenta på 300. Når du flytter nuancen, roterer farven, mens dens styrke bevares.

Nuance fra 0 til 360 grader: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)`

Alle nuancer ved 100% mætning og 50% lyshed. Læs fra venstre mod højre: 0, 60, 120, 180, 240, 300 og tilbage til 360.

**Mætning** er, hvor meget farve der er. Ved 0% er alle nuancer den samme grå; ved 100% er den så kraftig, som skærmen tillader. **Lyshed** går fra sort ved 0% til hvid ved 100%, med den rene nuance ved 50%. Modellen gennemgås bredere i [nuance, mætning og lysstyrke](https://gradiently.design/da/guide/hue-saturation-brightness), som også forklarer, hvordan HSB i designprogrammer adskiller sig fra HSL i CSS.

| Værdi | Interval | Hvad en ændring gør |
| --- | --- | --- |
| Nuance | 0 til 360 (grader) | Roterer farven: violet til blå til petrol |
| Mætning | 0% til 100% | Fra grå til fuld farve |
| Lyshed | 0% til 100% | Fra sort, gennem den rene nuance ved 50%, til hvid |
| Alfa (valgfri) | 0 til 1 eller 0% til 100% | Fra usynlig til uigennemsigtig |

Fire tal, hver med én opgave. Den adskillelse er hele charmen.

## HSL-syntaks i CSS

Der er to stavemåder. Den moderne adskiller værdierne med mellemrum og sætter alfa efter en skråstreg. Den ældre bruger kommaer og en separat `hsla()`-funktion. Browsere accepterer begge, og `hsl()` tager nu også alfa, så `hsla()` er ikke længere nødvendig. [MDN’s reference til hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) viser alle former.

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

Alle fire er den samme violet. Den anden og tredje tilføjer 80% dækkevne.

## Byg en farveskala ved at ændre lysheden

Det er her, HSL gør sig fortjent til sin plads. Hold nuance og mætning fast, gå trinvis gennem lysheden, og du har en familie af [toner og skygger](https://gradiently.design/da/guide/tints-tones-shades), der tydeligvis hører sammen. Her er én violet i syv trin med den hex, hver af dem omregnes til.

- 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) ved syv lyshedsværdier. Lyse trin til baggrunde, midten til knapper, mørke trin til tekst.

Kombinér det med CSS custom properties, så hænger hele dit tema på to tal. Gem nuance og mætning én gang, og vælg så en lyshed pr. rolle. Skift nuancevariablen, og hele brugerfladen går fra violet til petrol, hvilket er idéen bag [CSS-variabler til temaer](https://gradiently.design/da/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;
}
```

Alle brandfarver udspringer af den samme nuance, så skalaen aldrig kan glide ud af familien.

### Relative farver

Nyere browsere understøtter også relativ farvesyntaks, som læser HSL-delene af en hvilken som helst farve og lader dig justere dem. `hsl(from var(--brand) h s calc(l + 15%))` giver en lysere version af brandfarven, uanset hvad den er, selv hvis den blev defineret i hex. Tjek den aktuelle understøttelse på caniuse, før du stoler på det, og behold en enkel reserveløsning. Til at blande to farver i stedet for at justere én er [color-mix() i CSS](https://gradiently.design/da/guide/css-color-mix) værktøjet.

## Hvor HSL snyder dig

HSL er en omarrangering af RGB, ikke en model af menneskets syn. Dens lyshed er et simpelt gennemsnit af den lyseste og den svageste kanal, så den ignorerer, at vores øjne ser gul og grøn som langt lysere end blå. Resultatet: to farver med identisk HSL-lyshed kan se helt forskellige ud i lysstyrke.

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

Alle fire har 50% lyshed. Mod hvid har den gule et kontrastforhold på omkring 1,07:1 og den blå omkring 8,6:1.

Det betyder noget to steder. For det første bliver en skala bygget ved at gå trinvis gennem HSL-lysheden ujævn på tværs af nuancer: en gul ved 50% er alt for lys til tekst, mens en blå ved 50% let består. Test altid rigtige par med en [kontrasttjekker](https://gradiently.design/da/guide/color-contrast-accessibility). For det andet bliver gradienter og genererede paletter, der roterer nuancen ved fast lyshed, lysere og mørkere, når de passerer gul og blå.

### HSL er god til

- At læse og redigere farver i hånden
- Toner og skygger af én nuance
- Hurtige temaskift med variabler
- At afmætte en farve til en dæmpet tilstand

### Brug hellere OKLCH til

- Skalaer, der matcher på tværs af nuancer
- Forudsigelig kontrast ud fra en lyshedsværdi
- Gradienter med jævn lysstyrke
- Genererede paletter til designsystemer

[OKLCH](https://gradiently.design/da/guide/oklch-explained) beholder den samme venlige idé (lyshed, farvestyrke, nuance), men måler lyshed, som øjnene gør. Starter du et nyt designsystem, er den det bedre standardvalg; redigerer du eksisterende CSS eller vil lave en hurtig, læselig justering, er HSL stadig helt fin.

## Omregning fra HSL til hex og tilbage

Du behøver sjældent at regne selv, for alle designværktøjer og browserens udviklerværktøjer omregner for dig: klik på en farveprøve i udviklerværktøjerne i Chrome eller Firefox, og skift mellem formaterne. Bag kulisserne omregnes HSL først til RGB, og RGB til hex er simpel regning med par, forklaret i [hex til RGB](https://gradiently.design/da/guide/hex-to-rgb). Regn med bittesmå afrundingsforskelle: `hsl(262 83% 58%)` lander på `#7c3bed`, ét trin fra den `#7c3aed`, du måske startede med, fordi hele procenter ikke kan ramme hver eneste af de 16,7 millioner hexværdier.

Designer du i Gradiently, rører du sjældent disse tal: en Mark har sin egen palet, og med Pro gemmer brandkittet dine farver, så Designer anvender dem for dig.

## FAQ

### Hvad står HSL for?

Hue, saturation og lightness: nuance, mætning og lyshed. Nuance er vinklen på farvecirklen, mætning er, hvor kraftig farven er, og lyshed er, hvor tæt den er på sort eller hvid.

### Hvordan skriver jeg en HSL-farve i CSS?

Brug hsl(nuance mætning% lyshed%), for eksempel hsl(262 83% 58%). Tilføj gennemsigtighed efter en skråstreg: `hsl(262 83% 58% / 0.5)`.

### Er hsla() stadig nødvendig?

Nej. hsl() accepterer en alfaværdi i alle aktuelle browsere, så hsla() findes kun af hensyn til ældre kode.

### Hvad er forskellen på HSL og RGB?

RGB siger, hvor meget rødt, grønt og blåt lys der skal blandes; HSL siger, hvilken nuance, hvor kraftig og hvor lys. De beskriver de samme farver, men HSL er nemmere at justere i hånden.

### Hvorfor ser to HSL-farver med samme lyshed forskellige ud?

HSL-lyshed ignorerer, hvor følsomme øjnene er over for hver nuance, så gul ser langt lysere ud end blå ved samme værdi. OKLCH løser det med perceptuel lyshed.