Schwarzer Farbverlauf: Design mit Fast-Schwarz

Ein schwarzer Farbverlauf ist ein Übergang, der sich zwischen Fast-Schwarztönen bewegt oder von Schwarz in eine Farbe, sodass ein dunkles Design Tiefe und Licht hat statt flacher Leere. Die, die hochwertig aussehen, nutzen fast nie reines #000000. Sie starten von einem getönten Schwarz wie #0b0b10, lassen die Helligkeit sich nur um wenige Prozent ändern und fügen irgendwo in der Fläche eine einzelne Farb- oder Lichtquelle hinzu.

Dieser Artikel gibt dir getönte Schwarztöne, kopierbare Codes für schwarze Farbverläufe, die Lösung für das Banding, das dunkle Übergänge plagt, und Regeln für Text. Zu dunkleren Hintergründen allgemein siehe dunkle Verlaufshintergründe, und für die Grundlagen, wie Übergänge funktionieren, starte bei was ein Farbverlauf ist.

Warum reines Schwarz flach wirkt

#000000 hat keinen Farbton und nirgends etwas Dunkleres, wohin es gehen könnte, ein darauf gebautes Design hat also keine Schatten, nur eine Abwesenheit. Nichts im echten Leben ist so schwarz: ein dunkler Raum, ein Nachthimmel und schwarzer Stoff tragen alle eine Spur Farbe und eine langsame Änderung der Helligkeit. Dein Auge liest diese Änderung als Tiefe.

Es gibt auch einen praktischen Grund. Auf OLED-Bildschirmen schalten sich reine schwarze Pixel komplett ab, und bei manchen Handys brauchen sie einen Moment, um wieder anzugehen, was beim Scrollen dunkler Inhalte einen kurzen Schmierer hinterlassen kann. Deinen dunkelsten Wert ein paar Stufen über null anzuheben vermeidet das und kostet optisch nichts.

Getönte Schwarztöne: die Farben in einem guten Schwarz

Ein getöntes Schwarz ist eine sehr dunkle Farbe, in der noch etwas Sättigung steckt. In HSL halte die Helligkeit zwischen etwa 4 % und 9 % und lass die Sättigung irgendwo zwischen 15 % und 40 % liegen. Der Farbton bestimmt die Stimmung: Blauschwarz wirkt technisch und kühl, warme Brauntöne wirken wie Leder und Kaffee, und Aubergine wirkt wie Abend.

Arbeitest du in OKLCH, lassen sich die Zahlen leichter einordnen: Helligkeit um 15 % bis 20 % und Chroma zwischen 0,005 und 0,025. Tinte oben ist oklch(15.2% 0.011 285), ein Schwarz mit einem Hauch Blau. Unser Artikel über Farbcodes erklärt, wie du diese Werte liest.

Codes für schwarze Farbverläufe zum Kopieren

Jeder davon hält seinen dunkelsten Wert über reinem Schwarz und ändert die Helligkeit sanft. Nutze sie als vollflächige Hintergründe, Header-Bereiche oder Folienuntergründe und wähle den, dessen Temperatur zu deiner Akzentfarbe passt.

Die Richtung zählt auf Schwarz mehr als irgendwo sonst, weil sonst so wenig passiert. Licht, das von oben fällt, wirkt natürlich und ruhig. Licht, das aus einer unteren Ecke aufsteigt, wirkt wie ein Glühen, wie von einem Bildschirm oder einer Flamme, und zieht den Blick in diese Ecke. Mehr dazu in Winkel bei Farbverläufen.

Farbverläufe von Schwarz zu einer Farbe

Die eindrucksvollsten schwarzen Farbverläufe lassen eine Farbe aus dem Dunkel auftauchen. Zwei Regeln halten sie satt. Erstens gib der Farbe nicht mehr als ein Drittel der Fläche, damit Schwarz die Hauptnote bleibt. Zweitens dunkle die Farbe entlang ihres eigenen Farbtons Richtung Schwarz ab, statt durch Grau zu verblassen: Ein Violett sollte auf dem Weg nach unten durch tiefes Indigo gehen, nicht durch Anthrazit. Eine graue Mitte ist die häufigste Ursache für trübe Farbverläufe.

Moderne Browser können einen Teil davon für dich erledigen. Das Interpolieren in OKLCH hält die Chroma der Farbe durch die dunkleren Stopps lebendig, und eine schlichte Rückfallzeile deckt ältere Browser ab.

.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}

So stoppst du Banding in dunklen Farbverläufen

Bildschirme zeigen meist 256 Stufen pro Farbkanal. Ein Farbverlauf von #0a0a0a nach #1a1a1a hat nur 16 dieser Stufen zur Verfügung, bei einem 1920 Pixel breiten Header ist also jede Stufe etwa 120 Pixel breit, und du siehst Streifen. Das ist Gradient Banding, und dunkle Farbverläufe leiden am meisten darunter.

Körnung ist die verlässlichste Lösung, denn sie zerlegt die harte Kante jeder Stufe in Textur, die das Auge wieder zusammenfügt. Ein paar Prozent Deckkraft genügen. Körnige Farbverläufe behandelt den Look ausführlich, hier ist das minimale CSS.

.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Text und Farbe auf einem schwarzen Farbverlauf

Schwarze Untergründe lassen fast jeden hellen Text den Kontrast bestehen, das Risiko verschiebt sich also auf deinen Nebentext. Mittlere Grautöne, die auf einem hellen Monitor gut aussehen, können unter das Minimum von 4,5:1 für Fließtext fallen. Auch reines Weiß hat einen Preis: Manche Leser finden helles Weiß auf Fast-Schwarz bei langen Passagen grell, ein warmes Off-White ist also freundlicher und liest sich trotzdem klar. Die vollständigen Regeln stehen in Farbkontrast.

Wo schwarze Farbverläufe am besten funktionieren

• Launches und Enthüllungen, bei denen eine dunkle Fläche ein Produkt oder eine Überschrift beleuchtet wirken lässt
• Luxus, Parfüm und Schmuck, kombiniert mit einem Metallakzent wie #c9a96e
• Musik, Nachtleben und Events, mit einer gesättigten Farbe, die aus einer Ecke aufsteigt
• Tech- und Entwicklerprodukte, bei denen Blauschwarz präzise wirkt
• Dark-Mode-Oberflächen, mit zwei oder drei getönten Schwarztönen als Flächenebenen
• Fotografie-Portfolios, bei denen ein ruhiger schwarzer Rahmen die Bilder die Farbe tragen lässt

In Gradiently kannst du im Markt Marks nach Farbwörtern wie „Fast Schwarz“ oder „Schwarz und Gold“ durchsuchen, und jeder Mark bringt schon Körnung und Licht mit, sodass die oben genannten Banding- und Flachheitsprobleme erledigt sind, bevor du anfängst.