Retrogradienter: fra 70-tallets solnedganger til 90-tallets skjermer

En retro gradient er en fargeovergang som umiddelbart minner om et tiår. Syttitallet hadde varme striper i sennep, oransje, rust og brunt. Åttitallet hadde neonrosa og cyan på svart, og klar pastellpop. Nittitallet hadde turkis og lilla, dype juveltoner og de marine til blå linjene i tidlig skrivebordsprogramvare. Under finner du en palett og et sett med gradienter du kan kopiere for hvert tiår, og deretter en metode for å modernisere dem, så de føles som en referanse og ikke et kostyme.

Retro fungerer fordi farge bærer minner. Folk kjenner igjen et tiår på paletten lenge før de legger merke til skriften eller oppsettet, noe som gjør disse gradientene til en snarvei til en stemning. For den lengre historien om hvordan gradienter har beveget seg gjennom design, les gradientenes historie.

Syttitallsgradienter: solnedgangsstriper i oransje og brunt

Syttitallspaletten er varm og jordnær: høstgull, brent oransje, rust og en dyp sjokoladebrun, med avokadogrønn som den som skiller seg ut, og krem som grunn. Kjennetegnet er stripen: fire eller fem fargebånd stablet som en solnedgang, med harde kanter i stedet for en jevn overgang.

Jevne overganger fra de samme fargene føles mykere og passer bedre til bilder eller lang tekst enn striper gjør. Hold dem i den varme familien, så blir de aldri grumsete, fordi hvert trinn er en nær nabo av det forrige. For jevnere varme himler, se solnedgangsgradienter.

Åttitallsgradienter: neonnetter og pastellpop

Åttitallet ga oss to svært ulike uttrykk. Det ene er neonnatten: magenta og cyan som gløder på svart, krombokstaver og rutenett, hentet fra filmene og arkadespillene fra den tiden. Det andre er klar, leken pastellpop: rosa, turkis, kanarigult og syrin, ofte med svarte krusedullstreker og geometriske former. Guiden vår om vaporwave-farger tar for seg neonnatten i dybden, inkludert en solnedgang og et rutenett i CSS.

Nittitallsgradienter: turkis, lilla og tittellinjeblått

Nittitallets farger er kjøligere og mer digitale. Turkis var overalt, ofte sammen med lilla og magenta på idrettsdrakter, emballasje og tidlige nettsider. Skrivebordsprogramvare kom med gradienten fra marine til klar blå i vinduenes tittellinjer, en av de første gradientene mange så på en skjerm. Senere i tiåret kom gjennomskinnelig turkis plast og, i trykk, dypere juveltoner som jaktgrønn, burgunder og plomme.

Årtusenskiftet er en egen historie: sølv, iriserende og boblete. Det uttrykket har sin egen guide, Y2K-estetikken, og det passer naturlig sammen med holografiske gradienter.

Retrogradienter etter tiår, i korte trekk

Slik moderniserer du en retrogradient

En retrogradient som er kopiert nøyaktig, kan se ut som et karnevalskostyme. Moderne retro beholder paletten folk kjenner igjen, og endrer finishen: mykere kanter, litt roligere farge og en tekstur som føles som trykk i stedet for en flat skjerm.

1. 1

   Behold paletten, myk opp kantene

   Gi hver stripe en kort overgang på 3 til 4 % i stedet for et hardt stopp. Det leses fortsatt som striper, men ser trykt ut og ikke tegnet.

2. 2

   Ta ut litt metning

   De opprinnelige fargeprøvene ble ofte sett i trykk eller på matte skjermer. Å dempe dem litt på moderne lyssterke skjermer kommer nærmere hvordan de føltes.

3. 3

   Bland i OKLCH

   Interpolering i OKLCH holder midten av hver overgang klar i stedet for gråaktig. CSS-gradienter i OKLCH forklarer hvordan.

4. 4

   Legg til fint korn

   Korn gir teksturen fra film og papir og skjuler striper. Kornete gradienter har oppskriften.

5. 5

   Bruk moderne skrift

   La fargen bære tiåret, og velg en ren, moderne skrift. Tidsriktig farge pluss tidsriktig skrift er der det tipper over i pastisj.

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

Hvis du vil ha et retrouttrykk du kan beholde, beskriver du det i Forge i Gradiently, for eksempel «solnedgangsstriper fra syttitallet på krem, med korn», så bygger den en Mark fra setningen. For trykte ting bør du sjekke trykking av gradienter før du sender filer, fordi varme oransje- og bruntoner kan forskyve seg på papir.