# Afdæmpede farvepaletter: støvede koder til rolige brands

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

Salvie, støvet rosa, skifer og ler føles rolige, fordi farven er blødt op med grå. Sådan virker afdæmpning, syv paletter at kopiere, og den ene ting, der forhindrer en afdæmpet palet i at blive til tåge.

## The short version

- En afdæmpet farvepalet består af farver med nedsat mætning, som regel ved at blande grå eller en smule af den modsatte nuance i.
- Afdæmpede farver som salvie, støvet rosa, skiferblå, mauve og ler virker rolige, naturlige og voksne.
- Afdæmpede farver har ofte samme lyshed, så en afdæmpet palet har brug for én meget mørkere farve til tekst og kanter.
- Salviegrøn og støvet rosa ser forskellige ud i nuance, men er næsten identiske i lyshed, og derfor er tekst i den ene på den anden ulæselig.
- I CSS er color-mix() i oklch-rummet en pålidelig måde at afdæmpe enhver brandfarve på ved at blande den med grå.

En **afdæmpet farvepalet** er et sæt farver med mætningen skruet ned, så de ser støvede, bløde og let grålige ud frem for rene. Salvie `#9CAF88`, støvet rosa `#C9A9A6`, skiferblå `#6B7F99`, mauve `#B48A9B` og ler `#B5826B` er typiske. De passer til brands, der vil føles rolige og gennemtænkte: keramik, wellness, papirvarer, arkitektur, slow fashion. Problemet er, at afdæmpede farver glider mod den samme lyshed, så enhver god afdæmpet palet indeholder én fast mørk farve, der holder den sammen.

## Hvad gør en farve afdæmpet

