Dunkle Farbpaletten: düstere Codes, die lesbar bleiben

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

Waldnacht

Ochsenblut und Kupfer

Aubergine

Anthrazit und Glut

Tiefes Petrol

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 und düstere Verläufe.

Regeln für dunkle Paletten, die lesbar sind

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.

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. Hier wird eine Korallen-Markenfarbe, #e0525d, zu einem kompletten dunklen Set.

1. 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. 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. 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. 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. 5

   Text: ein gebrochenes Weiß mit einer Spur des Farbtons

   #f2e9e9 ergibt 16:1 auf dem Grund und passt still zu allem anderen.

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 behandelt die größeren Entscheidungen, etwa Bilder, Rahmen und Diagramme.

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

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.

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 und die Dark-Academia-Ästhetik an.