# HSL-farge: den enkleste måten å skrive farger i CSS på

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

Heks forteller nettleseren hva den skal male. HSL forteller deg hva fargen er: hvilken fargetone, hvor sterk og hvor lys. Det gjør formatet lettest å redigere for hånd.

## The short version

- En HSL-farge beskriver en farge med fargetone, metning og lyshet fremfor mengder rødt, grønt og blått.
- Fargetone er en vinkel på fargesirkelen fra 0 til 360 grader, der 0 er rødt, 120 grønt og 240 blått.
- Metning går fra 0% (grått) til 100% (full farge), og lyshet fra 0% (svart) via 50% (ren fargetone) til 100% (hvitt).
- Moderne CSS skriver det som hsl(262 83% 58%), med valgfri alfa etter en skråstrek, og alle nettlesere i bruk støtter det.
- HSL-lyshet er ikke det samme som hvor lys fargen virker for mennesker, så to farger med samme lyshet kan ha svært ulik kontrast.

En **HSL-farge** skrives med tre tall: fargetone, metning og lyshet. I CSS betyr `hsl(262 83% 58%)` en fargetone på 262 grader (fiolett), 83% metning (sterk) og 58% lyshet (litt over midtpunktet). Det er samme fiolett som `#7c3bed`, men du kan lese den. Vil du ha den lysere, øker du siste tall. Mykere, senker du det midterste. Denne egenskapen, én betydning per tall, gjør HSL til den enkleste måten å skrive farger for hånd på.

## Hva fargetone, metning og lyshet betyr

