# Fargetone, metning og lysstyrke (HSB) enkelt forklart

[Canonical HTML page](https://gradiently.design/nb/guide/hue-saturation-brightness)

Hekskoder er for maskiner. Fargetone, metning og lysstyrke er slik vi tenker på farger: hvilken farge, hvor sterk og hvor lys. Lær de tre innstillingene, så gir alle fargevelgere mening.

## The short version

- Fargetone, metning og lysstyrke, eller HSB, beskriver en farge med tre tall: fargetone er vinkelen på fargesirkelen, metning er intensiteten, og lysstyrke er hvor mye lys fargen har.
- HSB kalles også HSV, der V står for «value»; begge navnene beskriver samme modell.
- HSL er en nær slektning der lyshet på 50 prosent gir den rene fargen, og 100 prosent alltid gir hvitt.
- Designverktøy som Figma og Photoshop har HSB-fargevelgere, mens CSS støtter hsl(), men ikke HSB.
- Verken HSB eller HSL samsvarer med hvor lyse fargene ser ut for øyet, så perseptuelle modeller som OKLCH er bedre når du bygger jevne skalaer.

**Fargetone, metning og lysstyrke** (HSB) er en måte å beskrive enhver farge på med tre enkle innstillinger. **Fargetone** forteller hvilken farge det er, som en vinkel fra 0 til 360 grader rundt fargesirkelen. **Metning** forteller hvor intens den er, fra grått ved 0 prosent til full farge ved 100 prosent. **Lysstyrke** er hvor mye lys den har, fra svart ved 0 prosent til den lyseste utgaven av fargen ved 100 prosent. Når du ser farger slik, slipper du å gjette når du justerer en palett.

## Fargetone: hvilken farge

Fargetone er plasseringen på [fargesirkelen](https://gradiently.design/nb/guide/color-wheel). På skjermens fargesirkler ligger rødt ved 0 grader, grønt ved 120 og blått ved 240, med gult, cyan og magenta mellom dem. Fordi fargetone er en vinkel, blir fargeharmonier enkel regning: legg til 180 grader for en komplementærfarge og 120 for en triade.

Fargetone fra 0 til 360 grader: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Hele spekteret av fargetoner ved maksimal metning og lysstyrke. Stripen begynner og slutter med rødt fordi fargetone følger en sirkel.

## Metning: hvor sterk

Metning styrer hvor mye av fargetonen som er til stede. Senk den, så nærmer fargen seg grått; øk den, så blir fargen sterkere. De fleste raffinerte paletter ligger godt under full metning. Fullt mettede farger roper, noe som passer på et salgsklistremerke, men er slitsomt på et helt nettsted. [Dempede fargepaletter](https://gradiently.design/nb/guide/muted-color-palettes) handler i stor grad om lavere metning.

- Metning 0%: #808080
- Metning 25%: #7f609f
- Metning 50%: #7f40bf
- Metning 75%: #7f20df
- Metning 100%: #7f00ff

Én fiolett fargetone ved fast lyshet, der bare metningen endres. Til venstre er fargen helt grå, til høyre er den fullt mettet.

## Lysstyrke: hvor mye lys

I HSB forteller lysstyrke hvor opplyst fargen er. Ved 0 prosent er alle farger svarte, uansett fargetone eller metning. Ved 100 prosent får du den lyseste utgaven skjermen kan vise for den fargetonen og metningen. For å lage en lys pastell i HSB holder du lysstyrken høy og senker metningen, som blander inn hvitt. Det er nettopp tanken bak [lyse, dempede og mørke fargevarianter](https://gradiently.design/nb/guide/tints-tones-shades).

## HSB og HSL: forskjellen mange snubler i

HSL ser nesten identisk ut: fargetone, metning og **lyshet**. Fargetonen er den samme. Forskjellen ligger i den tredje innstillingen. I HSL er lyshet på 50 prosent den rene fargen, 0 prosent er svart, og 100 prosent er alltid hvitt. I HSB gir lysstyrke på 100 prosent den rene fargen ved full metning, og du når bare hvitt ved også å senke metningen. Metningstallene er også forskjellige, så den samme fargen har ulike verdier i hver modell.

| Farge | Heks | HSB | HSL |
| --- | --- | --- | --- |
| Rent rødt | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Fiolett | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Dyp blågrønn | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Sterk oransje | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Hvitt | `#ffffff` | Valgfri fargetone, 0%, 100% | Valgfri fargetone og metning, 100% |

Fargetonen er lik; metningen og den tredje verdien er det ikke. Sjekk alltid hvilken modell fargevelgeren bruker før du kopierer tall.

### HSB (også kalt HSV)

- Lysstyrke 100% med metning 100% gir den rene fargen
- Hvitt krever lysstyrke 100% og metning 0%
- Brukes i fargevelgere i mange designverktøy, blant annet Photoshop og Figma
- Kan ikke brukes direkte i CSS

### HSL

- Lyshet 50% gir den rene fargen
- Lyshet 100% er alltid hvitt
- Skrives direkte i CSS som `hsl()`
- Gjør det enkelt å lage lysere og mørkere varianter

## Bruk HSL i CSS

CSS forstår `hsl()` direkte, som gjør det praktisk for temaer. Behold fargetonen i en variabel, så kan du endre fargen i et helt grensesnitt med ett tall. Det finnes også `hwb()` (fargetone, hvithet og svarthet), som ligger nærmere HSB i tankegangen. Du finner detaljer på [MDNs side om hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), og [HSL-farger](https://gradiently.design/nb/guide/hsl-colors) går mer i dybden.

```css
:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */
```

Én fargetone, fire oppgaver. Lyshet gir myke og dype varianter; metning gir den dempede.

## Hvorfor lik lyshet ikke ser lik ut

HSB og HSL handler om geometri, ikke persepsjon. Rent gult og rent blått har begge HSL-lyshet på 50 prosent, men gult ser mye lysere ut: etter WCAG-formelen er den relative luminansen omtrent 0,93 mot blått sitt 0,07. Legg hvit tekst på begge, så blir forskjellen tydelig. Derfor kan en palett bygd med jevne trinn i HSL-lyshet se ujevn ut, og derfor må tekstkontrast alltid sjekkes, aldri tas for gitt.

- Gult, HSL 60° 100% 50%: #ffff00
- Grønt, HSL 120° 100% 50%: #00ff00
- Rødt, HSL 0° 100% 50%: #ff0000
- Blått, HSL 240° 100% 50%: #0000ff

Fire farger med nøyaktig samme HSL-lyshet. Mot hvitt får gult omtrent 1,07:1 i kontrast, og blått omtrent 8,6:1.

Perseptuelle modeller løser dette. [OKLCH](https://gradiently.design/nb/guide/oklch-explained) beholder den intuitive tanken om lyshet, kroma og fargetone, men lysheten følger det øyet ser, slik at trinnene ser jevne ut. HSB og HSL er perfekte for raske justeringer; velg OKLCH til en merkevareskala eller en [gradient uten grumsete midtpartier](https://gradiently.design/nb/guide/gradient-interpolation).

## Raske måter å justere en farge med HSB

- **For sterk:** senk metningen med 15 til 25 poeng før du endrer noe annet.
- **For blass:** øk metningen litt, eller flytt fargetonen noen grader i varmere retning.
- **Trenger en tilstand ved musepeker:** senk lysstyrken med omtrent 10 poeng.
- **Trenger en lys bakgrunnsfarge:** behold fargetonen, senk metningen kraftig og øk lysstyrken til nær 100.
- **To farger krasjer:** flytt den ene fargetonen nærmere den andre, eller demp en av dem.

Hvis du heller vil begynne med et ferdig uttrykk enn med tre skyveknapper, lar Markedet i Gradiently deg søke etter Marker med fargeord som «deep teal» eller «warm peach».

## FAQ

### Hva er fargetone, metning og lysstyrke?

Fargetone er en farges vinkel på fargesirkelen, metning er hvor intens den er, og lysstyrke er hvor mye lys den har. Sammen beskriver de enhver skjermfarge.

### Er HSB det samme som HSV?

Ja. HSV står for hue, saturation, value, og «value» betyr det samme som lysstyrke.

### Hva er forskjellen på HSB og HSL?

I HSB gir lysstyrke på 100 prosent ved full metning den rene fargen. I HSL gir lyshet på 50 prosent den rene fargen, og 100 prosent gir hvitt.

### Kan jeg bruke HSB i CSS?

Ikke direkte. CSS støtter `hsl()`, `hwb()` og `oklch()`, så konverter HSB-verdier til en av dem.

### Hva er forskjellen på fargetone og metning?

Fargetone forteller hvilken farge det er, for eksempel rødt eller blått. Metning forteller hvor sterk fargen er, fra grå til intens.