Dunkle Farbverlauf-Hintergründe: Tiefe statt Düsternis

Ein guter dunkler Farbverlauf-Hintergrund ist ein getöntes Fast-Schwarz, aus dem eine Farbe herausglüht, als brennte in einem dunklen Raum ein einzelnes Licht. Die Tönung gibt den Schwarztönen Tiefe, die Lichtfarbe gibt dem Auge ein Ziel, und die große dunkle Fläche lässt weiße Schrift scharf wirken. Ohne diese drei Dinge sieht ein dunkler Farbverlauf nur wie ein gedimmter Bildschirm aus.

Beginne mit einem getönten Fast-Schwarz

Reines Schwarz #000000 ist eine Sackgasse: Es gibt nichts, wovon aus sich blenden ließe, und jede Farbe daneben wirkt aufgeklebt. Ein Fast-Schwarz mit einem Hauch Farbton gibt dem Farbverlauf eine Familie, zu der er gehört. Blauschwarz wirkt kühl und technisch, Violettschwarz luxuriös, Grünschwarz natürlich, und warme Brauntöne erinnern an Leder und Holz. Wähle die Tönung passend zur Farbe, die du beleuchten willst.

Füge eine Lichtfarbe hinzu

Die Lichtfarbe macht aus Dunkelheit Atmosphäre. Setze sie außermittig, meist nahe einem Rand oder einer Ecke, damit sie als Lichtquelle liest. Halte sie in derselben Familie wie die Tönung: violettes Licht auf Violettschwarz, Türkis auf Blauschwarz. Eine Farbe reicht fast immer. Zwei können funktionieren, wenn sie Nachbarn sind. Mehr sieht schnell nach Nachtclub aus, was in Ordnung ist, wenn du für einen gestaltest, siehe Neon-Farbverläufe.

Warum manche dunklen Farbverläufe düster wirken

Der häufigste Fehler ist, die Lichtfarbe auf dem Weg zu Schwarz ins Graue zu mischen. Halte die Buntheit beim Abdunkeln hoch: Violett sollte zu tieferem Violett werden, dann zu Violettschwarz, nie zu Grau. Das Mischen in OKLCH hilft, warum, erklärt trübe Farbverläufe.

Banding: das größte Risiko dunkler Farbverläufe

Dunkle Farbverläufe umfassen nur einen kleinen Wertebereich, oft ein bis zwei Dutzend Stufen pro Kanal, und Menschen reagieren sehr empfindlich auf kleine Stufen zwischen dunklen Tönen. Ein sanfter dunkler Verlauf über einen ganzen Bildschirm ist also das perfekte Rezept für sichtbare Streifen. Drei Gewohnheiten verhindern es: dem Verlauf genug Spanne geben, feine Körnung hinzufügen und ohne starke Kompression exportieren. Die Details stehen in Banding im Farbverlauf und körnigen Farbverläufen.

Text auf einem dunklen Farbverlauf

Dunkle Hintergründe sind großzügig zu Schrift, aber nur in den dunklen Bereichen. Halte Wörter von der Lichtfarbe fern, wo der Kontrast sinkt. Nimm für lange Passagen gebrochenes Weiß statt reinem Weiß, denn reines Weiß auf Fast-Schwarz kann grell wirken. Und miss nach: WCAG verlangt mindestens 4,5:1 für Fließtext und 3:1 für große Schrift, was du mit dem WebAIM-Kontrastprüfer prüfen kannst.

Wo dunkle Farbverlauf-Hintergründe am besten funktionieren

Dunkle Farbverläufe passen zu allem, was nachts passiert, edel wirkt oder Farbe zum Leuchten braucht: Musik und Events, Film und Games, Technik-Launches, Parfüm und Spirituosen und Portfolios, in denen die Arbeit das Hellste auf der Seite sein soll. Sie helfen auch bei Produktfotografie, weil ein beleuchtetes Objekt auf dunklem Grund kostbar wirkt.

• Cover und Poster: Ein dunkler Grund macht einen einzelnen hellen Titel zum Star
• Stories und Reels: Vollbild-Frames in Dunkel wirken auf dem Handy filmisch
• Folien: Heller Text auf Dunkel ist in einem abgedunkelten Raum ruhiger als dunkler Text auf Weiß
• Website-Header: Ein dunkler Header lässt den ersten Bildschirm bewusst gestaltet wirken, siehe Website-Hero-Hintergründe

Weniger gut passen sie dort, wo Menschen lange auf Papier lesen oder wo eine Marke auf Tageslicht, Frische oder Spiel baut. Dort leistet ein heller Grund mit einer weichen Farbe dasselbe.

Ein dunkler Farbverlauf-Hintergrund in CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Wenn du eine ganze Oberfläche im Dark Mode gestaltest statt nur einen Hintergrund, siehe Dark-Mode-Design. Viele Marks im Markt basieren auf dunklen Gründen und schaffen automatisch Platz für deine Wörter, indem sie ihren ruhigsten Bereich hinter den Text legen.