**Fargetone** er en posisjon på [fargesirkelen](https://gradiently.design/nb/guide/color-wheel), angitt i grader. Rødt ligger ved 0 og igjen ved 360, gult ved 60, grønt ved 120, cyan ved 180, blått ved 240 og magenta ved 300. Å flytte fargetonen roterer fargen mens styrken holdes lik.

Fargetone 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 fargetoner ved 100% metning og 50% lyshet. Les fra venstre til høyre: 0, 60, 120, 180, 240, 300 og tilbake til 360.

**Metning** er hvor mye farge det er. Ved 0% er alle fargetoner samme grå, og ved 100% er de så sterke som skjermen tillater. **Lyshet** går fra svart ved 0% til hvitt ved 100%, med ren fargetone ved 50%. Modellen dekkes bredere i [fargetone, metning og lysstyrke](https://gradiently.design/nb/guide/hue-saturation-brightness), som også forklarer forskjellen mellom HSB i designapper og HSL i CSS.

| Verdi | Område | Dette skjer ved endring |
| --- | --- | --- |
| Fargetone | 0 til 360 (grader) | Roterer fargen: fiolett til blått til blågrønt |
| Metning | 0% til 100% | Fra grått til full farge |
| Lyshet | 0% til 100% | Fra svart via ren fargetone ved 50% til hvitt |
| Alfa (valgfri) | 0 til 1, eller 0% til 100% | Fra usynlig til ugjennomsiktig |

Fire tall med én jobb hver. Dette skillet er hele poenget.

## HSL-syntaks i CSS

Det finnes to skrivemåter. Den moderne skiller verdiene med mellomrom og setter alfa etter en skråstrek. Den eldre bruker kommaer og en egen `hsla()`-funksjon. Nettlesere godtar begge, og `hsl()` tar nå også alfa, så `hsla()` er ikke lenger nødvendig. [MDNs referanse for hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) viser alle formene.

```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 samme fiolett. Den andre og tredje legger til 80% ugjennomsiktighet.

## Bygg en fargeskala ved å endre lysheten

Her viser HSL sin nytte. Hold fargetone og metning fast, endre lysheten trinnvis, og du får en familie av [lyse og mørke nyanser](https://gradiently.design/nb/guide/tints-tones-shades) som tydelig hører sammen. Her er én fiolett i sju trinn, med hekskoden hver konverteres 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 sju lyshetsverdier. Lyse trinn til bakgrunner, midten til knapper og mørke trinn til tekst.

Kombiner dette med egendefinerte CSS-egenskaper, så bygger hele temaet på to tall. Lagre fargetone og metning én gang, og velg lyshet per rolle. Endre fargetonevariabelen, så går hele grensesnittet fra fiolett til blågrønt. Det er tanken bak [CSS-variabler til temaer](https://gradiently.design/nb/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 merkevarefarger bygger på samme fargetone, så skalaen kan aldri drive ut av familien.

### Relative farger

Nyere nettlesere støtter også relativ fargesyntaks, som leser HSL-delene av en hvilken som helst farge og lar deg justere dem. `hsl(from var(--brand) h s calc(l + 15%))` gir en lysere versjon av merkevarefargen, selv om den ble definert med heks. Kontroller gjeldende støtte på caniuse før du baserer deg på det, og behold en enkel reserveløsning. For å blande to farger fremfor å justere én, er [color-mix() i CSS](https://gradiently.design/nb/guide/css-color-mix) verktøyet.

## Der HSL villeder deg

HSL er en omorganisering av RGB, ikke en modell av menneskets syn. Lysheten er et enkelt gjennomsnitt av den sterkeste og svakeste kanalen. Den tar derfor ikke hensyn til at øynene ser gult og grønt som langt lysere enn blått. Resultatet er at to farger med identisk HSL-lyshet kan virke helt forskjellige 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% lyshet. Mot hvitt har gult et kontrastforhold på omtrent 1,07:1 og blått omtrent 8,6:1.

Dette betyr noe på to områder. Først blir en skala med trinnvis HSL-lyshet ujevn mellom fargetoner. Gult ved 50% er altfor lyst til tekst, mens blått ved 50% består lett. Test alltid ekte par med en [kontrastkontroll](https://gradiently.design/nb/guide/color-contrast-accessibility). Deretter vil gradienter og genererte paletter som roterer fargetonen ved fast lyshet, lysne og mørkne når de går gjennom gult og blått.

### HSL passer godt til

- Å lese og redigere farger for hånd
- Lyse og mørke nyanser av én fargetone
- Raskt temabytte med variabler
- Å senke metningen for en dempet tilstand

### Bruk heller OKLCH til

- Skalaer som samsvarer på tvers av fargetoner
- Forutsigbar kontrast fra en lyshetsverdi
- Gradienter som holder jevn lysstyrke
- Genererte paletter til designsystemer

[OKLCH](https://gradiently.design/nb/guide/oklch-explained) beholder samme lettfattelige idé, lyshet, fargestyrke og fargetone, men måler lyshet slik øynene gjør. Starter du et nytt designsystem, er det et bedre standardvalg. Redigerer du eksisterende CSS eller vil ha en rask, lesbar justering, er HSL fortsatt helt fint.

## Konverter HSL til heks og tilbake

Du trenger sjelden å regne selv, siden alle designverktøy og utviklerpaneler konverterer for deg. Klikk en fargeprøve i utviklerverktøyene i Chrome eller Firefox og bytt mellom formatene. Under panseret konverteres HSL først til RGB. RGB til heks er enkel regning med par, forklart i [heks til RGB](https://gradiently.design/nb/guide/hex-to-rgb). Forvent små avrundingsforskjeller: `hsl(262 83% 58%)` blir `#7c3bed`, ett trinn unna `#7c3aed` du kanskje startet med. Hele prosentverdier kan nemlig ikke treffe alle de 16,7 millioner heksverdiene.

Designer du i Gradiently, berører du sjelden disse tallene. En Mark har sin egen palett, og med Pro lagrer merkevaresettet fargene dine så Designer bruker dem for deg.

## FAQ

### Hva står HSL for?

Hue, saturation og lightness: fargetone, metning og lyshet. Fargetone er vinkelen på fargesirkelen, metning er hvor sterk fargen er, og lyshet er hvor nær den ligger svart eller hvitt.

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

Bruk hsl(hue saturation% lightness%), for eksempel hsl(262 83% 58%). Legg til gjennomsiktighet etter en skråstrek: `hsl(262 83% 58% / 0.5)`.

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

Nei. hsl() godtar en alfaverdi i alle nåværende nettlesere, så hsla() beholdes bare til eldre kode.

### Hva er forskjellen mellom HSL og RGB?

RGB sier hvor mye rødt, grønt og blått lys som skal blandes. HSL sier hvilken fargetone, hvor sterk og hvor lys. De beskriver samme farger, men HSL er enklere å justere for hånd.

### Hvorfor ser to HSL-farger med samme lyshet ulike ut?

HSL-lyshet ser bort fra hvor følsomme øynene er for hver fargetone, så gult virker mye lysere enn blått ved samme verdi. OKLCH løser dette med perseptuell lyshet.