# Gedämpfte Farbpaletten: staubige Codes für ruhige Marken

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

Salbei, Altrosa, Schiefer und Ton wirken ruhig, weil die Farbe mit Grau abgemildert wurde. Hier erfährst du, wie das Dämpfen funktioniert, bekommst sieben Paletten zum Kopieren und lernst das eine, das verhindert, dass ein gedämpftes Schema zu Nebel wird.

## The short version

- Eine gedämpfte Farbpalette besteht aus Farben mit verringerter Sättigung, meist durch Beimischen von Grau oder etwas vom Gegenfarbton.
- Gedämpfte Farben wie Salbei, Altrosa, Schieferblau, Mauve und Ton wirken ruhig, natürlich und erwachsen.
- Gedämpfte Farben haben oft dieselbe Helligkeit, deshalb braucht eine gedämpfte Palette eine deutlich dunklere Farbe für Text und Kanten.
- Salbeigrün und Altrosa unterscheiden sich im Farbton, sind aber fast gleich hell, weshalb Text in der einen Farbe auf der anderen unlesbar ist.
- In CSS ist color-mix() im oklch-Raum ein verlässlicher Weg, jede Markenfarbe durch Mischen mit Grau zu dämpfen.

Eine **gedämpfte Farbpalette** ist ein Set von Farben mit heruntergedrehter Sättigung, sodass sie staubig, weich und leicht grau statt rein aussehen. Typisch sind Salbei `#9CAF88`, Altrosa `#C9A9A6`, Schieferblau `#6B7F99`, Mauve `#B48A9B` und Ton `#B5826B`. Sie passen zu Marken, die ruhig und überlegt wirken wollen: Keramik, Wellness, Papeterie, Architektur, Slow Fashion. Der Haken ist, dass gedämpfte Farben zur selben Helligkeit driften, deshalb enthält jede gute gedämpfte Palette ein festes Dunkel, das sie zusammenhält.

## Was eine Farbe gedämpft macht