En farve har tre indstillinger: nuance, mætning og lyshed (se [nuance, mætning og lysstyrke](https://gradiently.design/da/guide/hue-saturation-brightness)). Afdæmpning sænker mætningen, mens nuancen forbliver genkendelig. Der er to klassiske måder at gøre det på: bland grå i, hvad designere kalder at lave en tone, eller bland en smule af komplementærfarven i, som malere altid har gjort. Begge trækker farven mod neutral.

### Ren

- Grøn `#2ECC71`
- Pink `#FF5C8A`
- Blå `#2F6BFF`
- Orange `#FF7A1A`

### Afdæmpet

- Salvie `#9CAF88`
- Støvet rosa `#C9A9A6`
- Skiferblå `#6B7F99`
- Ler `#B5826B`

Afdæmpet er ikke det samme som pastel. En pastel tilføjer hvid, så den forbliver ren og lys; en afdæmpet farve tilføjer grå, så den kan være lys, mellem eller mørk og altid føles lidt støvet. [Pastelfarvepaletter](https://gradiently.design/da/guide/pastel-color-palettes) og [tints, toner og skygger](https://gradiently.design/da/guide/tints-tones-shades) trækker grænsen mere detaljeret.

## Syv afdæmpede farvepaletter med hexkoder

- Kridt: #eef0e8
- Salvie: #9caf88
- Støvet rosa: #c9a9a6
- Ler: #b5826b
- Mosblæk: #2e3a2c

Havestudie, den palet de fleste forestiller sig, når de hører afdæmpet. Mosblæk er ankeret, der gør de fire andre brugbare.

- **Havn:** tåge `#E6E9EA`, skiferblå `#6B7F99`, havgrå `#93A3A6`, reb `#C2AD8E`, dyb marineblå `#22303C`.
- **Keramik:** biscuit `#F1E8DD`, ler `#B5826B`, askeglasur `#A7A39A`, jern `#5B4A42`, ovnsort `#231D1A`.
- **Lavendelstøv:** dis `#F1EBE6`, mauve `#B48A9B`, lyng `#8E8AA6`, salvie `#9CAF88`, aubergine `#4A3F4F`.
- **Olivenlund:** creme `#F2EDE1`, oliven `#8A8A5C`, tørret urt `#B1A87F`, terrakotta `#A9674E`, bark `#3A3328`.
- **Nordisk:** sne `#F2F3F1`, birk `#D8D1C4`, lav `#A3AE9D`, fjord `#5F7A80`, fyr `#24302E`.
- **Støvet skumring:** pergament `#EFE6DA`, ferskenstøv `#D9A88F`, rosenbrun `#A06F6B`, blommegrå `#6E5866`, nat `#2A2329`.

Hver eneste af dem ender i en mørk farve. Det er ikke pynt. Uden den er der intet at sætte tekst i og intet at tegne en kant med, og paletten ligner et fotografi, der har ligget i solen.

## Hvorfor afdæmpede paletter bliver til tåge

Afdæmpning fjerner de stærkeste forskelle mellem farver, så lyshed bliver det eneste, der er tilbage til at adskille dem. Salvie `#9CAF88` og støvet rosa `#C9A9A6` ligner en smuk kontrast mellem grøn og pink, men deres kontrastforhold er 1,09:1: næsten samme lyshed. Tekst i den ene på den anden er ulæselig. Selv salvie på ren hvid når kun 2,36:1.

| Par | Kontrast | Brug til |
| --- | --- | --- |
| Salvie på støvet rosa | 1,09:1 | To former side om side, aldrig tekst |
| Salvie på hvid | 2,36:1 | Store former og illustration |
| Skiferblå på hvid | 4,10:1 | Kun store overskrifter |
| Støvet rosa med `#3A2A2A` tekst | 6,29:1 | Brødtekst, består AA |
| Mosblæk `#2E3A2C` på kridt | 10,39:1 | Brødtekst, består AAA |
| Aubergine `#4A3F4F` på dis | 8,40:1 | Brødtekst, består AAA |

WCAG kræver 4,5:1 for brødtekst og 3:1 for stor tekst. I en afdæmpet palet gør det mørke anker alt læsearbejdet.

Tjek dine egne par med vejledningen i [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility). En god vane er at konvertere paletten til gråtoner et øjeblik: bliver to farver den samme grå, så sæt aldrig den ene oven på den anden.

## Sådan afdæmper du enhver farve i CSS

Har du allerede en klar brandfarve og vil have en roligere ledsager, så bland den med grå i stedet for at vælge en ny farve på øjemål. `color-mix()` i oklch-rummet holder nuancen stabil, mens mætningen falder, og den understøttes i alle aktuelle store browsere.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

At blande mod en mellemgrå afdæmper uden at ændre nuancen. I oklch virker en chroma omkring 0,03 til 0,07 afdæmpet; 0,15 og derover virker klar.

[OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained) viser, hvorfor dette farverum opfører sig mere jævnt end HSL, og [mætning i design](https://gradiently.design/da/guide/color-saturation) viser, hvornår du skal skrue op for den igen.

## Afdæmpede gradienter og baggrunde

Afdæmpede farver giver bløde, stille gradienter, især når stoppene ligger tæt i nuance, og lyset kommer fra én side. Tilføj lidt korn: blandinger med lav kontrast får nemt banding, og tekstur får dem til at ligne en overflade frem for en skærmindstilling.

- Salviemorgen: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Ferskenstøv: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Havnedis: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Mauveaften: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Fire afdæmpede gradienter. Hver holder sig til nabonuancer, så blandingen aldrig bliver brun på midten.

En afdæmpet palet kan også tage én lidt stærkere farve som accent, som en terrakotta blandt salvier eller en dybere petrol blandt grå. Hold den til ét element pr. design: en pris, en knap, en dato. Det giver øjet et sted at lande uden at bryde roen, og det er sådan, de [jordfarvepaletter](https://gradiently.design/da/guide/earth-tone-colors), som afdæmpede paletter låner fra, som regel fungerer.

Et stående opslag på sociale medier for en keramikkollektion med mørke bogstaver på en blød, støvet baggrund

Et keramikopslag i 1080×1350. De afdæmpede farver bærer stemningen; den mørke tekst bærer budskabet.

Lever dit brand i afdæmpede farver, gør en baggrund med sit eget korn og lys meget af arbejdet. En Gradiently Mark giver dig en blød, karakteristisk flade, der selv holder teksten læsbar, og det betyder mere i en afdæmpet palet end i nogen anden.

## FAQ

### Hvad er en afdæmpet farvepalet?

En palet af farver med nedsat mætning, så de ser bløde, støvede og let grålige ud. Salvie, støvet rosa, skiferblå og ler er almindelige eksempler.

### Hvad er forskellen på afdæmpede farver og pastelfarver?

Pasteller laves ved at tilføje hvid, så de forbliver lyse og rene. Afdæmpede farver laves ved at tilføje grå, så de kan have enhver lyshed og altid føles lidt støvede.

### Hvordan gør jeg en farve mere afdæmpet?

Sænk mætningen, bland grå i, eller tilføj en lille smule af komplementærfarven. I CSS gør `color-mix(in oklch, yourcolour 50%, #8c8c8c)` det pålideligt.

### Hvilke farver passer til salviegrøn?

Støvet rosa, ler, creme, varm grå og en dyb mosgrøn eller koksgrå til tekst. Undgå tekst i salvie på støvet rosa: de har næsten samme lyshed.

### Er afdæmpede farver gode til branding?

De passer godt til rolige brands, håndværk og wellness. Tag én stærk mørk farve med til tekst og kanter, så paletten forbliver læsbar.