# Rot-Schwarz-Farbverlauf: dramatische Codes ohne Streifen

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

Rot vor Schwarz ist die dramatischste Paarung der Farbwelt. Sie kann wie ein Kinofoyer, ein Boxkampf oder ein Horrorplakat wirken. Diese Codes geben dir das Drama und lassen dir die Kontrolle.

## The short version

- Ein Rot-Schwarz-Farbverlauf lässt ein Rot wie #dc2626 oder #b91c1c in fast Schwarz auslaufen, meist über ein tiefes Blutrot wie #450a0a.
- Wer Rot über dunkles Karmesin ausblendet statt direkt zu Schwarz, hält den Übergang satt und vermeidet ein braunes oder graues Band.
- Rot-Schwarz-Verläufe bekommen in komprimierten Bildern und Videos stark Streifen, füge also Körnung hinzu und meide große, glatte, kontrastarme Flächen.
- Weiße Schrift liest sich gut auf tiefem Rot und Schwarz, während gesättigte mittlere Rottöne große, fette Schrift brauchen, damit Weiß funktioniert.
- Das Paar passt zu Film, Sport, Gaming, Mode, Nachtleben und Halloween und wirkt am besten mit einer starken Lichtquelle statt gleichmäßig verteiltem Rot.

Ein **Rot-Schwarz-Farbverlauf** lässt ein leuchtendes Rot wie `#dc2626` oder ein tieferes Karmesin wie `#b91c1c` in fast Schwarz auslaufen, idealerweise über ein Blutrot wie `#450a0a`, damit der Übergang satt bleibt. Nur wenige Paarungen sind so dramatisch: Rot zieht die Aufmerksamkeit auf sich, und Schwarz lässt ihm keine Konkurrenz. Hier findest du Rot-Schwarz-Codes für fünf Arten von Drama, wie du Streifenbildung verhinderst und welche Textfarben funktionieren.

## So blendest du Rot in Schwarz aus, ohne dass es braun wird

Der häufige Fehler ist, reines Rot in nur zwei Stopps direkt in reines Schwarz zu mischen. Die Mitte dieser Mischung ist ein trübes braunes Rot, das schmutzig statt dunkel wirkt. Gehe stattdessen über dunklere Rottöne und nimm ein Schwarz mit einer Spur Rot, damit der Schatten zur selben Familie gehört wie das Licht.

- Knochenweiß: #fef2f2
- Signalrotes Licht: #f87171
- Scharlach: #ef4444
- Rot: #dc2626
- Karmesin: #b91c1c
- Oxid: #7f1d1d
- Blut: #450a0a
- Schwarz: #0a0a0a

Eine Reihe von Rot zu Schwarz, mit einem Knochenweiß für Schrift. Nimm in jedem Verlauf drei oder vier benachbarte Farbfelder.

- Zwei Stopps: trübe Mitte: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Gestuft: durchgehend satt: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

Dasselbe Rot und dieselbe Dunkelheit. Die gestufte Version geht über Karmesin und Blutrot statt über Braun.

## Rot-Schwarz-Codes für fünf Arten von Drama

### Kino und Thriller

Überwiegend Schwarz, mit Rot als einzelnem Licht von der Seite, wie ein Notausgangsschild in einem dunklen Raum. Still und angespannt.

- Seitenlicht: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)`
- Roter Rand: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)`

### Sport und Kampfabend

Heißes Rot, das von unten aufsteigt, als wäre der Boden der Arena beleuchtet. Laut, körperlich und dringlich.

- Arenaboden: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)`
- Aufsteigende Hitze: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)`

### Gaming

Scharfe Diagonalen und harte Stopps, näher an einer Grafik als an einem Glühen. Diese wirken schnell und aggressiv.

- Harte Teilung: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)`
- Scanline-Muster: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)`

### Mode und Luxus

Tiefes Karmesin und Lackschwarz, fast ohne leuchtendes Rot. Denk an eine Lackschatulle oder ein rotes Seidenfutter: poliert, hochwertig und kontrolliert.

- Lack: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)`
- Karmesinsamt: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)`

### Halloween und Horror

Rot, das sich am unteren Rand sammelt oder aus den Ecken sickert. Sparsam eingesetzt ist es wirklich unheimlich; übertreibst du, sieht es nach Kostümladen aus.

- Lache: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)`
- Rote Vignette: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)`

