# Dämpade färgpaletter: dammiga koder för lugna varumärken

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

Salvia, dammig rosa, skiffer och lera känns lugna eftersom färgen har mjukats upp med grått. Så fungerar dämpning, sju paletter att kopiera och det enda som hindrar en dämpad färgskala från att bli dimma.

## The short version

- En dämpad färgpalett består av färger med sänkt mättnad, oftast genom att blanda in grått eller lite av motsatt kulör.
- Dämpade färger som salvia, dammig rosa, skifferblått, lila och lera läses som lugna, naturliga och vuxna.
- Dämpade färger har ofta samma ljushet, så en dämpad palett behöver en mycket mörkare färg till text och kanter.
- Salviagrönt och dammig rosa ser olika ut i kulör men är nästan identiska i ljushet, vilket är därför text i den ena på den andra är oläsbar.
- I CSS är color-mix() i oklch-rymden ett pålitligt sätt att dämpa vilken varumärkesfärg som helst genom att blanda den med grått.

En **dämpad färgpalett** är en uppsättning färger med nedskruvad mättnad, så att de ser dammiga, mjuka och lätt gråa ut i stället för rena. Salvia `#9CAF88`, dammig rosa `#C9A9A6`, skifferblått `#6B7F99`, lila `#B48A9B` och lera `#B5826B` är typiska. De passar varumärken som vill kännas lugna och genomtänkta: keramik, välmående, pappersvaror, arkitektur, långsamt mode. Haken är att dämpade färger glider mot samma ljushet, så varje bra dämpad palett har en fast mörk färg som håller ihop den.

## Vad som gör en färg dämpad

