Synthwave-värit: hex-koodit ja liukuvärit neonöihin

Synthwave-värit ovat kirkas pinkki, sähkönsyaani, auringonlaskun oranssi ja syvä violetti indigonsinistä yötaivasta vasten. Ilme tulee musiikki- ja taidesuuntauksesta, joka kuvittelee 1980-luvun uudelleen: raidallinen aurinko horisontissa, hehkuva ruudukkopohja, kromikirjaimet ja palmujen siluetit. Värit ovat kirkkaita, mutta ne toimivat vain hyvin tumman pohjan ansiosta. Aloita yöstä ja lisää sitten neon.

Synthwave-väripaletti hex-koodeineen

Ajattele palettia kahtena puolikkaana. Lämmin puoli (keltainen, oranssi, pinkki) kuuluu aurinkoon ja horisonttiin. Viileä puoli (syaani ja krominvalkoinen) kuuluu ruudukkoon, viivoihin ja kirjaimiin. Kun puolikkaat pysyvät omilla paikoillaan, ilme saa rakenteen eikä muutu neonvärien sekamelskaksi.

Kopioitavat synthwave-liukuvärit

Auringonlasku on synthwaven sydän. Se kulkee aina lämpimästä viileään, auringon yläreunasta alas tai horisontista ylös taivaalle. Alla ovat yhä uudelleen toistuvat liukuvärit, kukin yhtenä CSS-arvona.

Synthwave-aurinko ja ruudukko CSS:llä

Kaksi klassista muotoa on helppo rakentaa kerrostetuilla liukuväreillä. Aurinko on ympyrä, joka täytetään auringonlaskuliukuvärillä ja leikataan vaakaraidoilla. Ruudukko koostuu kahdesta toistuvasta liukuväristä, yhdestä vaaka- ja yhdestä pystysuunnassa, jotka kallistetaan taakse perspektiivimuunnoksella.

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

Raidoista ja ruudukoista lisää artikkelissa toistuvat CSS-liukuvärit. Jos animoit ruudukon liukumaan kohti katsojaa, kunnioita ihmisiä, jotka ovat pyytäneet laitteeltaan vähemmän liikettä. Ohjeet löytyvät artikkelista vähennetty liike.

Synthwaven, vaporwaven ja cyberpunkin vertailu

Nämä kolme sekoitetaan usein, koska niissä on yhteistä neon. Erot ovat pohjassa ja tunnelmassa, ja niillä on merkitystä palettia valitessasi.

Kolme synthwave-väriyhdistelmää eri tunnelmiin

Koko paletti on runsas. Useimmat hyvät synthwave-työt valitsevat rajatumman yhdistelmän ja pysyvät siinä. Nämä kolme kattavat tavallisimmin tavoitellut tunnelmat, ja jokainen rakentuu yllä olevista koodeista.

Jos rakennat kokonaista syötettä, valitse yksi yhdistelmä tavallisiin julkaisuihin ja säästä täysi auringonlasku suuriin hetkiin, kuten uutuuden julkaisuun. Syöte, jonka jokainen julkaisu on liekehtivä auringonlasku, menettää nopeasti erityisyytensä. Auringonlasku ei enää vedä puoleensa silloin, kun sitä todella tarvitset. Sama ajatus näkyy artikkelissa tummat liukuväritaustat, joka kertoo, miten yöpohja säilyy täyteläisenä muuttumatta tasaiseksi tai porrastuneeksi.

Synthwave-värien käyttö suunnitelmissasi

Synthwave sopii musiikkijulkaisuihin, pelistriimeihin, klubi-iltoihin, elokuvapodcasteihin ja kaikkeen, jonka halutaan tuntuvan myöhäisillan ajolta. Sudenkuoppa on luettavuus: suunnittelijat ympäröivät tekstin usein neonhehkulla, joka sumentuu pienessä koossa ja puhelimella. Aseta sanat sen sijaan tasaisen krominvalkoisina tai auringonkeltaisina taivaan tummimpaan kohtaan. Väri niiden ympärillä hoitaa hehkun.

• Pidä aurinko tai kirkkain lämmin alue erillään otsikosta.
• Käytä syaania ohuissa viivoissa ja pienissä yksityiskohdissa, älä suurissa täytöissä.
• Lisää hienoa rakeisuutta, jotta tumma taivas ei porrastu viennissä.
• Valitse yksi krominen tai kursiivinen otsikkokirjasin ja käytä sitä kaikkialla.

Gradientlyn Markit toimivat synthwaven tarpeiden mukaan: taustan rauhallisin, parhaan kontrastin alue siirtyy sanojesi taakse ja Automaattinen muste valitsee vaalean tai tumman tekstin rivi kerrallaan. Otsikko ei siis taistele auringon kanssa. Vuosikymmenestä, jota kaikki tämä jäljittelee, lisää artikkelissa 80-luvun estetiikka.