# Fargemetning i design: når fargen bør dempes eller styrkes

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

Metning er skalaen mellom sterke farger og grått. Den påvirker om et design virker høylytt, billig, rolig eller eksklusivt. Her ser du når du bør skru opp eller ned, med kode for begge deler.

## The short version

- Fargemetning i design er fargens intensitet, fra helt klar til helt grå, uavhengig av fargetonen.
- Høy metning fanger oppmerksomheten og virker energisk, og passer derfor best på små flater som knapper, aksenter og fremhevinger.
- Lavere metning virker roligere og ofte mer eksklusiv, og passer til store flater som bakgrunner og sider med mye lesing.
- To sterkt mettede komplementærfarger ved siden av hverandre kan se ut til å vibrere, og gjør teksten slitsom å lese.
- Mettede farger må vanligvis dempes i mørk modus og kan ofte ikke gjengis nøyaktig i CMYK-trykk.

**Fargemetning i design** handler om hvor intens en farge er: fullt mettet er den klar og ren, helt uten metning er den grå. Øk metningen der du ønsker oppmerksomhet og energi, på en knapp, en tilbudspris eller én fremheving. Senk den på store flater, ved langvarig lesing, for eksklusive merkevarer og i mørke grensesnitt, der sterke farger fort blir slitsomme. Gode paletter blander som regel begge deler bevisst: en rolig base med lav metning og én eller to mettede aksenter.

## Hva metning er, og hva det ikke er

