# Dunkle Farbpaletten: düstere Codes, die lesbar bleiben

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

Dunkle Paletten wirken edel, wenn sie aus Fast-Schwarz mit einem Hauch Farbe bestehen, und billig, wenn sie reines Schwarz mit Neon sind. Hier sind sechs, die es richtig machen, mit jedem Code.

## The short version

- Eine gute dunkle Farbpalette baut auf einem Fast-Schwarz mit leichtem Farbstich auf, nicht auf reinem #000000.
- Text auf einer dunklen Palette liest sich am besten in einem weichen gebrochenen Weiß, das starken Kontrast ohne die Blendung von reinem Weiß behält.
- Akzentfarben auf dunklem Grund sollten heller und weniger gesättigt sein als auf Weiß, weil kräftige Farben vor Schwarz flimmern.
- Dunkle Oberflächen zeigen Tiefe, indem erhöhte Flächen etwas heller werden, nicht durch Schatten.
- Jede Textfarbe in einer dunklen Palette muss trotzdem eine Kontrastprüfung gegen die Fläche bestehen, auf der sie tatsächlich steht.

Eine **dunkle Farbpalette**, die lesbar bleibt, hat drei Teile: einen fast schwarzen Grund mit einem Hauch Farbe, ein weiches gebrochenes Weiß für Text und ein oder zwei Akzente, die heller und ruhiger sind, als du sie auf Weiß verwenden würdest. Reines Schwarz mit gesättigtem Neon wirkt hart und ermüdet die Augen. Getönte dunkle Töne mit sanften Lichtern wirken bewusst und edel. Die sechs Paletten unten folgen diesem Rezept, mit Hex-Codes zum Kopieren und bereits geprüften Kontrastwerten.

## Sechs dunkle Farbpaletten mit Hex-Codes

Jede Palette hat dieselben fünf Rollen, von links nach rechts: **Grund** (die Seite), **Fläche** (Karten und Panels, eine Stufe heller), **Tiefe** (eine satte mittlere Farbe für Formen und große Flächen), **Akzent** (für Links, Buttons und Hervorhebungen) und **Text**.

### Mitternachtstinte

- Grund #0b0f1a: #0b0f1a
- Fläche #151b2c: #151b2c
- Tiefes Marine #2b3a67: #2b3a67
- Immergrün #8fa3d9: #8fa3d9
- Text #e8e6f0: #e8e6f0

Kühl, ruhig und technisch. Text auf dem Grund liegt bei 15,5:1; der Immergrün-Akzent bei 7,7:1, genug für Links und kleine Beschriftungen.

### Waldnacht

- Grund #0c1410: #0c1410
- Fläche #15231c: #15231c
- Tiefe Kiefer #2f5d46: #2f5d46
- Salbei #9cc5a1: #9cc5a1
- Text #ece7da: #ece7da

Natürlich und leise, gut für Wellness, Outdoor und Foodmarken. Text 15,1:1, Salbei 9,7:1.

### Ochsenblut und Kupfer

- Grund #140a0b: #140a0b
- Fläche #241214: #241214
- Ochsenblut #6b1e26: #6b1e26
- Kupfer #c9855b: #c9855b
- Text #f1e6dc: #f1e6dc

Warm und satt, zu Hause auf Weinkarten, im Theater und bei Abendveranstaltungen. Text 15,9:1, Kupfer 6,5:1.

### Aubergine

- Grund #120b17: #120b17
- Fläche #1e1326: #1e1326
- Pflaume #4a2a63: #4a2a63
- Orchidee #c79ad8: #c79ad8
- Text #f3ecf6: #f3ecf6

Kreativ und nächtlich, eine weichere Alternative zu Neonlila. Text 16,7:1, Orchidee 8,3:1.

### Anthrazit und Glut

- Grund #121212: #121212
- Fläche #1e1e1e: #1e1e1e
- Graphit #3a3a3a: #3a3a3a
- Glut #ff8a3d: #ff8a3d
- Text #ededed: #ededed

