Synthwave-farver: hexkoder og gradienter til neonnætter

Synthwave-farver er hot pink, elektrisk cyan, solnedgangsorange og dyb violet, alle sat mod en indigo nattehimmel. Looket kommer fra en musik- og kunstscene, der genopfinder 1980'erne: en stribet sol i horisonten, et glødende gitter som gulv, krombogstaver og silhuetter af palmer. Farverne er stærke, men de virker kun, fordi bunden er så mørk. Start med natten, og tilføj så neonen.

Synthwave-farvepaletten med hexkoder

Tænk på paletten i to halvdele. Den varme halvdel (gul, orange, pink) hører til solen og horisonten. Den kølige halvdel (cyan og kromhvid) hører til gitteret, linjerne og bogstaverne. Når hver halvdel bliver på sin plads, får looket sin struktur og bliver ikke til et rod af neon.

Synthwave-gradienter, du kan kopiere

Solnedgangen er hjertet i synthwave. Den går altid fra varm til kølig fra toppen af solen til bunden, eller fra horisonten op i himlen. Her er de gradienter, der dukker op igen og igen, hver skrevet som én CSS-værdi.

Synthwave-sol og gitter i CSS

De to klassiske former er nemme at bygge med lagdelte gradienter. Solen er en cirkel fyldt med solnedgangsgradienten og skåret over af vandrette striber. Gitteret er to gentagne gradienter, én vandret og én lodret, vippet bagud med en perspektivtransformation.

.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;
}

Mere om striber og gitre finder du i gentagne CSS-gradienter. Hvis du animerer gitteret, så det ruller mod beskueren, skal du tage hensyn til dem, der har bedt deres enhed om mindre bevægelse, som beskrevet i reduceret bevægelse.

Synthwave, vaporwave og cyberpunk sammenlignet

De tre bliver blandet sammen, fordi de deler neon. Forskellene ligger i bunden og stemningen, og de betyder noget, når du vælger en palet.

Tre synthwave-farvekombinationer til forskellige stemninger

Hele paletten er meget. Det meste gode synthwave-arbejde vælger en smallere kombination og holder fast i den. Disse tre dækker de stemninger, folk typisk ønsker, og hver er bygget af koderne ovenfor.

Bygger du et helt feed, så vælg én kombination til de faste opslag, og gem den fulde solnedgang til de store øjeblikke som en udgivelse eller en lancering. Et feed, hvor hvert opslag er en flammende solnedgang, holder hurtigt op med at føles særligt, og solnedgangen mister sin kraft, når du endelig får brug for den. Samme tankegang findes i mørke gradientbaggrunde, der viser, hvordan du holder en nattebund dyb uden at den bliver flad eller får striber.

Sådan bruger du synthwave-farver i dine designs

Synthwave passer til musikudgivelser, gamingstreams, klubaftener, podcasts om film og alt, der skal føles som en køretur sent om natten. Fælden er læsbarheden: designere omgiver ofte tekst med neonglød, som tværes ud i små størrelser og på telefoner. Sæt i stedet ordene i ensfarvet kromhvid eller solgul på den mørkeste del af himlen. Farven omkring dem står for gløden.

• Hold solen eller det lyseste varme område væk fra overskriften.
• Brug cyan til tynde linjer og små detaljer, ikke til store flader.
• Tilføj fin kornstruktur, så den mørke himmel ikke får striber ved eksport.
• Vælg én displayskrift med et krom- eller kursivpræg, og brug den overalt.

Marks fra Gradiently opfører sig, som synthwave kræver: den roligste del af baggrunden med bedst kontrast flytter sig bag dine ord, og Automatisk tekstfarve vælger lys eller mørk tekst linje for linje, så en overskrift aldrig kæmper mod solen. For det årti, det hele efterligner, se 80'er-æstetik.