Rot-Schwarz-Farbverlauf: dramatische Codes ohne Streifen

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.

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.

Sport und Kampfabend

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

Gaming

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

Mode und Luxus

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

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.

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 erklärt die Mechanik.

1. 1

   Feine Körnung hinzufügen

   Eine leichte Rauschebene bricht die Stufen auf. Körnige Verläufe hat ein sofort nutzbares Rezept.

2. 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. 3

   Für Standbilder PNG bevorzugen

   PNG vermeidet die blockigen Artefakte, die JPEG in dunklen, glatten Flächen erzeugt.

4. 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 behandelt die Assoziationen ausführlicher.

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.

CSS für Rot-Schwarz-Verläufe

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

Mehr tiefe Rottöne findest du unter Rote Verläufe und Burgunder-Verläufe. 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.