Farbverlauf-Design: 25 Ideen für Posts, Folien und Marken

Farbverlauf-Design heißt, Farbmischungen als strukturellen Teil eines Layouts zu nutzen und nicht nur als Hintergrundfüllung. Die Ideen unten geben dem Verlauf jeweils eine Aufgabe: zeigen, trennen, eine Stimmung setzen oder wiedererkannt werden. Sie sind danach gruppiert, wo du sie einsetzt, in Posts, Folien, Marken und im Web, und jede kommt mit dem Layout oder Code zum Ausprobieren.

Wenn du zuerst Farben brauchst, beginne mit Farbverlauf-Kombinationen und komm dann zurück, um zu entscheiden, was du damit machst.

Farbverlauf-Design-Ideen für Social Posts

1. Spotlight-Überschrift. Eine kurze Zeile auf der hellsten Stelle eines radialen Leuchtens. Das Licht sagt den Leuten, wo sie lesen sollen.
2. Ein-Wort-Poster. Ein einziges großes Wort auf einer satten Fläche. Das klappt nur, wenn das Wort den Platz verdient, nimm also ein Verb oder einen Namen.
3. Geteilte Fläche. Zwei Verläufe, die an einer harten Kante aufeinandertreffen, einer für die Überschrift und einer für das Detail. Die Kante wird zur Layoutlinie.
4. Zahlen-Karte. Eine große Zahl auf einem ruhigen Verlauf mit einer Erklärung in einer Zeile. Halte die Fläche leise, damit die Zahl dominiert.

1. Frage-Post. Eine Frage als Überschrift, die Antwort wird in der Bildunterschrift versprochen. Verläufe passen dazu, weil sie offen statt fertig wirken.
2. Zitat auf weicher Fläche. Ein kurzes Zitat auf einem kontrastarmen Verlauf, die Quellenangabe klein. Weichheit wirkt durchdacht, harte Farbe kämpft gegen die Worte.
3. Countdown-Serie. Derselbe Verlauf, jeden Tag ein paar Grad wärmer bis zum Launch. Die Serie wirkt geplant, und die Veränderung baut Vorfreude auf.
4. Duotone-Foto. Ein Foto, abgebildet auf die zwei Endfarben deines Verlaufs, sodass Fotografie und Hintergrund zusammengehören. Siehe Duotone.

Farbverlauf-Design-Ideen für Folien

1. Titelfolie mit Horizont. Ein dunkler oberer Bereich, der in ein helles Band nahe dem unteren Rand übergeht, mit dem Titel knapp darüber. Sie liest sich wie ein Sonnenaufgang und gibt dem Vortrag einen Anfang.
2. Kapitelfolien in Folge. Jede Kapitelfolie nimmt den nächsten Schritt einer Farbtonreise. Man weiß ohne Fortschrittsbalken, wie weit man im Deck ist.
3. Ruhige Datenfolien. Inhalts- und Diagrammfolien nutzen eine fast flache Version desselben Verlaufs, damit die Daten die Farbe tragen. Präsentationshintergründe behandelt den Kontrast für Text.
4. Gespiegelte Schlussfolie. Die letzte Folie dreht den Verlauf der Titelfolie von oben nach unten um. So schließt sich der Kreis auch visuell.
5. Von hell zu dunkel. Beginne hell und ende dunkel oder umgekehrt, wenn dein Vortrag vom Problem zur Antwort führt. Die Farbe unterstützt die Geschichte leise.
6. Rahmen statt Füllung. Ein dünner Verlaufsrahmen um eine neutrale Inhaltsfläche hält eine dichte Folie lesbar und bleibt trotzdem markentreu.

Farbverlauf-Design-Ideen für Marken

1. Ein Signatur-Verlauf und eine Ersatzfarbe. Wähle eine Mischung und eine einfarbige Farbe daraus für Favicons und einfarbigen Druck.
2. Eine Familie für Produktlinien. Behalte Struktur und Winkel bei und gib jeder Linie ihren eigenen Farbton. Die Familie bleibt erkennbar, jedes Produkt bleibt eigenständig.
3. Verlauf nur hinter dem Logo. Nutze den Verlauf an einer Stelle, im Logo-Lockup oder Icon der App, und sonst flache Farbe. Knappheit macht ihn einprägsam.
4. Saisonale Verschiebungen. Verschiebe denselben Verlauf im Sommer etwas wärmer und im Winter kühler, ohne seine Struktur zu ändern.
5. Verlauf als Material. Füge Körnung, einen seidigen Glanz oder Papierstruktur hinzu, damit der Verlauf wie eine Oberfläche wirkt. Textur ist schwerer zu kopieren als Farbe.
6. Gedrucktes. Übertrage den Verlauf auf Karten, Sticker und Verpackung, geplant für Druckfarbe. Farbverläufe drucken erklärt, was sich auf Papier ändert.

Die Markenideen funktionieren nur mit Konsistenz: dieselben Farben, derselbe Winkel und dieselbe Textur in jedem Format. Farbverlauf-Branding zeigt, wie du einen Verlauf besitzt, statt ihn zu leihen.

Farbverlauf-Design-Ideen für Websites und Bewegung

1. Hero-Glow. Ein weiches radiales Leuchten hinter einem Produkt-Screenshot hebt ihn ohne Schlagschatten von der Seite ab.
2. Ein Verlaufswort. Wende einen Verlauf auf ein einzelnes Wort in einer Überschrift an, nie auf den ganzen Absatz. Siehe Verlaufstext.
3. Langsame Drift-Schleife. Ein Hintergrund, der sich so langsam bewegt, dass man es erst nach ein paar Sekunden bemerkt. Er wirkt lebendig, ohne mit den Worten zu konkurrieren.
4. Verlaufsrahmen an Karten. Ein Verlaufsrand von 1 oder 2 Pixeln um sonst flache Karten gibt einer Seite eine Signatur, fast ohne visuelles Gewicht.
5. Farbwechsel beim Scrollen. Jeder Abschnitt einer langen Seite sitzt auf dem nächsten Schritt eines Verlaufs, sodass Scrollen sich anfühlt wie eine Bewegung durch Licht.

.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

So wählst du die richtige Idee

Wähle die Idee, die zur Aufgabe passt, und nutze sie eine Weile konsequent. Ein Verlauf, der sich über zwanzig Posts wiederholt, bewirkt mehr als zwanzig clevere Verläufe, die je einmal vorkommen. Palettenvorschläge für einzelne Branchen findest du unter Farbverlauf-Ideen nach Branche.