Farbe

Roter Farbverlauf: Energie ohne Alarmstimmung

Rot zieht schneller Aufmerksamkeit als jede andere Farbe, und genau deshalb geht es oft schief. So baust du rote Farbverläufe, die lebendig, warm und selbstbewusst wirken statt laut.

GradientlyVerifiziertes Gradiently-Konto··5 Min. Lesezeit
Cover: Sleeping Reef · GR·B86W·WH

Die Kurzfassung

  • Ein roter Farbverlauf ist ein Übergang aus Rottönen wie Karmesin, Scharlach, Ochsenblut oder Koralle, gedacht für Designs, die Wärme und Dringlichkeit brauchen.
  • Rote Farbverläufe sehen am besten aus, wenn nur ein Stopp voll gesättigt ist und die anderen zu tieferem Weinrot oder wärmerem Orange und Pink wandern.
  • Reines #ff0000 mit weißem Text hat ein Kontrastverhältnis von 4:1 und liegt damit unter dem Minimum von 4,5:1 für normalen Fließtext.
  • Hält man Rot neben seinen warmen Nachbarn statt neben gesättigtem Blau, vermeidet man das Flimmern und die Alarmwirkung, die rote Designs hart wirken lassen.
  • Tiefe Rottöne wie Ochsenblut und Weinrot wirken hochwertig und ruhig, helles Scharlach und Koralle wirken energisch und verspielt.
Auf dieser Seite

Ein roter Farbverlauf ist ein Übergang rund um Rot, von hellem Scharlach und Karmesin bis zu tiefem Ochsenblut und weicher Koralle, und er ist der energischste Farbverlauf, den du auf einen Bildschirm bringen kannst. Der Trick ist Zurückhaltung: Lass einen Stopp die volle Sättigung tragen, führ den Rest zu tieferem Weinrot oder wärmerem Orange und Pink, und halte Rot von den Stellen fern, an denen Leute Warnungen erwarten. So eingesetzt wirkt Rot wie Wärme und Appetit statt wie eine Fehlermeldung.

Unten findest du drei rote Paletten, neun rote Farbverläufe zum Kopieren, die Kontrastwerte für Text auf Rot und die Einsatzfelder, in denen Rot am besten wirkt. Wie Farben überhaupt Bedeutung tragen, erklärt Farbpsychologie.

Warum Rot schwieriger ist, als es aussieht

Rot ist aus mehreren Gründen gleichzeitig laut. Bildschirmrot erreicht eine sehr hohe Sättigung und dominiert alles daneben. Oberflächen haben Leuten beigebracht, es als Gefahr zu lesen: Fehlerzustände, Löschen-Buttons, niedriger Akku und Badges für Ungelesenes sind fast immer rot. Und helles Rot direkt neben gesättigtem Blau kann zu flimmern scheinen oder in einer anderen Tiefe zu liegen, ein Effekt namens Chromostereopsis, der Text in dieser Kombination anstrengend zu lesen macht.

Wirkt wie Alarm

  • Flaches #ff0000, das die ganze Fläche füllt
  • Roter Text oder rote Rahmen auf weißer Seite ohne andere warme Farbe
  • Rot direkt neben gesättigtem Blau
  • Rot für die Marke und zugleich für Fehlermeldungen

Wirkt wie Energie

  • Ein heller roter Stopp, der in tiefes Weinrot oder Ochsenblut fällt
  • Rot gemischt mit seinen warmen Nachbarn Orange und Pink
  • Rot auf dunklem, warmem Grund mit weichem Off-White für Text
  • Eine eigene, klar andere Farbe für Fehler

Drei rote Paletten: Karmesin, Ochsenblut und Koralle

Die meisten gelungenen roten Farbverläufe stammen aus einer von drei Familien. Karmesin neigt leicht ins Blaue und wirkt kühn und klassisch. Ochsenblut und Weinrot sind tiefe, dunkle Rottöne, die an Leder, Samt und Rotwein erinnern. Koralle ist Rot, das Richtung Orange und Pink angehoben ist, weicher und freundlicher. Wähle eine Familie, bevor du einen Verlauf wählst, denn alle drei in einem Übergang sehen meist schlammig aus.

Karmesin oben, Ochsenblut und Weinrot für Tiefe, Koralle und Zartrosa für Helligkeit. Jede Familie ergibt ihre eigene Art von rotem Farbverlauf.

Rote Farbverläufe zum Kopieren

Jeder dieser Verläufe hält Rot als Hauptton, unterscheidet sich aber in Temperatur und Tiefe. Die dunkleren taugen als ganze Hintergründe, die helleren passen besser zu Buttons, Badges, Karten und kurzen Aufmerksamkeitsmomenten.

Neun rote Farbverläufe von hell bis tief. Jeder läuft nur durch warme Nachbarn oder tiefere Rottöne, nie durch Grau.

Achte darauf, was die Codes gemeinsam haben. Der helle Stopp sitzt an einem Ende oder an einem Punkt, nie über die ganze Fläche. Die dunklen Stopps sind dunkle Rottöne, nicht Schwarz oder Grau, also behält der Übergang seine Farbe, während er abfällt. Wird ein roter Farbverlauf in der Mitte braun, hast du ihn wahrscheinlich Richtung Grün oder Grau gemischt, unser Leitfaden zu schlammigen Farbverläufen erklärt, warum.

