# Schwarzer Farbverlauf: Design mit Fast-Schwarz

[Canonical HTML page](https://gradiently.design/de/guide/black-gradient)

Reines Schwarz ist ein Loch im Bildschirm. Die schwarzen Farbverläufe, die hochwertig wirken, bestehen aus Fast-Schwarztönen mit ein wenig Farbe darin und einem Licht, das sich bewegt.

## The short version

- Ein schwarzer Farbverlauf ist ein Übergang zwischen Fast-Schwarztönen oder von Schwarz in eine Farbe, der dunklen Designs Tiefe statt flacher Leere gibt.
- Die besten schwarzen Farbverläufe meiden reines #000000 und nutzen getönte Schwarztöne mit einem kleinen Farbanteil, etwa Blauschwarz, warmes Espresso oder Aubergine.
- Dunkle Farbverläufe zeigen leicht Banding, weil zwischen Fast-Schwarzwerten nur wenige Helligkeitsstufen liegen, deshalb brauchen sie meist Körnung oder eine größere Spanne.
- Fließtext auf einem schwarzen Farbverlauf liest sich am besten in einem weichen Off-White, und grauer Nebentext braucht weiterhin ein Kontrastverhältnis von mindestens 4,5:1.
- Schwarze Farbverläufe passen zu Launches, Luxus, Musik, Nachtleben und Dark-Mode-Produkten, wo die dunkle Fläche eine Akzentfarbe leuchten lässt.

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](https://gradiently.design/de/guide/dark-gradient-backgrounds), und für die Grundlagen, wie Übergänge funktionieren, starte bei [was ein Farbverlauf ist](https://gradiently.design/de/guide/what-is-a-gradient).

## 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.

- Reines Schwarz: keine Tiefe: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Getöntes Fast-Schwarz: Tiefe: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Nebeneinander wirkt die getönte Version wie eine Oberfläche, auf die Licht fällt. Das reine Schwarz wirkt wie eine Lücke.

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.

- Tinte: #0b0b10
- Marineschwarz: #0a0e17
- Waldschwarz: #0b120f
- Auberginenschwarz: #120b14
- Espresso: #14100d
- Graphit: #161618

Sechs getönte Schwarztöne. Für sich sehen sie fast gleich aus, nebeneinander und neben Farbe zeigt sich ihre Temperatur.

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](https://gradiently.design/de/guide/color-codes-explained) 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.

- Tintenfall: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Blauschwarzer Scheinwerfer: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Warmes Espresso: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Graphitglanz: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- Schwarz zu Violett: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Schwarz zu Glut: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Schwarz und Gold: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Mitternachtstürkis: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Acht schwarze Farbverläufe, alle kopierbar. Die ersten vier bleiben nah am Neutralen, bei den letzten vier steigt eine Farbe aus dem Dunkel auf.

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](https://gradiently.design/de/guide/gradient-angle).

## 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](https://gradiently.design/de/guide/muddy-gradients).

Violettes Leuchten aus Schwarz: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

Das Violett geht auf dem Weg zu Schwarz durch tiefen Amethyst und Pflaume, sodass der Abfall farbig bleibt statt grau.

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.

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

Die zweite Deklaration gewinnt dort, wo `in oklch` unterstützt wird, und wird sonst ignoriert.

## 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](https://gradiently.design/de/guide/gradient-banding), und dunkle Farbverläufe leiden am meisten darunter.

### Verursacht Banding

- Eine lange, sehr schmale Helligkeitsspanne wie #0a0a0a bis #1a1a1a
- Perfekt neutrale Grautöne, bei denen alle drei Kanäle an derselben Stelle springen
- Einen dunklen Farbverlauf als komprimiertes JPEG exportieren
- Ein kleines Verlaufsbild über einen großen Bildschirm dehnen

### Behebt es

- Eine leichte Ebene aus Körnung oder Rauschen über dem Farbverlauf
- Ein leichter Farbton, sodass Rot-, Grün- und Blaukanal an verschiedenen Stellen springen
- In voller Größe als PNG exportieren oder den Farbverlauf live in CSS rendern
- Eine größere Helligkeitsspanne oder eine kürzere Strecke für den Übergang

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](https://gradiently.design/de/guide/grainy-gradients) behandelt den Look ausführlich, hier ist das minimale CSS.

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

Eine SVG-Rauschebene mit 8 % Deckkraft versteckt die Stufen in einem dunklen Farbverlauf, ohne schmutzig zu wirken.

## 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](https://gradiently.design/de/guide/color-contrast-accessibility).

| Schriftfarbe | Kontrast auf #0b0b10 | Nutze sie für |
| --- | --- | --- |
| `#ffffff` Weiß | 19,6:1 | Kurze Überschriften |
| `#f2efe9` warmes Off-White | 17,1:1 | Überschriften und Fließtext |
| `#a1a1aa` helles Grau | 7,7:1 | Nebentext |
| `#8a8a93` mittleres Grau | 5,7:1 | Bildunterschriften und Labels |
| `#6b6b75` gedämpftes Grau | 3,7:1 | Nur große Schrift, 24 px und mehr |
| `#4a4a52` Anthrazit | 2,2:1 | Dekoration, nie Worte |

Kontrastverhältnisse nach der WCAG-Formel gegen das Tintenschwarz berechnet. Alles unter 4,5:1 ist für normalen Fließtext zu schwach.

Ein Post im Hochformat mit den Worten „Nach Einbruch der Dunkelheit“ in Off-White auf einem tiefen, sanft beleuchteten Fast-Schwarz-Farbverlauf

Eine Fast-Schwarz-Fläche, eine warme Off-White-Zeile und ein einzelner Akzent: das klassische Layout für schwarze Farbverläufe.

## 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.

## FAQ

### Welcher Hex-Code ist für einen schwarzen Farbverlauf am besten?

Starte von einem getönten Fast-Schwarz wie `#0b0b10` (Blauschwarz) oder `#14100d` (warmes Espresso) statt von `#000000` und lass den hellsten Stopp ein paar Stufen höher liegen, etwa bei `#1c1c24`.

### Warum hat mein schwarzer Farbverlauf Streifen?

Zwischen Fast-Schwarzwerten liegen sehr wenige Helligkeitsstufen, deshalb wird jede Stufe zu einem sichtbaren Streifen. Füge eine leichte Körnungsebene hinzu, gib den Schwarztönen einen leichten Farbton oder vergrößere die Helligkeitsspanne.

### Welche Schriftfarbe sieht auf einem schwarzen Farbverlauf am besten aus?

Ein warmes Off-White wie `#f2efe9` liest sich klar und wirkt weicher als reines Weiß. Halte grauen Nebentext bei einem Kontrast von 4,5:1 oder höher.

### Wie mache ich einen Farbverlauf von Schwarz zu einer Farbe, der nicht trüb ist?

Dunkle die Farbe auf dem Weg zu Schwarz entlang ihres eigenen Farbtons ab, etwa Violett durch tiefes Indigo, statt durch Grau zu verblassen. Das Interpolieren in OKLCH in CSS hilft.

### Ist ein schwarzer Farbverlauf gut für den Dark Mode?

Ja, wenn er dezent ist. Dark-Mode-Flächen funktionieren am besten als zwei oder drei getönte Schwarztöne im Abstand weniger Prozent, mit sichtbaren Farbverläufen nur auf großen Hintergrundbereichen.