Zehn Codes für fünf Stimmungen. In jedem nimmt Rot eine Region ein, und Schwarz hält den Rest. [Halloween-Grafiken](https://gradiently.design/de/guide/halloween-graphics) hat weitere saisonale Ideen.

## Warum Rot-Schwarz-Verläufe Streifen bekommen und wie du sie verhinderst

Dunkle, glatte Verläufe haben sehr wenige unterscheidbare Abstufungen, deshalb brechen sie in sichtbare Stufen, besonders nachdem eine App sie neu komprimiert hat. Gesättigtes Rot verschlimmert das im Video, weil die meisten Videoformate Farbe in geringerer Auflösung speichern als Helligkeit und rote Kanten verschmieren. [Streifenbildung bei Verläufen](https://gradiently.design/de/guide/gradient-banding) erklärt die Mechanik.

1. **Feine Körnung hinzufügen** Eine leichte Rauschebene bricht die Stufen auf. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) hat ein sofort nutzbares Rezept.
2. **In voller Größe exportieren** Lade in der Größe der Plattform hoch, etwa 1080×1350 für einen Instagram-Post, damit nicht zweimal skaliert und komprimiert wird.
3. **Für Standbilder PNG bevorzugen** PNG vermeidet die blockigen Artefakte, die JPEG in dunklen, glatten Flächen erzeugt.
4. **Im Video etwas Textur behalten** Ein perfekt glatter roter Verlauf ist das Schwierigste für einen Videoencoder. Etwas Bewegung oder Körnung übersteht ihn weit besser.

## Wie viel Rot zu Schwarz passt

Rot trägt starke Assoziationen: Gefahr, Hitze, Leidenschaft, Dringlichkeit und vielerorts Glück und Feier. Neben Schwarz werden diese Bedeutungen lauter, deshalb entscheidet das Verhältnis, ob ein Design dramatisch oder alarmierend wirkt. [Bedeutung der Farbe Rot](https://gradiently.design/de/guide/red-color-meaning) behandelt die Assoziationen ausführlicher.

### Alarmierend

- Rot gleichmäßig über den ganzen Rahmen verteilt
- Leuchtendes Rot hinter kleiner weißer Schrift
- Rot, Schwarz und eine dritte laute Farbe
- Rotes Glühen auf jedem Wort

### Dramatisch

- Schwarz hält den Großteil des Rahmens, Rot in einer Region
- Tiefes Karmesin hinter Schrift, leuchtendes Rot ferngehalten
- Rot, Schwarz und ein ruhiges Knochenweiß
- Schlichte Schrift, das Licht übernimmt die Arbeit

## Textfarben auf Rot und Schwarz

Am schwarzen Ende liest sich fast alles Helle. Am roten Ende kommt es darauf an, wie tief das Rot ist. Leuchtendes Scharlach ist heller, als man denkt, weiße Schrift sollte dort also groß und fett sein. Die Verhältnisse nutzen die WCAG-Formel, bei der 4,5:1 das Ziel für kleine Schrift ist.

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Schwarz `#0a0a0a` | Knochenweiß `#fef2f2` | 18,1:1 | Ausgezeichnet |
| Schwarz `#0a0a0a` | Scharlach `#ef4444` | 5,3:1 | Gut für Überschriften in Rot |
| Scharlach `#ef4444` | Weiß | 3,8:1 | Nur große, fette Schrift |
| Rot `#dc2626` | Weiß | 4,8:1 | Gut |
| Karmesin `#b91c1c` | Weiß | 6,5:1 | Gut |
| Oxid `#7f1d1d` | Weiß | 10,0:1 | Ausgezeichnet |

Rote Schrift auf Schwarz ist lesbar, bleibt aber Überschriften vorbehalten; lange Passagen in gesättigtem Rot ermüden beim Lesen.

Ein Kampfabend-Plakat im Hochformat mit weißer Schrift auf Schwarz, mit rotem Licht, das vom unteren Rand aufsteigt

Ein Post eines Boxstudios mit Rot, das vom Boden aufsteigt, und knochenweißer Schrift darüber.

Eine vertikale Kino-Story mit blasser Schrift auf Schwarz, von einer Seite mit tiefrotem Glühen beleuchtet

Eine Kino-Story, beleuchtet von einem einzelnen roten Seitenlicht.

## CSS für Rot-Schwarz-Verläufe

```css
.drama {
  background-color: #0a0505;
  background-image:
    radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%);
  color: #fef2f2;
}

.split {
  background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%);
}
```

Ein dunkler Bereich, von unten rot beleuchtet, und eine harte diagonale Teilung. Zwei Stopps an derselben Position ergeben eine scharfe Kante.

Mehr tiefe Rottöne findest du unter [Rote Verläufe](https://gradiently.design/de/guide/red-gradient) und [Burgunder-Verläufe](https://gradiently.design/de/guide/maroon-gradient). Wenn Rot und Schwarz zentral für deine Marke ist, sichere dir einen Gradiently Mark, und niemand sonst kann ihn exportieren. Er wird in jeder Größe vom Story-Format bis zum Stream-Banner gerendert und legt seine ruhigste dunkle Region automatisch hinter deine Worte.

## FAQ

### Was ist ein guter Code für einen Rot-Schwarz-Farbverlauf?

Ein satter ist `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Er geht über Karmesin und Blutrot, statt braun zu werden.

### Warum sieht mein Verlauf von Rot zu Schwarz braun aus?

Eine Mischung aus nur zwei Stopps von reinem Rot zu reinem Schwarz geht durch ein trübes braunes Rot. Füge Stopps in Karmesin und Blutrot hinzu und nimm ein Schwarz mit einer Spur Rot.

### Welche Textfarbe passt auf einen Rot-Schwarz-Farbverlauf?

Weiß oder ein warmes Knochenweiß liest sich gut auf Schwarz und auf tiefem Rot. Auf leuchtendem Scharlach nimm Weiß nur in großer, fetter Schrift.

### Wie mache ich einen Rot-Schwarz-Hintergrund mit harter Teilung in CSS?

Setze zwei Stopps an dieselbe Position: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` erzeugt eine scharfe diagonale Kante.

### Wie verhindere ich Streifenbildung in einem dunkelroten Verlauf?

Füge feine Körnung hinzu, exportiere in der Größe der Plattform und nimm PNG für Standbilder. Dunkle, glatte Rotverläufe bekommen mehr Streifen als fast jeder andere Verlauf.