De korte versie
- Een retro kleurverloop is een kleurverloop dat een bepaald decennium oproept, meestal de warme strepen van de jaren 70, het neon van de jaren 80 of het teal en paars van de jaren 90.
- Kleurverlopen uit de jaren 70 gebruiken mosterd, gebrand oranje, roest en chocoladebruin, vaak als strepen met harde randen op crème.
- Kleurverlopen uit de jaren 80 vallen uiteen in twee looks: neonroze en cyaan op zwart, en felle pastelpop in roze, teal, geel en lila.
- Kleurverlopen uit de jaren 90 omvatten verlopen van teal naar paars, diepe juweeltinten en het verloop van marine naar blauw uit oude titelbalken op de desktop.
- Om een retro kleurverloop te moderniseren verzacht je de randen van de strepen, verlaag je de verzadiging iets, meng je in OKLCH en voeg je fijne korrel toe.
Op deze pagina
Een retro kleurverloop is een kleurverloop dat meteen een decennium oproept. De jaren 70 hadden warme strepen in mosterd, oranje, roest en bruin. De jaren 80 hadden neonroze en cyaan op zwart, en felle pastelpop. De jaren 90 hadden teal en paars, diepe juweeltinten en de balken van marine naar blauw uit vroege desktopsoftware. Hieronder staan per decennium een palet en een set kopieerbare kleurverlopen, en daarna een methode om ze te moderniseren, zodat ze als een verwijzing voelen en niet als een verkleedpak.
Retro werkt omdat kleur herinnering draagt. Mensen herkennen een decennium aan het palet, lang voordat ze het lettertype of de layout opmerken, en dat maakt deze kleurverlopen tot een kortere weg naar een sfeer. Lees voor het langere verhaal over hoe kleurverlopen door design trokken de geschiedenis van kleurverlopen.
Kleurverlopen uit de jaren 70: zonsondergangstrepen in oranje en bruin
Het palet van de jaren 70 is warm en aards: oogstgoud, gebrand oranje, roest en diep chocoladebruin, met avocadogroen als buitenbeentje en crème als ondergrond. Het handelsmerk is de streep: vier of vijf kleurbanden, gestapeld als een zonsondergang, met harde randen in plaats van een vloeiend verloop.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)Vloeiende verlopen uit dezelfde kleuren voelen zachter en passen beter bij foto’s of lange tekst dan strepen. Houd ze in de warme familie en ze worden nooit modderig, omdat elke stap een naaste buur van de vorige is. Zie voor vloeiendere warme luchten zonsondergangverlopen.
Kleurverlopen uit de jaren 80: neonnachten en pastelpop
De jaren 80 gaven ons twee heel verschillende looks. De ene is de neonnacht: magenta en cyaan die op zwart gloeien, chromen letters en rasters, ontleend aan de films en arcadespellen van die tijd. De andere is felle, speelse pastelpop: roze, teal, kanariegeel en lila, vaak met zwarte krabbels en geometrische vormen. Onze gids over vaporwave-kleuren behandelt de neonnacht uitgebreid, inclusief een zonsondergang en raster in CSS.
Kleurverlopen uit de jaren 90: teal, paars en titelbalkblauw
De kleur van de jaren 90 is koeler en digitaler. Teal was overal, vaak samen met paars en magenta op sporttenues, verpakkingen en vroege webpagina’s. Desktopsoftware bracht het verloop van marine naar helderblauw in de titelbalken van vensters, een van de eerste kleurverlopen die veel mensen op een scherm zagen. Later in het decennium kwamen doorschijnend teal plastic en, in druk, diepere juweeltinten zoals jachtgroen, bordeaux en pruim.
De millenniumwisseling is een verhaal apart: zilver, iriserend en bubbelig. Die look heeft een eigen gids, de Y2K-esthetiek, en hij past vanzelf bij holografische kleurverlopen.
Retro kleurverlopen per decennium in één oogopslag
| Decennium | Hoofdkleuren | Stijl van het verloop | Het best voor |
|---|---|---|---|
| Jaren 70 | Goud, oranje, roest, bruin, avocado | Harde strepen, warme zachte verlopen | Eten, drinken, vintagewinkels, muziek |
| Jaren 80 neon | Magenta, cyaan, violet op zwart | Gloeiende horizonten, chroom | Nachtleven, gaming, synthmuziek |
| Jaren 80 pop | Roze, teal, kanarie, lila, zwart | Felle verlopen, strepen, vormen | Kinderen, fitness, speelse lanceringen |
| Jaren 90 | Teal, paars, marine, juweeltinten | Diagonale verlopen, titelbalkblauw | Technostalgie, streetwear, zines |
Zo moderniseer je een retro kleurverloop
Een retro kleurverloop dat exact is gekopieerd, kan op een verkleedpak lijken. Modern retro houdt het palet dat mensen herkennen en verandert de afwerking: zachtere randen, iets rustigere kleur en een textuur die als drukwerk voelt in plaats van als een vlak scherm.
- 1
Houd het palet, verzacht de randen
Geef elke streep een korte overgang van 3 tot 4% in plaats van een harde stop. Het leest nog steeds als strepen, maar het oogt gedrukt in plaats van getekend.
- 2
Haal er een beetje verzadiging uit
De oorspronkelijke kleurstalen werden vaak in druk of op doffe schermen gezien. Ze op moderne, heldere schermen iets dimmen komt dichter bij hoe ze aanvoelden.
- 3
Meng in OKLCH
Interpoleren in OKLCH houdt het midden van elk verloop helder in plaats van grijzig. CSS-kleurverlopen in OKLCH legt uit hoe.
- 4
Voeg fijne korrel toe
Korrel geeft de textuur van film en papier en verbergt banding. Korrelige kleurverlopen heeft het recept.
- 5
Gebruik moderne letters
Laat de kleur het decennium dragen en kies een strak, hedendaags lettertype. Kleur uit die tijd plus letters uit die tijd, en het slaat om in pastiche.
/* 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%);
}Gedateerd
- Harde, verzadigde strepen, recht uit een stalenboek
- Lettertype, layout en kleur uit die tijd, allemaal tegelijk
- Vlakke kleur met zichtbare banding
- Elk retrocliché in één ontwerp
Modern retro
- Korte overgangen tussen de banden, iets rustigere kleur
- Retrokleur met strakke, hedendaagse letters
- Fijne korrel voor een gedrukt gevoel
- Eén decennium, één motief, volop ruimte
Een A4-poster: de warmte van de jaren 70 met moderne, royale letters.
Een playlistcover: één sterke regel laat de kleur het tijdreizen doen.
Wil je een retrolook die je kunt houden, beschrijf hem dan in de Forge van Gradiently, bijvoorbeeld ‘zonsondergangstrepen uit de jaren 70 op crème, met korrel’, en hij bouwt een Mark uit die zin. Raadpleeg voor drukwerk kleurverlopen drukken voordat je bestanden verstuurt, want warm oranje en bruin kunnen op papier verschuiven.
Vragen die mensen stellen
Welke kleuren laten een kleurverloop retro ogen?
Kleuren die sterk aan een decennium vastzitten: mosterd, oranje, roest en bruin voor de jaren 70, neonmagenta en cyaan of felle pastels voor de jaren 80, en teal, paars en marine voor de jaren 90.
Hoe maak ik jaren 70-strepen in CSS?
Gebruik harde kleurstops, waarbij elke kleur precies begint waar de vorige eindigt, bijvoorbeeld linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%).
Hoe voorkom ik dat een retro kleurverloop gedateerd oogt?
Houd het palet, maar verzacht de randen van de strepen, verlaag de verzadiging iets, meng in OKLCH, voeg fijne korrel toe en combineer het met strakke, moderne letters.
Wat is het verschil tussen retro en vintage kleurverlopen?
De woorden worden bijna door elkaar gebruikt. Retro betekent meestal een nieuw ontwerp dat naar een vroeger decennium verwijst, terwijl vintage iets suggereert wat er echt oud uitziet, vaak met meer textuur en verbleking.
Welk decennium past bij mijn merk?
Kies op sfeer: de jaren 70 voor warmte en ambacht, jaren 80-neon voor nachtleven en energie, jaren 80-pop voor speelsheid, en de jaren 90 voor digitale nostalgie en streetwear.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