Neutrale Grautöne mit einem heißen Akzent, der Klassiker für Apps und Dashboards. Text 16:1, Glut 8:1.

### Tiefes Petrol

- Grund #071a1c: #071a1c
- Fläche #0f2a2d: #0f2a2d
- Tiefes Petrol #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Text #e6f2ef: #e6f2ef

Ozeanisch und gefasst, passend für Finanzen und Gesundheit. Text 15,6:1, Aqua 8,5:1.

Die tiefen Farben jeder Palette sind für Flächen da, nicht für Wörter: Marine auf dem Mitternachtsgrund erreicht zum Beispiel nur etwa 1,7:1. Nutze sie für Formen, Illustrationen und Hintergründe hinter Text in den helleren Farben.

## Dieselben Paletten als dunkle Verläufe

Dunkle Paletten werden lebendig, wenn die tiefe Farbe aus dem Grund leuchtet wie Licht in einem dämmrigen Raum. Diese nutzen nur die Codes oben und passen so genau zu den flachen Paletten. Weitere Techniken findest du in [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) und [düstere Verläufe](https://gradiently.design/de/guide/moody-gradients).

- Mitternachtstinte: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Waldnacht: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Ochsenblut: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Aubergine: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Anthrazit und Glut: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Tiefes Petrol: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Dunkle Verläufe zeigen mehr Streifen als jede andere Art. Gib etwas Körnung dazu und vermeide starke JPEG-Kompression beim Export.

## Regeln für dunkle Paletten, die lesbar sind

### Vermeiden

- Reines #000000 als Grund
- Reines #ffffff für lange Textpassagen
- Voll gesättigte Akzente, die zu flimmern scheinen
- Schlagschatten, um zu zeigen, welche Karte oben liegt
- Dünne, leichte Schrift in kleinen Größen

### Machen

- Ein Fast-Schwarz, getönt in Richtung deines Markenfarbtons
- Ein gebrochenes Weiß, genauso getönt
- Hellere, weichere Versionen der Akzentfarben
- Hellere Flächen für erhöhte Elemente
- Regular- oder Medium-Schnitte, etwas lockerer gesetzt

**Warum kein reines Schwarz?** Schwarz mit reinweißem Text ist der höchste Kontrast, den ein Bildschirm zeigen kann, 21:1, und auf hellen Displays kann das blenden, besonders bei langen Passagen. Ein getöntes Fast-Schwarz bei etwa 15:1 liegt immer noch weit über jeder Barrierefreiheitsschwelle und ist auf Dauer viel angenehmer zu lesen. Außerdem gibt es der Palette eine Temperatur, die reines Schwarz nie hat.

**Warum ruhigere Akzente?** Ein gesättigtes Blau oder Rot, das auf Weiß gut aussieht, scheint auf Schwarz zu glühen und an den Kanten zu zittern. Hebe seine Helligkeit an und senke die Sättigung leicht, wie beim Immergrün und Salbei oben, und es steht still. Prüfe jeden Akzent, den du für Text nutzt, mit einem [Kontrastprüfer](https://gradiently.design/de/guide/color-contrast-accessibility).

## So machst du aus deiner Markenfarbe eine dunkle Palette

Du musst keine der Paletten oben übernehmen. Jede Markenfarbe lässt sich in eine dunkle Palette verwandeln, indem du ihren Farbton behältst und nur Helligkeit und Sättigung änderst. Das geht am besten in einem Format, das beides trennt, etwa [HSL](https://gradiently.design/de/guide/hsl-colors). Hier wird eine Korallen-Markenfarbe, `#e0525d`, zu einem kompletten dunklen Set.

1. **Grund: gleicher Farbton, fast kein Licht** Behalte den Farbton, senke die Sättigung auf etwa 30% und die Helligkeit auf etwa 7%: `#170c0d`. Es liest sich als Schwarz, fühlt sich aber warm an.
2. **Fläche: eine Stufe höher** Hebe die Helligkeit auf etwa 12% und senke die Sättigung ein wenig: `#261718`. Hier liegen Karten und Panels.
3. **Tiefe: ein satter Mittelton für Flächen** Eine Helligkeit um 28% ergibt `#68272d`, ein gedämpftes Weinrot für Formen und Illustration, nie für Text.
4. **Akzent: heller und weicher als die Marke** Hebe die Koralle auf etwa 72% Helligkeit: `#ea868e` erreicht 7,6:1 auf dem Grund, während die ursprüngliche Koralle 5,1:1 schafft und härter wirkt.
5. **Text: ein gebrochenes Weiß mit einer Spur des Farbtons** `#f2e9e9` ergibt 16:1 auf dem Grund und passt still zu allem anderen.

- Grund #170c0d: #170c0d
- Fläche #261718: #261718
- Tiefes Weinrot #68272d: #68272d
- Weiche Koralle #ea868e: #ea868e
- Text #f2e9e9: #f2e9e9

Eine dunkle Palette, abgeleitet aus einer einzigen Koralle. Jede Farbe teilt den Farbton, deshalb wirkt das Set wie eine Marke bei Nacht.

## Eine dunkle Palette in CSS verwenden

Benenne Farben nach ihrer Rolle, damit dieselben Komponenten in hellem und dunklem Theme funktionieren. Das Muster unten legt Mitternachtstinte als dunkles Theme fest und lässt die Systemeinstellung entscheiden. [Dark-Mode-Design](https://gradiently.design/de/guide/dark-mode-design) behandelt die größeren Entscheidungen, etwa Bilder, Rahmen und Diagramme.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }
```

Der Akzent wechselt zwischen den Themes: tiefes Marine auf Hell, Immergrün auf Dunkel. Eine einzige Farbe funktioniert selten auf beiden.

## Dunkle Paletten für Social-Media-Beiträge

Im Feed fällt ein dunkler Beitrag zwischen hellen Fotos auf, aber nur, wenn die Wörter in Handygröße lesbar sind. Halte die Schrift groß, halte den hellsten Teil des Hintergrunds von der Überschrift fern und gib den Wörtern die ruhigste Stelle im Bild.

Ein dunkler Instagram-Beitrag im Hochformat, der eine lange Galerieöffnung ankündigt, mit heller Schrift auf tiefem Hintergrund

Ein dunkler, stimmungsvoller Beitrag, bei dem die Schrift auf dem ruhigsten Teil des Hintergrunds steht und das Leuchten den Wörtern fernbleibt.

Hier hilft ein Gradiently Mark: Er legt seine ruhigste Region mit dem besten Kontrast hinter den Text, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, sodass ein düsterer Hintergrund nie die Überschrift verschluckt. Für dunkle Looks mit satterem, edlem Charakter sieh dir [Luxus-Farbpaletten](https://gradiently.design/de/guide/luxury-color-palettes) und die [Dark-Academia-Ästhetik](https://gradiently.design/de/guide/dark-academia-aesthetic) an.

## FAQ

### Welche Farben gehören in eine dunkle Farbpalette?

Ein getöntes Fast-Schwarz als Grund, eine etwas hellere Flächenfarbe, eine tiefe Mittelfarbe für große Flächen, ein hellerer Akzent und ein weiches gebrochenes Weiß für Text.

### Sollte ich für den Dark Mode reines Schwarz verwenden?

Meist nicht. Ein Fast-Schwarz wie #121212 oder ein getöntes Dunkel wie #0b0f1a mindert die Blendung bei weißem Text und gibt trotzdem sehr hohen Kontrast.

### Welche Textfarbe funktioniert auf dunklem Hintergrund am besten?

Ein weiches gebrochenes Weiß wie #e8e6f0 oder #ededed. Es hält den Kontrast bei etwa 15:1 oder mehr, ohne die Härte von reinem Weiß.

### Warum wirken kräftige Farben auf dunklem Hintergrund falsch?

Gesättigte Farben scheinen vor Schwarz zu flimmern. Nutze für Akzente auf dunklem Grund hellere, etwas weniger gesättigte Versionen.