# Mætning i design: hvornår du skruer farven op eller ned

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

Mætning er drejeknappen mellem kraftig og grå, og den ændrer, hvor højlydt, billigt, roligt eller dyrt et design føles. Her er, hvornår du skruer op, hvornår du skruer ned, og koderne til begge dele.

## The short version

- Mætning i design er en farves intensitet, fra fuldt kraftig til helt grå, uafhængigt af nuancen.
- Høj mætning trækker opmærksomhed og føles energisk, så den virker bedst i små områder som knapper, accenter og fremhævninger.
- Lavere mætning føles roligere og ofte mere eksklusiv, og den passer til store flader som baggrunde og lange læsefalder.
- To meget mættede komplementære farver side om side kan se ud til at vibrere, hvilket gør tekst på dem trættende at læse.
- Mættede farver skal som regel dæmpes i mørk tilstand og kan ofte ikke matches præcist i CMYK-tryk.

**Mætning i design** er, hvor intens en farve er: fuldt mættet er kraftig og ren, fuldt afmættet er grå. Skru op, hvor du vil have opmærksomhed og energi, på en knap, en udsalgspris eller en enkelt fremhævning. Skru ned til store flader, lang læsning, eksklusive brands og mørke grænseflader, hvor kraftig farve hurtigt bliver trættende. De fleste gode paletter blander de to med vilje: en rolig base med lavere mætning og en eller to mættede toner.

## Hvad mætning er, og hvad den ikke er

