Synthwave-färger: hexkoder och gradienter för neonnätter

Synthwave-färger är het rosa, elektrisk cyan, solnedgångsorange och djup violett, alla mot en indigoblå nattehimmel. Utseendet kommer från en musik- och konstscen som återskapar 1980-talet: en randig sol vid horisonten, ett glödande rutnätsgolv, kromad text och palmsilhuetter. Färgerna är starka, men de fungerar bara för att botten är så mörk. Börja med natten och lägg sedan till neonet.

Synthwave-färgpaletten med hexkoder

Tänk dig paletten i två halvor. Den varma halvan (gult, orange, rosa) hör till solen och horisonten. Den kalla halvan (cyan och kromvitt) hör till rutnätet, linjerna och texten. Om du håller halvorna på sina platser får utseendet sin struktur och blir inte en röra av neon.

Synthwave-gradienter du kan kopiera

Solnedgången är synthwavens hjärta. Den går alltid från varmt till kallt, från solens topp till dess botten eller från horisonten upp i himlen. Nedan ser du de gradienter som dyker upp om och om igen, var och en skriven som ett enda CSS-värde.

Synthwave-sol och rutnät i CSS

De två klassiska formerna är lätta att bygga med lagrade gradienter. Solen är en cirkel fylld med solnedgångsgradienten och skuren av vågräta ränder. Rutnätet är två upprepade gradienter, en vågrät och en lodrät, lutade bakåt med en perspektivtransform.

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

Mer om ränder och rutnät finns i upprepade CSS-gradienter. Om du animerar rutnätet så att det rullar mot betraktaren, ta hänsyn till dem som bett sin enhet om mindre rörelse, som beskrivs i minskad rörelse.

Synthwave, vaporwave och cyberpunk jämförda

De här tre blandas ihop eftersom de delar neon. Skillnaderna ligger i botten och stämningen, och de spelar roll när du väljer palett.

Tre synthwave-färgkombinationer för olika stämningar

Hela paletten är mycket. De flesta bra synthwave-verk väljer en smalare kombination och håller fast vid den. Dessa tre täcker de stämningar folk oftast vill ha, och var och en är byggd av koderna ovan.

Om du bygger ett helt flöde väljer du en kombination för vanliga inlägg och sparar den fulla solnedgången till stora tillfällen som en release eller en lansering. Ett flöde där varje inlägg är en flammande solnedgång slutar snabbt kännas speciellt, och solnedgången tappar sin dragningskraft när du till slut behöver den. Samma tänkande finns i mörka gradientbakgrunder, som tar upp hur du håller en nattbotten rik utan att den blir platt eller randig.

Använda synthwave-färger i dina designer

Synthwave passar musiksläpp, spelströmmar, klubbkvällar, poddar om film och allt som vill kännas som en nattlig bilfärd. Fällan är läsbarheten: designers omger ofta text med ett neonsken som smetas ut i små storlekar och på mobiler. Sätt i stället orden i solid kromvitt eller solgult på den mörkaste delen av himlen. Färgen runt omkring sköter glöden.

• Håll solen eller det ljusaste varma området borta från rubriken.
• Använd cyan för tunna linjer och små detaljer, inte för stora ytor.
• Lägg till fint korn så att den mörka himlen inte får ränder vid export.
• Välj ett rubriktypsnitt med krom- eller kursivkänsla och använd det överallt.

Marks från Gradiently beter sig som synthwave behöver: den lugnaste, mest kontrastrika delen av bakgrunden flyttar sig bakom dina ord, och Auto-bläck väljer ljus eller mörk text rad för rad, så en rubrik bråkar aldrig med solen. För årtiondet allt detta imiterar, se 80-talsestetiken.