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

[Canonical HTML page](https://gradiently.design/de/guide/retro-gradients)

Senf- und Rost-Streifen, Neon auf Schwarz, Petrol mit Lila und das Blau alter Titelleisten. Drei Jahrzehnte Retro-Farbverläufe mit Codes und die kleinen Änderungen, die sie neu wirken lassen.

## The short version

- Ein Retro-Farbverlauf ist ein Farbübergang, der an ein bestimmtes Jahrzehnt erinnert, meist an die warmen Streifen der 70er, das Neon der 80er oder Petrol und Lila der 90er.
- Farbverläufe der 70er nutzen Senfgelb, gebranntes Orange, Rost und Schokobraun, oft als hart abgesetzte Streifen auf Creme.
- Farbverläufe der 80er teilen sich in zwei Looks: Neonpink und Cyan auf Schwarz sowie knalliger Pastell-Pop in Pink, Petrol, Gelb und Flieder.
- Farbverläufe der 90er umfassen Übergänge von Petrol zu Lila, tiefe Edelsteintöne und den Verlauf von Marineblau zu Blau aus alten Titelleisten am Desktop.
- Um einen Retro-Farbverlauf zu modernisieren, mach die Streifenkanten weicher, senke die Sättigung leicht, mische in OKLCH und füge feine Körnung hinzu.

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](https://gradiently.design/de/guide/history-of-gradients).

## 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.

- Creme: #f2e2c4
- Erntegold: #e0a526
- Gebranntes Orange: #d9661f
- Rost: #a8431f
- Schokolade: #4a2c1d
- Avocado: #7d7b35

Eine Palette der 70er. Alles neigt ins Warme, sogar das Grün.

Sonnenuntergangsstreifen der 70er: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

Harte Farbstopps ergeben Streifen: Jede Farbe beginnt genau dort, wo die vorige endet. Das ist der bekannteste Retro-Farbverlauf überhaupt.

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](https://gradiently.design/de/guide/sunset-gradient).

- Erntesonnenuntergang: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Avocadoküche: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Brauner Samt: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Cream Soda: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Weiche Übergänge der 70er: Gold zu Rost, Avocado zu Creme, ein samtiges braunes Leuchten und ein blasses Creme zu Gold.

## 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](https://gradiently.design/de/guide/vaporwave-colors) behandelt die Neonnacht ausführlich, samt CSS-Sonnenuntergang und Gitter.

- Kaugummi: #ff4f9a
- Pooltürkis: #00c2c7
- Kanariengelb: #ffe14d
- Flieder: #b18cff
- Kringelschwarz: #111111

Pastell-Pop der 80er. Schwarz gehört zur Palette: Es umrandet Formen und hält die hellen Farben am Boden.

- Neonnacht: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Chrom: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aerobic: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Pop-Streifen: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Farbverläufe der 80er. Chrom nutzt einen harten Stopp bei 46 bis 50 %, um einen gespiegelten Horizont vorzutäuschen, Pop-Streifen ist ein sich wiederholender Verlauf und kachelt endlos.

## 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.

- Titelleisten-Blau: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Petrol zu Magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Durchscheinendes Petrol: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Pflaume und Burgunder: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Jagdgrün: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Farbverläufe der 90er, vom Bildschirm (Titelleisten-Blau) übers Regal (durchscheinendes Petrol) bis auf die Seite (Edelsteintöne).

Die Jahrtausendwende ist eine eigene Geschichte: Silber, schillernd und blubbernd. Dieser Look hat einen eigenen Leitfaden, die [Y2K-Ästhetik](https://gradiently.design/de/guide/y2k-aesthetic), und passt natürlich zu [holografischen Farbverläufen](https://gradiently.design/de/guide/holographic-gradients).

## Retro-Farbverläufe nach Jahrzehnt im Überblick

| Jahrzehnt | Leitfarben | Verlaufsstil | Am besten für |
| --- | --- | --- | --- |
| 1970er | Gold, Orange, Rost, Braun, Avocado | Harte Streifen, warme weiche Übergänge | Essen, Getränke, Vintage-Läden, Musik |
| 1980er Neon | Magenta, Cyan, Violett auf Schwarz | Leuchtende Horizonte, Chrom | Nachtleben, Gaming, Synth-Musik |
| 1980er Pop | Pink, Petrol, Kanariengelb, Flieder, Schwarz | Knallige Übergänge, Streifen, Formen | Kinder, Fitness, verspielte Launches |
| 1990er | Petrol, Lila, Marineblau, Edelsteintöne | Diagonale Übergänge, Titelleisten-Blau | Tech-Nostalgie, Streetwear, Zines |

Wähle das Jahrzehnt nach der Stimmung, die du willst, nicht nur nach der Zeit, in der dein Publikum aufgewachsen ist.

## 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. **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. **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. **Misch in OKLCH** Interpolation in OKLCH hält die Mitte jedes Übergangs hell statt gräulich. [CSS-Farbverläufe in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch) erklärt, wie.
4. **Füge feine Körnung hinzu** Körnung bringt die Textur von Film und Papier und versteckt Banding. [Körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) hat das Rezept.
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.

```css
/* 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%);
}
```

Dieselben Streifen zweimal. Die moderne Version nutzt etwas ruhigere Farben, Übergänge von 4 % zwischen den Bändern, OKLCH-Interpolation und eine SVG-Rauschebene darüber.

### Altbacken

- Harte, gesättigte Streifen direkt aus dem Farbfächer
- Zeittypische Schrift, zeittypisches Layout und zeittypische Farbe zugleich
- Flache Farbe mit sichtbarem Banding
- Jedes Retro-Klischee in einem Design

### Modernes Retro

- Kurze Übergänge zwischen den Bändern, etwas ruhigere Farbe
- Retro-Farbe mit klarer, aktueller Schrift
- Feine Körnung für ein gedrucktes Gefühl
- Ein Jahrzehnt, ein Motiv, viel Raum

Ein A4-Plakat, das einen Sommer-Sale mit Vintage-Denim, Wildleder und Cord ankündigt

Ein A4-Plakat: die Wärme der 70er mit moderner, großzügiger Schrift.

Ein quadratisches Playlist-Cover mit dem Titel Songs vom Kassettendeck

Ein Playlist-Cover: Eine starke Zeile lässt die Farbe die Zeitreise machen.

Willst du einen Retro-Look, den du behalten kannst, beschreib ihn in der Gradiently [Forge](/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](https://gradiently.design/de/guide/print-gradients), bevor du Dateien verschickst, denn warme Orange- und Brauntöne können sich auf Papier verschieben.

## FAQ

### Welche Farben lassen einen Farbverlauf retro wirken?

Farben, die stark an ein Jahrzehnt gebunden sind: Senfgelb, Orange, Rost und Braun für die 70er, Neonmagenta und Cyan oder knallige Pastelltöne für die 80er, Petrol, Lila und Marineblau für die 90er.

### Wie mache ich 70er-Streifen in CSS?

Nutze harte Farbstopps, bei denen jede Farbe genau dort beginnt, wo die vorige endet, zum Beispiel `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### Wie verhindere ich, dass ein Retro-Farbverlauf altbacken wirkt?

Behalte die Palette, aber mach die Streifenkanten weicher, senke die Sättigung leicht, misch in OKLCH, füge feine Körnung hinzu und kombiniere alles mit klarer, moderner Schrift.

### Was ist der Unterschied zwischen Retro- und Vintage-Farbverläufen?

Die Begriffe werden fast austauschbar genutzt. Retro meint meist ein neues Design, das auf ein vergangenes Jahrzehnt verweist, Vintage deutet etwas an, das wirklich gealtert aussieht, oft mit mehr Textur und Verblassen.

### Welches Jahrzehnt passt zu meiner Marke?

Wähle nach Stimmung: die 70er für Wärme und Handwerk, 80er-Neon für Nachtleben und Energie, 80er-Pop für Verspieltheit und die 90er für digitale Nostalgie und Streetwear.