Vaporwave-färger och synthwave-paletter, med hexkoder

Vaporwave-färger är mjuka, glödande pasteller: stark rosa, cyan, mint, lila och en blek citrongul, oftast mot bleka eller urblekta himlar. Den högljuddare kusinen synthwave tar samma rosa och cyan, skruvar upp dem till neon och lägger dem på en nästan svart natt med en randig sol som sjunker mot ett rutnät. Här finns båda paletterna med hexkoder, gradienter du kan kopiera, CSS för solnedgångsscenen och hur du använder stämningen utan att den tippar över i parodi.

Lite bakgrund hjälper dig att använda färgerna med avsikt. Vaporwave växte fram på nätet i början av 2010-talet som en musik- och bildstil byggd av halvt bortglömd konsumentkultur: tidig datorgrafik, lugnet i ett köpcentrum, gamla operativsystemfönster och klassiska statyer. Synthwave hämtar sitt utseende från 1980-talets filmer och arkadspel: nattliga bilfärder, neonskyltar och lasernät. Hela historien om decenniet finns i retrogradienter.

Den klassiska vaporwave-paletten

En uppsättning på fem färger dyker upp om och om igen när folk beskriver vaporwave, och den har förtjänat sin plats: varje färg är ljus, mättad och lite syntetisk, som en skärm sedd genom dis. Använd den som utgångspunkt och bestäm sedan vilka en eller två färger som leder.

Rosa och cyan är kärnan: en varm och en kall färg med liknande ljusstyrka, vilket är varför de fungerar ihop utan att den ena sväljer den andra. Lila binder ihop dem, så en övergång från rosa via lila till cyan aldrig passerar grått. Mint och citron passar bäst i liten skala, till ett pris, en dekal eller ett enda ord.

Synthwave-färger: nattversionen

Synthwave, ibland kallad retrowave, behåller nyanserna men ändrar ljuset. Marken är nästan svart med en violett ton, horisonten glöder magenta och solen går från gult överst till rosa och lila nederst. Där vaporwave känns som en disig eftermiddag är synthwave midnatt på en tom väg.

Vaporwave- och synthwave-gradienter att kopiera

Gradienter är där den här stilen bor, eftersom varje motiv egentligen är en ljuskälla: en sol, en horisont, en glödande skylt. Varje övergång nedan håller sig på ena sidan av färghjulet eller passerar lila, så ingen av dem blir lerig i mitten. Om någon blir det på din skärm förklarar leriga gradienter varför och hur du fixar det.

Neonövergångar som dessa får lätt band på stora skärmar, eftersom långa stråk av liknande mörk violett ger få färgsteg. Lite korn döljer stegen och ger den mjuka, lätt nedslitna yta som stilen är känd för. I gradienter med korn finns metoden, och neongradienter visar ljusare, renare neon utan den retro ramen.

Så ritar du en synthwave-solnedgång och ett rutnät i CSS

Hela scenen består av tre lager: en himmelsgradient, en sol med vågräta snitt genom den nedre halvan och ett rutnätsgolv som lutar i perspektiv. Snitten är en mask med hårda stopp, och rutnätet är två tunna linjegradienter som upprepas i samma storlek. Det fungerar i alla aktuella webbläsare.

.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  perspective: 400px;
  background: linear-gradient(180deg, #0b0221 0%, #2d0b59 55%, #b3176f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 240px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 40%, #ff2975 75%, #8c1eff 100%);
  /* horizontal cuts across the lower half */
  mask: linear-gradient(180deg, #000 55%, transparent 55% 59%, #000 59% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85%);
}

.floor {
  position: absolute;
  inset: 55% -50% -40%;
  transform: rotateX(60deg);
  transform-origin: top;
  background:
    linear-gradient(#ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    linear-gradient(90deg, #ff2a6d 2px, transparent 2px) 0 0 / 60px 60px,
    #0b0221;
}

För att animera den flyttar du golvets bakgrundsposition nedåt i en loop med exakt en cell, 60px, så att rutnätet ser ut att rulla mot dig i all evighet. Håll det långsamt och ta hänsyn till dem som ber om mindre rörelse med prefers reduced motion.

Använd vaporwave-looken utan att det blir parodi

Stilen är så igenkännbar att en hög av dess klichéer läses som ett skämt. Det går bra för en meme, men är ett problem för ett varumärke, ett skivomslag eller en affisch du vill ska tas på allvar. Lösningen är återhållsamhet: låna färgen och ett motiv, och låt allt annat vara modernt.

Där vaporwave-färger fungerar bäst

Paletten passar allt som är nattligt, musikaliskt eller lekfullt nostalgiskt: spellisteomslag i 1080×1080, podcastomslag i 3000×3000, klubb- och spelningsaffischer, Twitch-offlineskärmar i 1920×1080 och produktsläpp med retrokänsla. Det är svårare att motivera för bank, vård eller något som ska kännas stillsamt pålitligt. För en stream tar streambakgrunder upp layouten, och för omslag finns podcastomslag.

Vill du ha synthwave-natten utan att bygga den från grunden kan du söka på Gradiently Marknaden med färgord som ”neonmagenta” eller ”djup violett” och designa med vilken Mark du hittar, gratis. För den nära släkten pastellstilen från slutet av nittiotalet och början av 2000-talet, läs om Y2K-estetiken.