Retro-Farbverläufe: von 70er-Sonnenuntergängen bis 90er-Screens

Ein Retro-Farbverlauf ist ein Farbübergang, der sofort an ein Jahrzehnt erinnert. Die 70er hatten warme Streifen aus Senfgelb, Orange, Rost und Braun. Die 80er hatten Neonpink und Cyan auf Schwarz und knalligen Pastell-Pop. Die 90er hatten Petrol und Lila, tiefe Edelsteintöne und die Leisten von Marineblau zu Blau früher Desktop-Software. Unten findest du für jedes Jahrzehnt eine Palette und Farbverläufe zum Kopieren, danach eine Methode, sie zu modernisieren, damit sie wie eine Referenz wirken und nicht wie ein Kostüm.

Retro funktioniert, weil Farbe Erinnerung trägt. Leute erkennen ein Jahrzehnt an seiner Palette, lange bevor ihnen Schrift oder Layout auffallen, und das macht diese Farbverläufe zu einer Abkürzung zu einer Stimmung. Die längere Geschichte, wie Farbverläufe durchs Design gewandert sind, erzählt die Geschichte der Farbverläufe.

Farbverläufe der 70er: Sonnenuntergangsstreifen in Orange und Braun

Die Palette der 70er ist warm und erdig: Erntegold, gebranntes Orange, Rost und ein tiefes Schokobraun, dazu Avocadogrün als Außenseiter und Creme als Grund. Ihr Markenzeichen ist der Streifen: vier oder fünf Farbbänder, gestapelt wie ein Sonnenuntergang, mit harten Kanten statt weichem Übergang.

Weiche Übergänge aus denselben Farben wirken sanfter und passen besser zu Fotos oder langem Text als Streifen. Bleib in der warmen Familie, dann werden sie nie schlammig, weil jeder Schritt ein enger Nachbar des vorigen ist. Für weichere warme Himmel siehe Sonnenuntergangs-Farbverläufe.

Farbverläufe der 80er: Neonnächte und Pastell-Pop

Die 80er brachten zwei sehr unterschiedliche Looks. Der eine ist die Neonnacht: Magenta und Cyan, die auf Schwarz leuchten, Chromschrift und Gitter, inspiriert von Filmen und Arcade-Spielen der Zeit. Der andere ist knalliger, verspielter Pastell-Pop: Pink, Petrol, Kanariengelb und Flieder, oft mit schwarzen Kringeln und geometrischen Formen. Unser Leitfaden zu Vaporwave-Farben behandelt die Neonnacht ausführlich, samt CSS-Sonnenuntergang und Gitter.

Farbverläufe der 90er: Petrol, Lila und Titelleisten-Blau

Die Farben der 90er sind kühler und digitaler. Petrol war überall, oft mit Lila und Magenta auf Trikots, Verpackungen und frühen Webseiten. Desktop-Software brachte den Verlauf von Marineblau zu hellem Blau in Fenstertitelleisten, einer der ersten Farbverläufe, die viele Menschen auf einem Bildschirm sahen. Später im Jahrzehnt kamen durchscheinende Kunststoffe in Petrol und im Druck tiefere Edelsteintöne wie Jagdgrün, Burgunder und Pflaume.

Die Jahrtausendwende ist eine eigene Geschichte: Silber, schillernd und blubbernd. Dieser Look hat einen eigenen Leitfaden, die Y2K-Ästhetik, und passt natürlich zu holografischen Farbverläufen.

Retro-Farbverläufe nach Jahrzehnt im Überblick

So modernisierst du einen Retro-Farbverlauf

Ein exakt kopierter Retro-Farbverlauf kann wie ein Faschingskostüm aussehen. Modernes Retro behält die Palette, die Leute erkennen, und ändert die Oberfläche: weichere Kanten, etwas ruhigere Farbe und eine Textur, die nach Druck statt nach flachem Bildschirm wirkt.

1. 1

   Behalte die Palette, mach die Kanten weicher

   Gib jedem Streifen einen kurzen Übergang von 3 bis 4 % statt eines harten Stopps. Er liest sich weiter als Streifen, wirkt aber gedruckt statt gezeichnet.

2. 2

   Nimm etwas Sättigung heraus

   Die Originalmuster sah man oft im Druck oder auf dunklen Bildschirmen. Dämpfst du sie auf modernen hellen Bildschirmen leicht, kommst du näher an das damalige Gefühl.

3. 3

   Misch in OKLCH

   Interpolation in OKLCH hält die Mitte jedes Übergangs hell statt gräulich. CSS-Farbverläufe in OKLCH erklärt, wie.

4. 4

   Füge feine Körnung hinzu

   Körnung bringt die Textur von Film und Papier und versteckt Banding. Körnige Farbverläufe hat das Rezept.

5. 5

   Nutze moderne Schrift

   Lass die Farbe das Jahrzehnt tragen und wähle eine klare, aktuelle Schrift. Zeittypische Farbe plus zeittypische Schrift ist der Punkt, an dem es in Pastiche kippt.

/* Original: hard seventies stripes */
.retro {
  background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}

/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
  background:
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}

Willst du einen Retro-Look, den du behalten kannst, beschreib ihn in der Gradiently Forge, etwa „Sonnenuntergangsstreifen der 70er auf Creme, mit Körnung“, und sie baut aus dem Satz einen Mark. Für Gedrucktes prüf Farbverläufe drucken, bevor du Dateien verschickst, denn warme Orange- und Brauntöne können sich auf Papier verschieben.