Enhver farve kan beskrives ved tre egenskaber: nuance (hvilken farve den er), lyshed (hvor tæt på hvid eller sort) og mætning (hvor ren eller gråtonet den er). Ændr kun mætningen, og en kirsebærrød glider mod støvet rosa, så til grå, uden at blive lysere eller mørkere. [Nuance, mætning og lysstyrke](https://gradiently.design/da/guide/hue-saturation-brightness) forklarer, hvordan de tre hænger sammen.

- Rød, mætning 85 % til 0 %: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Blå, mætning 85 % til 0 %: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Grøn, mætning 70 % til 0 %: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Tre nuancer med fastholdt lyshed, mens mætningen falder. Midten af hver strimmel er der, hvor mange sofistikerede brandfarver lever.

I HSL er mætning det andet tal. I det nyere farverum oklch er det tilsvarende chroma, og det opfører sig mere jævnt på tværs af nuancer, så en gul og en blå med samme chroma ser lige intense ud. [HSL-farver](https://gradiently.design/da/guide/hsl-colors) dækker den ældre model og hvordan du læser dens tal.

## Hvornår du skruer mætningen op

- **Den ene ting, der skal trykkes på.** En mættet knap på en rolig side behøver ingen pil, der peger på den. Det er opgaven for en [accentfarve](https://gradiently.design/da/guide/accent-color).
- **Korte, højlydte øjeblikke.** Udsalgsannonceringer, lanceringsopslag og nedtællinger til events er beregnet til at afbryde et scroll.
- **Unge, legende eller sportslige brands.** Børneprodukter, energidrikke og festivaler bærer ofte høj mætning som en del af deres personlighed.
- **Data, der skal skille sig ud.** I et diagram mætter du den serie, der betyder noget, og gør resten grå.
- **Små områder på mørk baggrund.** En kraftig farve i et lille område på næsten sort læses som lys, og derfor virker neon om natten.

## Hvornår du skruer mætningen ned

- **Store flader.** En hel skærm af ren mættet farve er trættende. Baggrunde virker som regel bedre en anelse gråtonede.
- **Eksklusiv positionering.** Dæmpede, komplekse farver som oliven, okseblod og skifer læses ofte som mere gennemtænkte og dyre end primærfarver.
- **Lang læsning.** Artikler, dokumenter og dashboards har brug for en rolig overflade, folk kan se på i en time.
- **Mørk tilstand.** Mættede farver gløder og smører ud på mørke baggrunde. Sænk mætningen, og hæv lysheden lidt; [design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design) har detaljerne.
- **Bag fotografier og tekst.** En roligere baggrund lader fotoet og ordene føre.

Et udsalgsopslag i højformat med teksten Weekendudsalg, kun i 48 timer

Et kort, højlydt øjeblik som et weekendudsalg er der, hvor høj mætning gør sig fortjent. Opslag i højformat i 1080×1350.

Et journalopslag i højformat med titlen Noter fra værkstedet

Noget, folk skal dvæle ved, som et journalopslag, er der, hvor roligere farver med lavere mætning hører hjemme.

## Vibrationsproblemet

Sæt to meget mættede komplementære farver side om side, som rød på grøn eller blå på orange, og kanten imellem dem ser ud til at flimre. Det er en optisk effekt, og den gør tekst på de par direkte ubehagelig at læse, selv når kontrastforholdet ser acceptabelt ud. Løsningen er at afmætte den ene i parret eller adskille dem med en neutral.

### Vibrerer

- Ren rød tekst på ren grøn
- Mættet blå på mættet orange
- Magenta ved siden af lime i fuld styrke
- Kraftige farver side om side over en hel plakat

### Læses roligt

- Dyb rød tekst på dæmpet salvie
- Marineblå på en blød abrikos
- Magentaaccent på en gråtonet limebaggrund
- Én kraftig farve på en base med lavere mætning

## Sådan justerer du mætning i CSS

Hex-koder skjuler mætning, og derfor er det langsomt at justere den efter øjemål i hex. Arbejd i stedet i HSL eller oklch, eller bland en farve med grå med `color-mix()`.

```css
:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}
```

Tre måder at sænke mætningen på, mens nuancen bevares: HSL-mætning, oklch-chroma og blanding med grå.

En nyttig vane er at definere hver brandfarve i to mætninger fra starten: en fuld version til accenter og en dæmpet version til store flader. Så behøver ingen at improvisere en blødere nuance senere.

Fotografier følger den samme logik. Et travlt, mættet foto bag en overskrift konkurrerer med den; træk fotoets mætning ned med omkring en tredjedel, og ordene tager føringen uden en boks eller skygge bag sig. Den anden vej rundt er et enkelt mættet objekt i et ellers dæmpet foto, en rød frakke i en grå gade, en af de ældste måder at styre øjet på.

## Mætning i tryk

Skærme kan vise mere mættet farve, end CMYK-blæk kan trykke, især klare blå, grønne, orange og lilla nuancer. En kraftig skærmfarve trykkes ofte mærkbart mattere. Hvis mætning er central for dit brand, så overvej en Pantone-specialfarve til tryk, og tjek et prøvetryk før et stort oplag. [RGB vs CMYK](https://gradiently.design/da/guide/rgb-vs-cmyk) forklarer forskellen.

- Fuld rød: #e8173a
- Dæmpet rød: #b8505f
- Fuld blå: #1c7ae0
- Dæmpet blå: #4f6f93
- Fuld grøn: #14a85a
- Dæmpet grøn: #5b8a6f

Hver brandfarve i to mætninger. De fulde versioner er til små, højlydte øjeblikke; de dæmpede bærer store flader og overlever tryk bedre.

Mætning virker også sammen med [farvetemperatur](https://gradiently.design/da/guide/color-temperature): en varm dæmpet palet føles vintage, en kølig dæmpet føles skandinavisk. For færdige sæt i hver ende af drejeknappen, se [dæmpede farvepaletter](https://gradiently.design/da/guide/muted-color-palettes) og [klare farvepaletter](https://gradiently.design/da/guide/bright-color-palettes).

Marks fra Gradiently anvender det samme princip på en levende baggrund: det roligste, mest kontrastrige område flytter sig bag teksten, og travle detaljer dæmpes der, så ordene sidder på et roligere stykke, mens resten af Marken beholder sin farve.

## FAQ

### Hvad er mætning i design?

Intensiteten eller renheden af en farve, fra fuldt kraftig til helt grå. Den er adskilt fra nuance og lyshed.

### Er høj mætning dårligt?

Nej, men den er bedst i små områder og korte øjeblikke. Store områder med høj mætning er trættende og kan ligne noget billigt.

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

Mætning er, hvor meget grå der er blandet i en farve; lysstyrke eller lyshed er, hvor tæt den er på hvid eller sort. Du kan ændre den ene uden den anden.

### Hvorfor ser mættede farver værre ud i mørk tilstand?

På mørke baggrunde ser kraftige farver ud til at gløde og blive slørede i kanterne. Hvis du sænker mætningen lidt og hæver lysheden, forbliver de skarpe.

### Hvordan gør jeg en farve mindre mættet i CSS?

Sænk den anden værdi i `hsl()` eller `oklch()`, eller bland den med grå med `color-mix(in oklch, yourcolour 60%, #808080)`.