Enhver farge kan beskrives med tre egenskaper: fargetone (hvilken farge det er), lyshet (hvor nær hvitt eller svart den ligger) og metning (hvor ren eller grålig den er). Endrer du bare metningen, glir kirsebærrødt mot støvrosa og så grått, uten å bli lysere eller mørkere. [Fargetone, metning og lysstyrke](https://gradiently.design/nb/guide/hue-saturation-brightness) forklarer sammenhengen mellom de tre.

- Rødt, metning fra 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ått, metning fra 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ønt, metning fra 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 fargetoner med fast lyshet og fallende metning. Midten av hver stripe er der mange sofistikerte merkevarefarger ligger.

I HSL er metning det andre tallet. I det nyere fargerommet oklch tilsvarer det chroma, som oppfører seg jevnere på tvers av fargetoner. Gult og blått med samme chroma virker derfor like intense. [HSL-farger](https://gradiently.design/nb/guide/hsl-colors) forklarer den eldre modellen og hvordan du leser tallene.

## Når du bør øke metningen

- **Det ene du skal trykke på.** En mettet knapp på en rolig side trenger ingen pil som peker på den. Dette er oppgaven til en [aksentfarge](https://gradiently.design/nb/guide/accent-color).
- **Korte, høylytte øyeblikk.** Tilbudsannonser, lanseringsinnlegg og nedtellinger til arrangementer skal få folk til å stoppe opp i strømmen.
- **Unge, lekne eller sporty merkevarer.** Barneprodukter, energidrikker og festivaler bruker ofte høy metning som en del av personligheten.
- **Data som må skille seg ut.** I et diagram gir du serien som betyr mest, høy metning og gjør resten grå.
- **Små flater på mørk bunn.** En klar farge på et lite område mot nesten svart ser ut som lys. Derfor fungerer neon om natten.

## Når du bør senke metningen

- **Store flater.** En hel skjerm med ren, mettet farge er slitsom. Bakgrunner fungerer som regel bedre med litt grått i.
- **Eksklusiv posisjonering.** Dempede, sammensatte farger som oliven, okseblod og skifer virker ofte mer gjennomtenkte og eksklusive enn primærfarger.
- **Langvarig lesing.** Artikler, dokumenter og oversiktspaneler trenger en rolig flate folk kan se på i en time.
- **Mørk modus.** Mettede farger gløder og flyter ut mot mørke bakgrunner. Senk metningen og øk lysheten litt. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) går i detalj.
- **Bak fotografier og tekst.** En roligere bakgrunn lar bildet og ordene komme først.

Et stående salgsinnlegg med teksten Helgesalg, bare 48 timer

Et kort, høylytt øyeblikk som et helgesalg er der høy metning har sin plass. Stående innlegg på 1080×1350.

Et stående Journal-innlegg med tittelen Notater fra studioet

Noe folk skal dvele ved, som et Journal-innlegg, passer med roligere farger og lavere metning.

## Problemet med vibrerende farger

Sett to sterkt mettede komplementærfarger ved siden av hverandre, for eksempel rødt på grønt eller blått på oransje, og grensen mellom dem ser ut til å flimre. Det er en optisk effekt som gjør tekst ubehagelig å lese, selv når kontrastforholdet virker akseptabelt. Løsningen er å dempe metningen i én av fargene, eller skille dem med en nøytral farge.

### Vibrerer

- Ren rød tekst på rent grønt
- Mettet blått på mettet oransje
- Magenta ved siden av lime med full styrke
- Sterke farger side om side over en hel plakat

### Rolig å lese

- Dyp rød tekst på dempet salviegrønt
- Marineblått på myk aprikos
- Magentaaksent på grålig limebunn
- Én klar farge på en base med lavere metning

## Slik justerer du metning i CSS

Hex-koder skjuler metningen. Derfor tar det tid å justere den på øyemål i hex. Bruk heller HSL eller oklch, eller bland en farge med grått ved hjelp av `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åter å senke metningen og beholde fargetonen: HSL-metning, oklch-chroma og blanding med grått.

En nyttig vane er å definere hver merkevarefarge med to metningsnivåer fra starten: en full versjon for aksenter og en dempet versjon for store flater. Da trenger ingen å improvisere en mykere nyanse senere.

Fotografier følger samme logikk. Et livlig, mettet bilde bak en overskrift konkurrerer med den. Senk bildets metning med omtrent en tredel, så kommer ordene først uten bokser eller skygger bak. Den motsatte teknikken, ett mettet motiv i et ellers dempet bilde, som en rød kåpe i en grå gate, er en av de eldste måtene å styre blikket på.

## Metning i trykk

Skjermer kan vise mer mettede farger enn CMYK-blekk kan trykke, særlig klare blå, grønne, oransje og lilla nyanser. En sterk skjermfarge blir ofte merkbart mattere på papir. Hvis metning er sentral for merkevaren, bør du vurdere en Pantone-spotfarge til trykk og kontrollere et prøvetrykk før et stort opplag. [RGB og CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer forskjellen.

- Mettet rødt: #e8173a
- Dempet rødt: #b8505f
- Mettet blått: #1c7ae0
- Dempet blått: #4f6f93
- Mettet grønt: #14a85a
- Dempet grønt: #5b8a6f

Hver merkevarefarge med to metningsnivåer. De mettede versjonene passer til små, tydelige øyeblikk. De dempede bærer store flater og tåler trykk bedre.

Metning spiller også sammen med [fargetemperatur](https://gradiently.design/nb/guide/color-temperature): en varm, dempet palett virker nostalgisk, en kjølig, dempet palett virker skandinavisk. Se [dempede fargepaletter](https://gradiently.design/nb/guide/muted-color-palettes) og [sterke fargepaletter](https://gradiently.design/nb/guide/bright-color-palettes) for ferdige sett i hver ende av skalaen.

Marks fra Gradiently bruker samme prinsipp i en levende bakgrunn: det roligste området med best kontrast flytter seg bak teksten, og livlige detaljer dempes der. Ordene får en roligere flate mens resten av Marken beholder fargen.

## FAQ

### Hva er fargemetning i design?

Fargens intensitet eller renhet, fra helt klar til helt grå. Metning er uavhengig av fargetone og lyshet.

### Er høy metning dårlig?

Nei, men den passer best på små flater og i korte øyeblikk. Store flater med høy metning er slitsomme og kan virke billige.

### Hva er forskjellen mellom metning og lysstyrke?

Metning er hvor mye grått som er blandet inn i en farge. Lysstyrke eller lyshet handler om hvor nær hvitt eller svart den ligger. Du kan endre det ene uten å endre det andre.

### Hvorfor fungerer mettede farger dårligere i mørk modus?

Mot mørke bakgrunner ser sterke farger ut til å gløde og bli uskarpe i kantene. Litt lavere metning og høyere lyshet holder dem skarpe.

### Hvordan gjør jeg en farge mindre mettet i CSS?

Senk den andre verdien i `hsl()` eller `oklch()`, eller bland fargen med grått ved hjelp av `color-mix(in oklch, yourcolour 60%, #808080)`.