Kortversionen
- En retrogradient är en färgövergång som frammanar ett särskilt decennium, oftast sjuttiotalets varma ränder, åttiotalets neon eller nittiotalets turkos och lila.
- Sjuttiotalsgradienter använder senap, bränd orange, rost och chokladbrunt, ofta som skarpkantade ränder på grädde.
- Åttiotalsgradienter delas i två looks: neonrosa och cyan på svart, och ljus pastellpop i rosa, turkos, gult och lila.
- Nittiotalsgradienter omfattar övergångar från turkos till lila, djupa juvelfärger och gradienten från marinblått till blått i gamla skrivbordsfönsters titelrader.
- För att modernisera en retrogradient, mjuka upp randkanterna, sänk mättnaden något, blanda i OKLCH och lägg till fint korn.
På den här sidan
En retrogradient är en färgövergång som genast frammanar ett decennium. Sjuttiotalet hade varma ränder i senap, orange, rost och brunt. Åttiotalet hade neonrosa och cyan på svart, och ljus pastellpop. Nittiotalet hade turkos och lila, djupa juvelfärger och de marinblå till blå fälten i tidig skrivbordsprogramvara. Nedan finns en palett och en uppsättning gradienter att kopiera för varje decennium, sedan en metod för att modernisera dem så att de känns som en referens, inte en utklädnad.
Retro fungerar eftersom färg bär minnen. Människor känner igen ett decennium på dess palett långt innan de lägger märke till typsnittet eller layouten, vilket gör de här gradienterna till en genväg till en stämning. För den längre berättelsen om hur gradienter har rört sig genom designen, läs gradienternas historia.
Sjuttiotalsgradienter: solnedgångsränder i orange och brunt
Sjuttiotalets palett är varm och jordnära: skördegult, bränd orange, rost och ett djupt chokladbrunt, med avokadogrönt som udda och grädde som botten. Dess signatur är randen: fyra eller fem band av färg staplade som en solnedgång, med hårda kanter snarare än en jämn övergång.
linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)Jämna övergångar av samma färger känns mjukare och passar foton eller lång text bättre än ränder. Håll dem i den varma familjen så blir de aldrig grumliga, eftersom varje steg är en nära granne till det förra. För mjukare varma himlar, se solnedgångsgradienter.
Åttiotalsgradienter: neonnätter och pastellpop
Åttiotalet gav oss två mycket olika looks. Den ena är neonnatten: magenta och cyan som glöder på svart, kromade bokstäver och rutnät, hämtade från tidens filmer och arkadspel. Den andra är ljus, lekfull pastellpop: rosa, turkos, kanariegult och lila, ofta med svarta krumelurer och geometriska former. Vår guide om vaporwave-färger tar upp neonnatten på djupet, inklusive en CSS-solnedgång och ett rutnät.
Nittiotalsgradienter: turkos, lila och titelradsblått
Nittiotalets färg är svalare och mer digital. Turkos fanns överallt, ofta parat med lila och magenta på sportdräkter, förpackningar och tidiga webbsidor. Skrivbordsprogramvara förde med sig gradienten från marinblått till klarblått i fönstrens titelrader, en av de första gradienter många människor såg på en skärm. Senare under decenniet kom genomskinliga turkosa plaster och, i tryck, djupare juvelfärger som jaktgrönt, vinrött och plommon.
Millennieskiftet är en egen historia: silver, iriserande och bubbligt. Den looken har en egen guide, Y2K-estetiken, och den går naturligt ihop med holografiska gradienter.
Retrogradienter per decennium i korthet
| Decennium | Nyckelfärger | Gradientstil | Bäst för |
|---|---|---|---|
| 1970-talet | Guld, orange, rost, brunt, avokado | Hårda ränder, varma mjuka övergångar | Mat, dryck, vintagebutiker, musik |
| 1980-talets neon | Magenta, cyan, violett på svart | Glödande horisonter, krom | Nattliv, spel, synthmusik |
| 1980-talets pop | Rosa, turkos, kanariegult, lila, svart | Ljusa övergångar, ränder, former | Barn, träning, lekfulla lanseringar |
| 1990-talet | Turkos, lila, marinblått, juvelfärger | Diagonala övergångar, titelradsblått | Tech-nostalgi, streetwear, fanzines |
Så moderniserar du en retrogradient
En retrogradient som kopieras exakt kan se ut som en maskeradkostym. Modern retro behåller paletten folk känner igen och ändrar finishen: mjukare kanter, något lugnare färg och en textur som känns som tryck snarare än en platt skärm.
- 1
Behåll paletten, mjuka upp kanterna
Ge varje rand en kort övergång på 3 till 4 % i stället för ett hårt stopp. Den läses fortfarande som ränder, men ser tryckt ut snarare än ritad.
- 2
Ta bort lite mättnad
Originalens färgprover sågs ofta i tryck eller på dunkla skärmar. Att dämpa dem något på moderna ljusa skärmar kommer närmare hur de kändes.
- 3
Blanda i OKLCH
Interpolation i OKLCH håller mitten av varje övergång stark i stället för gråaktig. CSS-gradienter i OKLCH förklarar hur.
- 4
Lägg till fint korn
Korn ger filmens och papperets textur och döljer bandning. Korniga gradienter har receptet.
- 5
Använd modern typografi
Låt färgen bära decenniet och välj ett rent, aktuellt typsnitt. Tidstypiskt färgval plus tidstypiskt typsnitt är där det tippar över i pastisch.
/* 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%);
}Daterat
- Hårda, mättade ränder direkt ur en färgkarta
- Tidstypiskt typsnitt, tidstypisk layout och tidstypisk färg på en gång
- Platt färg med synlig bandning
- Varje retrotrop i en enda design
Modern retro
- Korta övergångar mellan banden, något lugnare färg
- Retrofärg med rent, aktuellt typsnitt
- Fint korn för en tryckt känsla
- Ett decennium, ett motiv, gott om utrymme
En A4-affisch: sjuttiotalsvärme med modern, generös text.
Ett spellisteomslag: en stark rad låter färgen göra tidsresan.
Vill du ha en retrolook du kan behålla, beskriv den i Gradiently Forge, till exempel ”sjuttiotalets solnedgångsränder på grädde, med korn”, så bygger den en Mark av meningen. För tryckta produkter, kontrollera trycka gradienter innan du skickar filer, eftersom varma orange och bruna toner kan skifta på papper.
Vanliga frågor
Vilka färger får en gradient att se retro ut?
Färger som är starkt knutna till ett decennium: senap, orange, rost och brunt för sjuttiotalet, neonmagenta och cyan eller ljusa pasteller för åttiotalet, och turkos, lila och marinblått för nittiotalet.
Hur gör jag sjuttiotalsränder i CSS?
Använd hårda färgstopp, där varje färg börjar exakt där den förra slutar, till exempel linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%).
Hur hindrar jag en retrogradient från att se daterad ut?
Behåll paletten men mjuka upp randkanterna, sänk mättnaden något, blanda i OKLCH, lägg till fint korn och para ihop den med rent, modernt typsnitt.
Vad är skillnaden mellan retro- och vintagegradienter?
Orden används nästan synonymt. Retro betyder oftast en ny design som refererar till ett förflutet decennium, medan vintage antyder något som ser genuint åldrat ut, ofta med mer textur och blekning.
Vilket decennium passar mitt varumärke?
Välj efter stämning: sjuttiotalet för värme och hantverk, åttiotalets neon för nattliv och energi, åttiotalets pop för lek och nittiotalet för digital nostalgi och streetwear.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
