# Mättnad i design: när du ska höja och sänka färgen

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

Mättnad är reglaget mellan livligt och grått, och den ändrar hur högljudd, billig, lugn eller dyr en design känns. Så vet du när du ska höja och sänka den, och koderna för båda.

## The short version

- Mättnad i design är en färgs intensitet, från helt livlig till helt grå, oberoende av dess nyans.
- Hög mättnad drar uppmärksamhet och känns energisk, så den fungerar bäst på små ytor som knappar, accenter och höjdpunkter.
- Lägre mättnad känns lugnare och ofta mer exklusiv, och passar stora ytor som bakgrunder och långa läsytor.
- Två starkt mättade komplementfärger sida vid sida kan verka vibrera, vilket gör text på dem tröttsam att läsa.
- Mättade färger behöver oftast dämpas i mörkt läge och kan ofta inte matchas exakt i CMYK-tryck.

**Mättnad i design** är hur intensiv en färg är: helt mättad är livlig och ren, helt omättad är grå. Höj den där du vill ha uppmärksamhet och energi, på en knapp, ett reapris eller en enskild höjdpunkt. Sänk den för stora ytor, långläsning, exklusiva varumärken och mörka gränssnitt, där livliga färger snabbt blir tröttsamma. De flesta bra paletter blandar de två med avsikt: en lugn bas med lägre mättnad och en eller två mättade toner.

## Vad mättnad är, och vad den inte är