Eine Farbe hat drei Regler: Farbton, Sättigung und Helligkeit (siehe [Farbton, Sättigung und Helligkeit](https://gradiently.design/de/guide/hue-saturation-brightness)). Das Dämpfen senkt die Sättigung, während der Farbton erkennbar bleibt. Dafür gibt es zwei klassische Wege: Grau beimischen, was Designer einen Ton nennen, oder etwas von der Komplementärfarbe beimischen, was Maler schon immer tun. Beide ziehen die Farbe Richtung Neutral.

### Rein

- Grün `#2ECC71`
- Pink `#FF5C8A`
- Blau `#2F6BFF`
- Orange `#FF7A1A`

### Gedämpft

- Salbei `#9CAF88`
- Altrosa `#C9A9A6`
- Schieferblau `#6B7F99`
- Ton `#B5826B`

Gedämpft ist nicht dasselbe wie Pastell. Ein Pastell fügt Weiß hinzu und bleibt deshalb klar und hell; eine gedämpfte Farbe fügt Grau hinzu und kann hell, mittel oder dunkel sein und wirkt immer ein wenig staubig. [Pastell-Farbpaletten](https://gradiently.design/de/guide/pastel-color-palettes) und [Tints, Töne und Shades](https://gradiently.design/de/guide/tints-tones-shades) ziehen die Grenze genauer.

## Sieben gedämpfte Farbpaletten mit Hex-Codes

- Kreide: #eef0e8
- Salbei: #9caf88
- Altrosa: #c9a9a6
- Ton: #b5826b
- Moostinte: #2e3a2c

Gartenatelier, die Palette, die sich die meisten bei „gedämpft“ vorstellen. Moostinte ist der Anker, der die anderen vier brauchbar macht.

- **Hafen:** Nebel `#E6E9EA`, Schieferblau `#6B7F99`, Meergrau `#93A3A6`, Tau `#C2AD8E`, tiefes Marine `#22303C`.
- **Keramik:** Biskuit `#F1E8DD`, Ton `#B5826B`, Aschenglasur `#A7A39A`, Eisen `#5B4A42`, Ofenschwarz `#231D1A`.
- **Lavendelstaub:** Dunst `#F1EBE6`, Mauve `#B48A9B`, Heidekraut `#8E8AA6`, Salbei `#9CAF88`, Aubergine `#4A3F4F`.
- **Olivenhain:** Creme `#F2EDE1`, Oliv `#8A8A5C`, getrocknete Kräuter `#B1A87F`, Terrakotta `#A9674E`, Rinde `#3A3328`.
- **Nordisch:** Schnee `#F2F3F1`, Birke `#D8D1C4`, Flechte `#A3AE9D`, Fjord `#5F7A80`, Kiefer `#24302E`.
- **Staubige Dämmerung:** Pergament `#EFE6DA`, Pfirsichstaub `#D9A88F`, Rosenbraun `#A06F6B`, Pflaumengrau `#6E5866`, Nacht `#2A2329`.

Jede dieser Paletten endet in einem Dunkel. Das ist keine Dekoration. Ohne es gibt es nichts, worin man Text setzen oder eine Kante ziehen könnte, und die Palette wirkt wie ein Foto, das in der Sonne lag.

## Warum gedämpfte Paletten zu Nebel werden

Das Dämpfen nimmt die stärksten Unterschiede zwischen Farben weg, sodass die Helligkeit das Einzige bleibt, das sie trennt. Salbei `#9CAF88` und Altrosa `#C9A9A6` sehen nach einem hübschen Kontrast aus Grün und Rosa aus, ihr Kontrastverhältnis beträgt aber 1,09:1: fast dieselbe Helligkeit. Text in der einen auf der anderen ist unlesbar. Selbst Salbei auf reinem Weiß erreicht nur 2,36:1.

| Paar | Kontrast | Einsatz |
| --- | --- | --- |
| Salbei auf Altrosa | 1,09:1 | Zwei Formen nebeneinander, nie Text |
| Salbei auf Weiß | 2,36:1 | Große Formen und Illustration |
| Schieferblau auf Weiß | 4,10:1 | Nur große Überschriften |
| Altrosa mit Text in `#3A2A2A` | 6,29:1 | Fließtext, besteht AA |
| Moostinte `#2E3A2C` auf Kreide | 10,39:1 | Fließtext, besteht AAA |
| Aubergine `#4A3F4F` auf Dunst | 8,40:1 | Fließtext, besteht AAA |

WCAG verlangt 4,5:1 für Fließtext und 3:1 für große Schrift. In einer gedämpften Palette leistet der dunkle Anker die ganze Leseaufgabe.

Prüfe deine eigenen Paare mit den Hinweisen unter [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility). Eine gute Gewohnheit ist, die Palette kurz in Graustufen umzuwandeln: Wenn zwei Farben zum selben Grau werden, setze nie eine auf die andere.

## So dämpfst du jede Farbe in CSS

Wenn du schon eine leuchtende Markenfarbe hast und eine ruhigere Begleiterin willst, mische sie mit Grau, statt nach Augenmaß eine neue Farbe zu wählen. `color-mix()` im oklch-Raum hält den Farbton stabil, während die Sättigung fällt, und wird von allen aktuellen großen Browsern unterstützt.

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

Das Mischen Richtung mittleres Grau dämpft, ohne den Farbton zu ändern. In oklch wirkt eine Chroma um 0,03 bis 0,07 gedämpft; ab 0,15 wirkt sie lebhaft.

[OKLCH erklärt](https://gradiently.design/de/guide/oklch-explained) behandelt, warum dieser Raum gleichmäßiger reagiert als HSL, und [Sättigung im Design](https://gradiently.design/de/guide/color-saturation) behandelt, wann du sie wieder aufdrehst.

## Gedämpfte Verläufe und Hintergründe

Gedämpfte Farben ergeben weiche, leise Verläufe, besonders wenn die Stopps im Farbton nah beieinander liegen und das Licht von einer Seite kommt. Füge etwas Körnung hinzu: Kontrastarme Mischungen bekommen leicht Streifen, und Textur lässt sie wie eine Oberfläche statt wie eine Bildschirmeinstellung wirken.

- Salbeimorgen: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Pfirsichstaub: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Hafendunst: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Mauve-Abend: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Vier gedämpfte Verläufe. Jeder behält benachbarte Farbtöne, sodass die Mischung in der Mitte nie braun wird.

Ein gedämpftes Schema verträgt auch eine etwas stärkere Farbe als Akzent, etwa ein Terrakotta unter Salbeitönen oder ein tieferes Petrol unter Grautönen. Beschränke sie auf ein einziges Element pro Design: einen Preis, einen Button, ein Datum. So findet das Auge einen Ruhepunkt, ohne die Ruhe zu brechen, und so funktionieren meist auch die [Erdton-Paletten](https://gradiently.design/de/guide/earth-tone-colors), bei denen sich gedämpfte Schemata bedienen.

Ein Social-Post im Hochformat für eine Keramikkollektion mit dunkler Schrift auf einem weichen, staubigen Hintergrund

Ein Keramik-Post bei 1080×1350. Gedämpfte Farben tragen die Stimmung; die dunkle Schrift trägt die Botschaft.

Wenn deine Marke in gedämpften Farben lebt, leistet ein Hintergrund mit eigener Körnung und eigenem Licht viel von der Arbeit. Ein Gradiently Mark gibt dir eine weiche, eigene Oberfläche, die Text von selbst lesbar hält, was in einem gedämpften Schema wichtiger ist als in jedem anderen.

## FAQ

### Was ist eine gedämpfte Farbpalette?

Eine Palette aus Farben mit verringerter Sättigung, sodass sie weich, staubig und leicht grau wirken. Salbei, Altrosa, Schieferblau und Ton sind gängige Beispiele.

### Was ist der Unterschied zwischen gedämpften und Pastellfarben?

Pastelle entstehen durch Weiß, deshalb bleiben sie hell und klar. Gedämpfte Farben entstehen durch Grau, deshalb können sie jede Helligkeit haben und wirken immer ein wenig staubig.

### Wie dämpfe ich eine Farbe?

Senke ihre Sättigung, mische Grau bei oder füge etwas von ihrer Komplementärfarbe hinzu. In CSS erledigt `color-mix(in oklch, yourcolour 50%, #8c8c8c)` das zuverlässig.

### Welche Farben passen zu Salbeigrün?

Altrosa, Ton, Creme, warmes Grau und ein tiefes Moos oder Anthrazit für Text. Setze keinen Text in Salbei auf Altrosa: Sie sind fast gleich hell.

### Eignen sich gedämpfte Farben fürs Branding?

Sie passen gut zu ruhigen Marken, Handwerk und Wellness. Nimm ein kräftiges Dunkel für Text und Kanten dazu, damit die Palette lesbar bleibt.