En färg har tre inställningar: kulör, mättnad och ljushet (se [kulör, mättnad och ljusstyrka](https://gradiently.design/sv/guide/hue-saturation-brightness)). Dämpning sänker mättnaden men låter kulören vara igenkännbar. Det finns två klassiska sätt att göra det: blanda in grått, vilket designers kallar att göra en ton, eller blanda in lite av komplementfärgen, vilket målare alltid har gjort. Båda drar färgen mot neutralt.

### Ren

- Grönt `#2ECC71`
- Rosa `#FF5C8A`
- Blått `#2F6BFF`
- Orange `#FF7A1A`

### Dämpad

- Salvia `#9CAF88`
- Dammig rosa `#C9A9A6`
- Skifferblått `#6B7F99`
- Lera `#B5826B`

Dämpad är inte detsamma som pastell. En pastell tillför vitt, så den förblir ren och ljus; en dämpad färg tillför grått, så den kan vara ljus, medel eller mörk och känns alltid lite dammig. [Pastellpaletter](https://gradiently.design/sv/guide/pastel-color-palettes) och [nyanser, toner och skuggor](https://gradiently.design/sv/guide/tints-tones-shades) drar gränsen mer i detalj.

## Sju dämpade färgpaletter med hexkoder

- Krita: #eef0e8
- Salvia: #9caf88
- Dammig rosa: #c9a9a6
- Lera: #b5826b
- Mossbläck: #2e3a2c

Trädgårdsstudio, paletten de flesta tänker på när de hör dämpad. Mossbläck är ankaret som gör de andra fyra användbara.

- **Hamn:** dimma `#E6E9EA`, skifferblått `#6B7F99`, havsgrått `#93A3A6`, rep `#C2AD8E`, djup marin `#22303C`.
- **Keramik:** kex `#F1E8DD`, lera `#B5826B`, askglasyr `#A7A39A`, järn `#5B4A42`, ugnssvart `#231D1A`.
- **Lavendeldamm:** dis `#F1EBE6`, lila `#B48A9B`, ljung `#8E8AA6`, salvia `#9CAF88`, aubergine `#4A3F4F`.
- **Olivlund:** kräm `#F2EDE1`, oliv `#8A8A5C`, torkad ört `#B1A87F`, terrakotta `#A9674E`, bark `#3A3328`.
- **Nordiskt:** snö `#F2F3F1`, björk `#D8D1C4`, lav `#A3AE9D`, fjord `#5F7A80`, tall `#24302E`.
- **Dammig skymning:** pergament `#EFE6DA`, persikodamm `#D9A88F`, rosenbrunt `#A06F6B`, plommongrått `#6E5866`, natt `#2A2329`.

Var och en av dessa slutar i en mörk färg. Det är inte dekoration. Utan den finns inget att sätta text i och inget att dra en kant med, och paletten ser ut som ett fotografi som glömts kvar i solen.

## Därför blir dämpade paletter till dimma

Dämpning tar bort de största skillnaderna mellan färger, så ljusheten blir det enda som återstår för att skilja dem åt. Salvia `#9CAF88` och dammig rosa `#C9A9A6` ser ut som en vacker kontrast av grönt och rosa, men deras kontrastförhållande är 1,09:1: nästan samma ljushet. Text i den ena på den andra är oläsbar. Till och med salvia på rent vitt når bara 2,36:1.

| Par | Kontrast | Använd till |
| --- | --- | --- |
| Salvia på dammig rosa | 1,09:1 | Två former sida vid sida, aldrig text |
| Salvia på vitt | 2,36:1 | Stora former och illustration |
| Skifferblått på vitt | 4,10:1 | Bara stora rubriker |
| Dammig rosa med text i `#3A2A2A` | 6,29:1 | Brödtext, klarar AA |
| Mossbläck `#2E3A2C` på krita | 10,39:1 | Brödtext, klarar AAA |
| Aubergine `#4A3F4F` på dis | 8,40:1 | Brödtext, klarar AAA |

WCAG kräver 4,5:1 för brödtext och 3:1 för stor text. I en dämpad palett gör det mörka ankaret hela läsjobbet.

Kontrollera dina egna par med hjälp av [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility). En bra vana är att en stund göra paletten till gråskala: om två färger blir samma grå, lägg aldrig den ena ovanpå den andra.

## Så dämpar du vilken färg som helst i CSS

Om du redan har en klar varumärkesfärg och vill ha en lugnare följeslagare, blanda den med grått i stället för att välja en ny färg på känn. `color-mix()` i oklch-rymden håller kulören stabil medan mättnaden sjunker, och stöds i alla nuvarande större webbläsare.

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

Att blanda mot en mellangrå dämpar utan att ändra kulören. I oklch läses ett kroma kring 0,03 till 0,07 som dämpat; 0,15 och uppåt läses som starkt.

[OKLCH förklarat](https://gradiently.design/sv/guide/oklch-explained) går igenom varför den här rymden beter sig jämnare än HSL, och [mättnad i design](https://gradiently.design/sv/guide/color-saturation) tar upp när du ska skruva upp den igen.

## Dämpade gradienter och bakgrunder

Dämpade färger ger mjuka, tysta gradienter, särskilt när stoppen ligger nära varandra i kulör och ljuset kommer från ena sidan. Lägg till lite korn: gradienter med låg kontrast bandar lätt, och textur får dem att se ut som en yta snarare än en skärminställning.

- Salviamorgon: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Persikodamm: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Hamndis: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Lilakväll: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Fyra dämpade gradienter. Var och en håller sig till närliggande kulörer, så gradienten aldrig blir brun i mitten.

Ett dämpat schema kan också få en något starkare färg som accent, som terrakotta bland salvia eller ett djupare blågrönt bland grått. Håll den till ett enda element per design: ett pris, en knapp, ett datum. Den ger ögat en plats att landa på utan att bryta lugnet, och så fungerar oftast de [jordtonspaletter](https://gradiently.design/sv/guide/earth-tone-colors) som dämpade scheman lånar från.

Ett stående inlägg i sociala medier för en keramikkollektion med mörk text på en mjuk, dammig bakgrund

Ett keramikinlägg på 1080×1350. Dämpade färger bär stämningen; den mörka texten bär budskapet.

Om ditt varumärke lever i dämpade färger gör en bakgrund med eget korn och eget ljus mycket av jobbet. En Gradiently-Mark ger dig en mjuk, särpräglad yta som håller texten läsbar av sig själv, vilket spelar större roll i ett dämpat schema än i något annat.

## FAQ

### Vad är en dämpad färgpalett?

En palett av färger med sänkt mättnad, så att de ser mjuka, dammiga och lätt gråa ut. Salvia, dammig rosa, skifferblått och lera är vanliga exempel.

### Vad är skillnaden mellan dämpade färger och pastellfärger?

Pasteller görs genom att tillföra vitt, så de förblir ljusa och rena. Dämpade färger görs genom att tillföra grått, så de kan ha vilken ljushet som helst och känns alltid lite dammiga.

### Hur gör jag en färg mer dämpad?

Sänk dess mättnad, blanda in grått eller tillför lite av dess komplementfärg. I CSS gör `color-mix(in oklch, dinfärg 50%, #8c8c8c)` det pålitligt.

### Vilka färger passar till salviagrönt?

Dammig rosa, lera, kräm, varmgrått och en djup mossgrön eller kolgrå till text. Undvik text i salvia på dammig rosa: de har nästan samma ljushet.

### Är dämpade färger bra för varumärken?

De passar lugna, hantverks- och välmåendevarumärken väl. Ta med en stark mörk färg till text och kanter så att paletten förblir läsbar.