So zügelst du die Intensität von Rot

  1. 1

    Wähle einen hellen Stopp

    Entscheide, wo das gesättigtste Rot sitzt, meist nahe einer Überschrift oder dem Blickpunkt. Alles andere nimmt davon ausgehend in Helligkeit oder Sättigung ab.

  2. 2

    Gib ihm dunkle Nachbarn

    Tiefe Rottöne wie #7f1d1d und #4a0e0e bringen den hellen Stopp durch Kontrast zum Leuchten, so wie eine einzelne Kohle in einem dunklen Feuer glüht.

  3. 3

    Misch Richtung warme Farben

    Orange, Koralle und Pink liegen im Farbkreis neben Rot, also gehen sie sauber ineinander über. Warum Nachbarn sich immer vertragen, zeigt analoge Farben.

  4. 4

    Gib Rot nur einen Anteil am Design

    Rot ist von Natur aus eine Akzentfarbe. Auch in einem rot geführten Design hilft eine große ruhige Fläche, die 60-30-10-Regel ist ein gutes Startverhältnis.

  5. 5

    Gib Fehlern eine andere Farbe

    Ist deine Marke rot, gestalte Fehlermeldungen klar anders, etwa mit einem Icon plus einem dunkleren oder ins Orange neigenden Rot, damit eine Warnung nie wie Werbung aussieht.

Text auf einem roten Farbverlauf

Rot liegt für Text in einer unbequemen Mitte. Reines Bildschirmrot ist zu dunkel für angenehmen schwarzen Text und zu hell, damit weißer Text das Minimum für Fließtext erreicht. Die Lösung: Mach den Hintergrund dunkler, wenn du weiße Schrift willst, oder heller, wenn du dunkle Schrift willst, und prüfe die hellste Stelle des Verlaufs, die hinter deinen Worten liegt.

HintergrundTextKontrastUrteil
#ff0000 reines RotWeiß4,0:1Nur für großen Text
#dc2626 RotWeiß4,8:1Reicht für Fließtext
#b91c1c tiefes KarmesinWeiß6,5:1Angenehm
#7f1d1d Ochsenblut#fff1f0 Off-White9,1:1Ausgezeichnet
#ff6f61 KoralleWeiß2,7:1Fällt durch
#ff6f61 Koralle#1a0505 Fast-Schwarz7,2:1Ausgezeichnet
Verhältnisse nach der WCAG-Formel berechnet. 4,5:1 ist das Minimum für normalen Text und 3:1 für großen Text. Details unter Farbkontrast.

Die Überschrift liegt über dem tiefsten Teil des Rots, wo weiße Schrift angenehm ist.

Dasselbe Rot in einer Story, der helle Stopp bleibt von den Worten fern.

Wo rote Farbverläufe am besten wirken

Rot gehört dorthin, wo Energie und Appetit der Punkt sind. Es ist verbreitet bei Essen und Trinken, Sport, Unterhaltung und Rabattaktionen sowie in festlichem Design. In der chinesischen Tradition steht Rot stark für Glück und Feiern, deshalb führt es das Design zum Mondneujahr an. Bedeutungen unterscheiden sich zwischen Kulturen, prüfe deine unter Farbbedeutungen weltweit.

  • Essen, Cafés und Restaurants: Verläufe in Koralle und Terrakotta wirken warm und appetitlich
  • Sport und Fitness: Karmesinfeuer und Scharlach zu Weinrot tragen Tempo und Anstrengung
  • Mode und Beauty: Ochsenblut, Weinrot und Zartrosa wirken durchdacht und hochwertig
  • Sales und Launches: Ein heller Stopp auf tiefroter Fläche zieht den Blick, ohne zu schreien
  • Musik und Nachtleben: Rot zu Schwarz und Kirschleuchten passen zu dunklen, beleuchteten Räumen

Willst du Rot, ohne es für jedes Format neu zu bauen, kannst du im Markt von Gradiently Marks mit Worten wie „tiefes Rot“ oder „Koralle“ suchen. Jeder Mark schiebt seine ruhigste Stelle hinter deine Worte und löst damit das Problem mit Text auf Rot von oben für dich.

Häufige Fragen

Welche Farben passen in einem Farbverlauf gut zu Rot?

Seine warmen Nachbarn gehen am saubersten über: Orange, Koralle, Pink und tiefes Weinrot. Mischt man Rot Richtung Grün oder Grau, wird die Mitte meist braun.

Kann man weißen Text auf einen roten Hintergrund setzen?

Ja, wenn das Rot tief genug ist. Weiß auf #dc2626 erreicht 4,8:1 und reicht für Fließtext, Weiß auf reinem #ff0000 nur 4:1, also nutze es nur für großen Text.

Welchen Hex-Code hat ein dunkelroter Farbverlauf?

Probier linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%), einen Übergang in Ochsenblut, der von Anfang bis Ende rot bleibt.

Warum wirkt mein roter Farbverlauf aggressiv?

Meist, weil die ganze Fläche voll gesättigtes Rot ist. Behalte einen hellen Stopp, lass den Rest in tiefere Rottöne fallen und setz Rot nicht direkt neben gesättigtes Blau.

Diesen Artikel teilen

Geschrieben von GradientlyVerifiziertes Gradiently-Konto

Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.

Unser Profil ansehen