# Nuance, mætning og lysstyrke (HSB) forklaret enkelt

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

Hexkoder er til maskiner. Nuance, mætning og lysstyrke er sådan, folk faktisk tænker på farve: hvilken farve, hvor stærk, hvor lys. Lær de tre drejeknapper, så giver enhver farvevælger mening.

## The short version

- Nuance, mætning og lysstyrke, eller HSB, beskriver en farve med tre tal: nuance er farvens vinkel på cirklen, mætning er dens styrke, og lysstyrke er, hvor meget lys den har.
- HSB kaldes også HSV, hvor V står for value; de to navne beskriver den samme model.
- HSL er en nær slægtning, hvor en lyshed på 50 procent giver den rene farve, og 100 procent altid giver hvid.
- Designværktøjer som Figma og Photoshop har HSB-vælgere, mens CSS understøtter hsl(), men ikke HSB.
- Hverken HSB eller HSL svarer til, hvor lyse farver ser ud for øjet, så perceptuelle modeller som OKLCH er bedre til at bygge jævne skalaer.

**Nuance, mætning og lysstyrke** (HSB, efter de engelske hue, saturation og brightness) er en måde at beskrive enhver farve med tre enkle drejeknapper. **Nuance** er, hvilken farve det er, angivet som en vinkel fra 0 til 360 grader rundt om farvecirklen. **Mætning** er, hvor intens den er, fra grå ved 0 procent til fuld farve ved 100 procent. **Lysstyrke** er, hvor meget lys den har, fra sort ved 0 procent til den lyseste version af farven ved 100 procent. Når du først ser farver på den måde, holder det op med at være gætværk at justere en palet.

## Nuance: hvilken farve

