# Dempede fargepaletter: støvete koder for rolige merkevarer

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

Salvie, støvet rosa, skifer og leire virker rolige fordi fargen er myknet med grått. Her ser du hvordan demping fungerer, får sju paletter og lærer hva som hindrer dem i å bli utydelige.

## The short version

- En dempet fargepalett består av farger med redusert metning, vanligvis ved å blande inn grått eller litt av motsatt fargetone.
- Dempede farger som salvie, støvet rosa, skiferblå, mauve og leire virker rolige, naturlige og voksne.
- Dempede farger har ofte samme lyshet, så paletten trenger én mye mørkere farge til tekst og kanter.
- Salviegrønn og støvet rosa har ulike fargetoner, men nesten lik lyshet. Derfor er tekst i den ene på den andre uleselig.
- I CSS er color-mix() i oklch-fargerommet en pålitelig måte å dempe en merkevarefarge på ved å blande den med grått.

En **dempet fargepalett** er et sett farger med redusert metning, slik at de virker støvete, myke og litt grålige fremfor rene. Salvie `#9CAF88`, støvet rosa `#C9A9A6`, skiferblå `#6B7F99`, mauve `#B48A9B` og leire `#B5826B` er typiske. De passer merkevarer som vil virke rolige og gjennomtenkte: keramikk, velvære, papirvarer, arkitektur og langsom mote. Utfordringen er at dempede farger nærmer seg samme lyshet. Derfor har enhver god dempet palett én tydelig mørk farge som holder den sammen.

## Hva som gjør en farge dempet

