Synthwave-farger: fargekoder og gradienter for neonnatten

Synthwave-farger er knallrosa, elektrisk cyan, solnedgangsoransje og dyp fiolett, alt mot en indigofarget nattehimmel. Uttrykket kommer fra et musikk- og kunstmiljø som gjenskaper 1980-tallet: en stripete sol i horisonten, et glødende rutenett på bakken, krombokstaver og palmesilhuetter. Fargene er sterke, men fungerer bare fordi bakgrunnen er så mørk. Begynn med natten, og legg deretter til neon.

Synthwave-paletten med heksadesimale fargekoder

Tenk på paletten som to halvdeler. Den varme halvdelen, gul, oransje og rosa, hører til solen og horisonten. Den kjølige halvdelen, cyan og kromhvit, hører til rutenettet, linjene og bokstavene. Når halvdelene holder seg på plass, får uttrykket struktur og blir ikke et virvar av neon.

Synthwave-gradienter du kan kopiere

Solnedgangen er kjernen i synthwave. Den går alltid fra varmt til kjølig fra toppen til bunnen av solen, eller fra horisonten opp i himmelen. Nedenfor finner du gradientene som går igjen, hver skrevet som én CSS-verdi.

Synthwave-sol og rutenett i CSS

De to klassiske formene er enkle å bygge med gradienter i flere lag. Solen er en sirkel fylt med solnedgangsgradienten og skåret av vannrette striper. Rutenettet er to gjentakende gradienter, én vannrett og én loddrett, vippet bakover med en perspektivtransformasjon.

.sky {
  background: linear-gradient(180deg, #0b0221 0%, #241047 55%, #6a1b9a 100%);
}

.sun {
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, #ff8a3d 40%, #ff2a6d 75%, #b3138f 100%);
  /* solid top half, plus stripes: mask layers add together */
  mask-image:
    linear-gradient(180deg, #000 0 55%, transparent 55%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
}

.grid {
  height: 40vh;
  background-color: #0b0221;
  background-image:
    repeating-linear-gradient(0deg, #05d9e8 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #05d9e8 0 2px, transparent 2px 48px);
  transform: perspective(300px) rotateX(60deg);
  transform-origin: top;
}

Les mer om striper og rutenett i gjentakende CSS-gradienter. Hvis du animerer rutenettet mot seeren, må du respektere dem som har bedt enheten om mindre bevegelse, som forklart i redusert bevegelse.

Synthwave, vaporwave og cyberpunk sammenlignet

Disse tre blandes sammen fordi de alle bruker neon. Forskjellene ligger i bakgrunnen og stemningen, og betyr noe når du velger palett.

Tre synthwave-fargekombinasjoner for ulike stemninger

Hele paletten er mye på én gang. De fleste gode synthwave-design velger en smalere kombinasjon og holder seg til den. Disse tre dekker stemningene folk vanligvis ønsker, og alle er bygget fra fargekodene ovenfor.

Hvis du bygger en hel feed, velger du én kombinasjon til vanlige innlegg og sparer hele solnedgangen til store øyeblikk, som en utgivelse eller lansering. En feed der hvert innlegg er en flammende solnedgang, slutter raskt å føles spesiell. Solnedgangen mister kraften når du endelig trenger den. Den samme tanken finnes i mørke gradientbakgrunner, som tar for seg hvordan du beholder dybden i en nattbakgrunn uten at den blir flat eller får bånd.

Bruk synthwave-farger i designene dine

Synthwave passer til musikkutgivelser, gaming-strømminger, klubbkvelder, podkaster om film og alt som skal føles som en sen kjøretur. Fallgruven er leselighet: designere omgir ofte teksten med neonglød, som flyter ut i små størrelser og på mobil. Sett heller teksten i ensfarget kromhvit eller solgul på den mørkeste delen av himmelen. Fargen rundt står for gløden.

• Hold solen eller det sterkeste varme området unna overskriften.
• Bruk cyan til tynne linjer og små detaljer, ikke store flater.
• Legg til fine korn slik at den mørke himmelen ikke får bånd ved eksport.
• Velg én overskriftsskrift med krom- eller kursivpreg, og bruk den overalt.

Marker fra Gradiently fungerer slik synthwave trenger: den roligste delen av bakgrunnen med best kontrast flytter seg bak teksten, og Auto-tekstfarge velger lys eller mørk tekst linje for linje. Da kjemper aldri en overskrift med solen. For tiåret som alt etterligner, se 80-tallsestetikken.