Nuance er positionen på [farvecirklen](https://gradiently.design/da/guide/color-wheel). På skærmens farvecirkler ligger rød på 0 grader, grøn på 120 og blå på 240, med gul, cyan og magenta imellem. Fordi nuance er en vinkel, bliver farveharmonier simpel regning: læg 180 grader til for en komplementærfarve, 120 for en triade.

Nuance 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 spektret af nuancer ved maksimal mætning og lysstyrke. Striben starter og slutter på rød, fordi nuance er en cirkel.

## Mætning: hvor stærk

Mætning styrer, hvor meget af nuancen der er til stede. Sænk den, og en farve drænes mod grå; hæv den, og farven bliver kraftig. De fleste raffinerede paletter ligger et godt stykke under fuld mætning. Fuldt mættede farver råber, hvilket er rigtigt til et udsalgsmærke og trættende til en hel hjemmeside. [Dæmpede farvepaletter](https://gradiently.design/da/guide/muted-color-palettes) handler mest om lavere mætning.

- Mætning 0%: #808080
- Mætning 25%: #7f609f
- Mætning 50%: #7f40bf
- Mætning 75%: #7f20df
- Mætning 100%: #7f00ff

Én violet nuance ved fast lyshed, hvor kun mætningen ændrer sig. Til venstre er ren grå, til højre fuld farve.

## Lysstyrke: hvor meget lys

I HSB er lysstyrke, hvor oplyst farven er. Ved 0 procent er alle farver sorte, uanset nuance eller mætning. Ved 100 procent får du den lyseste version, skærmen kan vise for den nuance og mætning. For at lave en bleg pastel i HSB holder du lysstyrken høj og sænker mætningen, hvilket blander hvid ind. Det er præcis idéen bag [toner, nuancer og skygger](https://gradiently.design/da/guide/tints-tones-shades).

## HSB vs. HSL: forskellen, der snyder alle

HSL ser næsten identisk ud: nuance, mætning, **lyshed**. Nuancen er den samme. Det er den tredje drejeknap, der er forskellig. I HSL er lyshed 50 procent den rene farve, 0 procent er sort, og 100 procent er altid hvid. I HSB er lysstyrke 100 procent den rene farve, når mætningen er fuld, og du når kun hvid ved også at sænke mætningen. Mætningstallene er også forskellige mellem de to, så den samme farve har forskellige værdier i hver.

| Farve | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Ren rød | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violet | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Dyb petrol | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Klar orange | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Hvid | `#ffffff` | Enhver nuance, 0%, 100% | Enhver nuance, enhver mætning, 100% |

Nuancen stemmer; mætningen og den tredje værdi gør ikke. Tjek altid, hvilken model en vælger bruger, før du kopierer tal.

### HSB (også kaldet HSV)

- Lysstyrke 100% med mætning 100% er den rene farve
- Hvid kræver lysstyrke 100% og mætning 0%
- Bruges i mange designværktøjers vælgere, blandt andet Photoshop og Figma
- Ikke tilgængelig direkte i CSS

### HSL

- Lyshed 50% er den rene farve
- Lyshed 100% er altid hvid
- Skrives direkte i CSS som `hsl()`
- Nem til at lave lysere og mørkere versioner

## Brug HSL i CSS

CSS forstår `hsl()` direkte, hvilket gør den praktisk til temaer. Hold nuancen i en variabel, så kan du flytte en hel brugeflades farve med ét tal. Der er også `hwb()` (hue, whiteness, blackness), som i ånden ligger tættere på HSB. Detaljerne står på [MDN’s side om hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), og [HSL-farver](https://gradiently.design/da/guide/hsl-colors) går videre.

```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 nuance, fire opgaver. Lysheden laver de bløde og dybe versioner; mætningen laver den dæmpede.

## Hvorfor lige lyshed ikke ser lige lys ud

HSB og HSL er geometri, ikke perception. Ren gul og ren blå ligger begge på HSL-lyshed 50 procent, men gul ser langt lysere ud: efter WCAG-formlen er dens relative luminans omkring 0,93 mod blås 0,07. Sæt hvid tekst på hver, og forskellen er tydelig. Det er derfor, en palet bygget ved at gå jævnt gennem HSL-lysheden kan se ujævn ud, og derfor skal tekstkontrast altid tjekkes, ikke antages.

- Gul, HSL 60° 100% 50%: #ffff00
- Grøn, HSL 120° 100% 50%: #00ff00
- Rød, HSL 0° 100% 50%: #ff0000
- Blå, HSL 240° 100% 50%: #0000ff

Fire farver med præcis samme HSL-lyshed. Mod hvid klarer den gule omkring 1,07:1 og den blå omkring 8,6:1.

Perceptuelle modeller løser det. [OKLCH](https://gradiently.design/da/guide/oklch-explained) beholder den venlige idé om lyshed, kroma og nuance, men dens lyshed følger det, øjet ser, så trinnene ser jævne ud. Til hurtige justeringer er HSB og HSL perfekte; til en brandskala eller en [gradient uden mudrede midter](https://gradiently.design/da/guide/gradient-interpolation) skal du bruge OKLCH.

## Hurtige måder at justere en farve med HSB

- **For høj:** sænk mætningen med 15 til 25 point, før du rører noget andet.
- **For mat:** hæv mætningen en smule, eller skub nuancen et par grader varmere.
- **Brug for en hover-tilstand:** sænk lysstyrken med omkring 10 point.
- **Brug for en baggrundstone:** behold nuancen, sænk mætningen kraftigt, og skub lysstyrken op nær 100.
- **To farver støder sammen:** flyt den ene nuance tættere på den anden, eller dæmp en af dem.

Vil du hellere starte fra et færdigt udtryk end fra tre skydere, kan du på Markedet i Gradiently søge i Marks med farveord som »dyb petrol« eller »varm fersken«.

## FAQ

### Hvad er nuance, mætning og lysstyrke?

Nuance er en farves vinkel på farvecirklen, mætning er, hvor intens den er, og lysstyrke er, hvor meget lys den har. Sammen beskriver de enhver skærmfarve.

### Er HSB det samme som HSV?

Ja. HSV står for hue, saturation, value, og value betyder det samme som brightness, altså lysstyrke.

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

I HSB er lysstyrke 100 procent ved fuld mætning den rene farve. I HSL er lyshed 50 procent den rene farve, og 100 procent er hvid.

### Kan jeg bruge HSB i CSS?

Ikke direkte. CSS understøtter `hsl()`, `hwb()` og `oklch()`, så omregn HSB-værdier til en af dem.

### Hvad er forskellen på nuance og mætning?

Nuance er, hvilken farve det er, som rød eller blå. Mætning er, hvor stærk farven er, fra grå til kraftig.