Varje färg kan beskrivas med tre egenskaper: nyans (vilken färg det är), ljushet (hur nära vitt eller svart) och mättnad (hur ren eller gråad den är). Ändra bara mättnaden och ett körsbärsrött glider mot dammigt rosa, sedan mot grått, utan att bli ljusare eller mörkare. [Nyans, mättnad och ljusstyrka](https://gradiently.design/sv/guide/hue-saturation-brightness) förklarar hur de tre hänger ihop.

- Rött, mättnad 85 % till 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, mättnad 85 % till 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, mättnad 70 % till 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 nyanser med konstant ljushet medan mättnaden sjunker. Mitten av varje remsa är där många sofistikerade varumärkesfärger bor.

I HSL är mättnad det andra talet. I det nyare färgrummet oklch är motsvarigheten chroma, och den beter sig jämnare över nyanser, så att ett gult och ett blått med samma chroma ser lika intensiva ut. [HSL-färger](https://gradiently.design/sv/guide/hsl-colors) tar upp den äldre modellen och hur du läser dess siffror.

## När du ska höja mättnaden

- **Det enda man ska trycka på.** En mättad knapp på en stilla sida behöver ingen pil som pekar på den. Det är jobbet för en [accentfärg](https://gradiently.design/sv/guide/accent-color).
- **Korta, högljudda ögonblick.** Reameddelanden, lanseringsinlägg och nedräkningar till evenemang är till för att avbryta scrollandet.
- **Unga, lekfulla eller sportiga varumärken.** Barnprodukter, energidrycker och festivaler bär ofta hög mättnad som en del av sin personlighet.
- **Data som måste sticka ut.** I ett diagram, mätta den serie som är viktig och gråa resten.
- **Små ytor på mörk bakgrund.** En livlig färg på en liten yta mot nästan svart läses som ljus, vilket är varför neon fungerar på natten.

## När du ska sänka mättnaden

- **Stora ytor.** En hel skärm med ren mättad färg är tröttsam. Bakgrunder fungerar oftast bättre lätt gråade.
- **Exklusiv positionering.** Dämpade, komplexa färger som oliv, oxblod och skiffer läses ofta som mer genomtänkta och dyra än primärfärger.
- **Långläsning.** Artiklar, dokument och instrumentpaneler behöver en lugn yta folk kan titta på en timme.
- **Mörkt läge.** Mättade färger glöder och smetar på mörka bakgrunder. Sänk mättnaden och höj ljusheten något; [design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) har detaljerna.
- **Bakom fotografier och text.** En stillsammare bakgrund låter fotot och orden leda.

Ett stående reainlägg med texten Helgrea, bara 48 timmar

Ett kort, högljutt ögonblick som en helgrea är där hög mättnad förtjänar sin plats. Stående inlägg i 1080×1350.

Ett stående journalinlägg med rubriken Anteckningar från ateljén

Något folk ska dröja vid, som ett journalinlägg, är där lugnare färg med lägre mättnad hör hemma.

## Vibrationsproblemet

Lägg två starkt mättade komplementfärger sida vid sida, som rött på grönt eller blått på orange, och gränsen mellan dem verkar skimra. Det är en optisk effekt, och den gör text på de paren verkligt obekväm att läsa även när kontrastförhållandet ser acceptabelt ut. Lösningen är att avmätta den ena i paret, eller skilja dem åt med en neutral.

### Vibrerar

- Ren röd text på rent grönt
- Mättat blått på mättat orange
- Magenta bredvid lime i full styrka
- Livliga färger sida vid sida över en hel affisch

### Läses lugnt

- Djupröd text på dämpad salvia
- Marinblått på mjuk aprikos
- Magentaaccent på en gråad limebakgrund
- En livlig färg på en bas med lägre mättnad

## Så justerar du mättnad i CSS

Hex-koder döljer mättnad, vilket är varför det går långsamt att justera den med ögat i hex. Arbeta i HSL eller oklch i stället, eller blanda en färg med grått 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 sätt att sänka mättnaden och behålla nyansen: HSL-mättnad, oklch-chroma och blandning med grått.

En användbar vana är att definiera varje varumärkesfärg i två mättnader från början: en full version för accenter och en dämpad version för stora fyllnader. Då behöver ingen improvisera en mjukare nyans senare.

Fotografier följer samma logik. Ett rörigt, mättat foto bakom en rubrik konkurrerar med den; dra ner fotots mättnad med en tredjedel eller så, så tar orden ledningen utan någon ruta eller skugga bakom. Åt andra hållet är ett enda mättat föremål i ett annars dämpat foto, en röd kappa på en grå gata, ett av de äldsta sätten att styra blicken.

## Mättnad i tryck

Skärmar kan visa mer mättad färg än CMYK-bläck kan trycka, särskilt klara blå, gröna, orange och lila toner. En livlig skärmfärg trycks ofta märkbart mattare. Om mättnad är central för ditt varumärke, överväg ett Pantone-specialfärgbläck för tryck och kontrollera ett provtryck före en stor upplaga. [RGB mot CMYK](https://gradiently.design/sv/guide/rgb-vs-cmyk) förklarar skillnaden.

- Fullt rött: #e8173a
- Dämpat rött: #b8505f
- Fullt blått: #1c7ae0
- Dämpat blått: #4f6f93
- Fullt grönt: #14a85a
- Dämpat grönt: #5b8a6f

Varje varumärkesfärg i två mättnader. De fulla versionerna är till små, högljudda ögonblick; de dämpade bär stora ytor och överlever tryck bättre.

Mättnad samverkar också med [färgtemperatur](https://gradiently.design/sv/guide/color-temperature): en varm dämpad palett känns vintage, en sval dämpad känns skandinavisk. För färdiga uppsättningar i varje ände av reglaget, se [dämpade färgpaletter](https://gradiently.design/sv/guide/muted-color-palettes) och [klara färgpaletter](https://gradiently.design/sv/guide/bright-color-palettes).

Gradiently Marks tillämpar samma princip på en levande bakgrund: den lugnaste, bäst kontrasterande delen flyttar sig bakom texten och rörigare detaljer slappnar av där, så att orden ligger på en stillsammare fläck medan resten av Marken behåller sin färg.

## FAQ

### Vad är mättnad i design?

Intensiteten eller renheten hos en färg, från helt livlig till helt grå. Den är skild från nyans och ljushet.

### Är hög mättnad dåligt?

Nej, men den är bäst på små ytor och i korta ögonblick. Stora ytor med hög mättnad är tröttsamma och kan se billiga ut.

### Vad är skillnaden mellan mättnad och ljusstyrka?

Mättnad är hur mycket grått som blandats in i en färg; ljusstyrka eller ljushet är hur nära den är vitt eller svart. Du kan ändra det ena utan det andra.

### Varför ser mättade färger sämre ut i mörkt läge?

På mörka bakgrunder verkar livliga färger glöda och suddas ut i kanterna. Att sänka mättnaden något och höja ljusheten håller dem skarpa.

### Hur gör jag en färg mindre mättad i CSS?

Sänk det andra värdet i `hsl()` eller `oklch()`, eller blanda den med grått med `color-mix(in oklch, yourcolour 60%, #808080)`.