En farge har tre innstillinger: fargetone, metning og lyshet. Se [fargetone, metning og lysstyrke](https://gradiently.design/nb/guide/hue-saturation-brightness). Demping senker metningen, men lar fargetonen være gjenkjennelig. Det finnes to klassiske måter: å blande inn grått, som designere kaller å lage en tone, eller litt av komplementærfargen, slik malere alltid har gjort. Begge trekker fargen mot det nøytrale.

### Ren

- Grønn `#2ECC71`
- Rosa `#FF5C8A`
- Blå `#2F6BFF`
- Oransje `#FF7A1A`

### Dempet

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

Dempet er ikke det samme som pastell. En pastell tilsettes hvitt og forblir ren og lys. En dempet farge tilsettes grått og kan være lys, middels eller mørk, men virker alltid litt støvete. [Pastellpaletter](https://gradiently.design/nb/guide/pastel-color-palettes) og [lyse, grå og mørke fargevarianter](https://gradiently.design/nb/guide/tints-tones-shades) forklarer skillet mer detaljert.

## Sju dempede fargepaletter med heksadesimalkoder

- Kritt: #eef0e8
- Salvie: #9caf88
- Støvet rosa: #c9a9a6
- Leire: #b5826b
- Moseblekk: #2e3a2c

Hagestudio, paletten de fleste ser for seg når de hører dempet. Moseblekk er ankeret som gjør de andre fire brukbare.

- **Havn:** tåke `#E6E9EA`, skiferblå `#6B7F99`, sjøgrå `#93A3A6`, tau `#C2AD8E`, dyp marineblå `#22303C`.
- **Keramikk:** bisque `#F1E8DD`, leire `#B5826B`, askeglasur `#A7A39A`, jern `#5B4A42`, ovnssvart `#231D1A`.
- **Lavendelstøv:** dis `#F1EBE6`, mauve `#B48A9B`, lyng `#8E8AA6`, salvie `#9CAF88`, aubergine `#4A3F4F`.
- **Olivenlund:** krem `#F2EDE1`, oliven `#8A8A5C`, tørket urt `#B1A87F`, terrakotta `#A9674E`, bark `#3A3328`.
- **Nordisk:** snø `#F2F3F1`, bjørk `#D8D1C4`, lav `#A3AE9D`, fjord `#5F7A80`, furu `#24302E`.
- **Støvet skumring:** pergament `#EFE6DA`, ferskenstøv `#D9A88F`, rosabrun `#A06F6B`, plommegrå `#6E5866`, natt `#2A2329`.

Alle disse ender med en mørk farge. Det er ikke dekor. Uten den finnes ingen farge å sette tekst i eller tegne en kant med, og paletten ligner et fotografi som har ligget i solen.

## Hvorfor dempede paletter blir utydelige

Demping fjerner de sterkeste forskjellene mellom fargene, slik at lyshet er det eneste som skiller dem. Salvie `#9CAF88` og støvet rosa `#C9A9A6` virker som en fin kontrast mellom grønt og rosa, men kontrastforholdet er 1,09:1: nesten samme lyshet. Tekst i den ene på den andre er uleselig. Selv salvie på rent hvitt når bare 2,36:1.

| Par | Kontrast | Bruk til |
| --- | --- | --- |
| Salvie på støvet rosa | 1,09:1 | To former ved siden av hverandre, aldri tekst |
| Salvie på hvitt | 2,36:1 | Store former og illustrasjon |
| Skiferblå på hvitt | 4,10:1 | Bare store overskrifter |
| Støvet rosa med tekst i `#3A2A2A` | 6,29:1 | Brødtekst, oppfyller AA |
| Moseblekk `#2E3A2C` på kritt | 10,39:1 | Brødtekst, oppfyller AAA |
| Aubergine `#4A3F4F` på dis | 8,40:1 | Brødtekst, oppfyller AAA |

WCAG krever 4,5:1 for brødtekst og 3:1 for stor tekst. I en dempet palett gjør det mørke ankeret hele lesejobben.

Sjekk dine egne par med veiledningen i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility). En god vane er å gjøre paletten om til gråtoner et øyeblikk: Blir to farger samme grå, må du aldri legge den ene oppå den andre.

## Slik demper du en farge i CSS

Har du en klar merkevarefarge og ønsker en roligere ledsager, bland den med grått fremfor å velge en ny farge på øyemål. `color-mix()` i oklch-fargerommet holder fargetonen stabil mens metningen faller, og støttes i alle dagens store nettlesere.

```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);
}
```

Å blande mot mellomgrått demper uten å endre fargetonen. I oklch virker en kroma på omtrent 0,03 til 0,07 dempet; 0,15 og høyere virker intenst.

[OKLCH forklart](https://gradiently.design/nb/guide/oklch-explained) dekker hvorfor dette fargerommet oppfører seg jevnere enn HSL, og [metning i design](https://gradiently.design/nb/guide/color-saturation) forklarer når du bør øke den igjen.

## Dempede gradienter og bakgrunner

Dempede farger gir myke, stillferdige gradienter, særlig når fargestoppene har nærliggende fargetoner og lyset kommer fra én side. Legg til litt korn: Blandinger med lav kontrast får lett synlige fargebånd, og tekstur får dem til å ligne en flate fremfor en skjerminnstilling.

- 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%)`
- Mauvekveld: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Fire dempede gradienter. Alle holder seg til nabofargetoner, slik at blandingen aldri blir brun i midten.

En dempet palett kan også ha én litt sterkere aksentfarge, som terrakotta blant salviefarger eller dypere blågrønn blant gråtoner. Bruk den til ett element per design: en pris, en knapp eller en dato. Det gir øyet et sted å lande uten å bryte roen. Slik fungerer vanligvis [jordfargepalettene](https://gradiently.design/nb/guide/earth-tone-colors) som dempede paletter låner fra.

Et stående innlegg til sosiale medier for en keramikkolleksjon, med mørke bokstaver på en myk, støvet bakgrunn

Et keramikkinnlegg i 1080×1350. Dempede farger bærer stemningen; den mørke teksten bærer budskapet.

Lever merkevaren din i dempede farger, gjør en bakgrunn med eget korn og lys mye av jobben. En Mark fra Gradiently gir deg en myk, særpreget flate som selv holder teksten leselig, noe som betyr mer i en dempet palett enn i noen annen.

## FAQ

### Hva er en dempet fargepalett?

En palett med redusert fargemetning, slik at fargene virker myke, støvete og litt grålige. Salvie, støvet rosa, skiferblå og leire er vanlige eksempler.

### Hva er forskjellen mellom dempede farger og pasteller?

Pasteller lages ved å tilsette hvitt og forblir lyse og rene. Dempede farger lages ved å tilsette grått, kan ha alle lyshetsnivåer og virker alltid litt støvete.

### Hvordan gjør jeg en farge mer dempet?

Senk metningen, bland inn grått eller tilsett litt av komplementærfargen. I CSS gjør `color-mix(in oklch, yourcolour 50%, #8c8c8c)` dette pålitelig.

### Hvilke farger passer med salviegrønn?

Støvet rosa, leire, krem, varm grå og dyp mose eller kull til tekst. Unngå salviefarget tekst på støvet rosa: De har nesten samme lyshet.

### Passer dempede farger til merkevareprofilering?

De passer godt til rolige merkevarer innen håndverk og velvære. Ta med én sterk mørk farge til tekst og kanter, slik at paletten forblir leselig.