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

[Canonical HTML page](https://gradiently.design/fi/guide/synthwave-colors)

Auringonlasku, joka ei lopu, horisonttiin jatkuva ruudukko, kromikirjaimet ja mustelmanvärinen taivas. Tässä niiden paletti koodeineen ja liukuväreineen käyttöösi heti.

## The short version

- Synthwave-värien ytimessä ovat kirkas pinkki, sähkönsyaani, auringonlaskun oranssi ja violetti syvää indigoa tai lähes mustaa taivasta vasten.
- Tunnusomainen synthwave-liukuväri kulkee keltaisesta oranssin ja pinkin kautta violettiin kuin horisonttiin laskeva aurinko.
- Synthwave, jota kutsutaan myös retrowaveksi tai outruniksi, lainaa 1980-luvun elokuvajulisteista, pelihallipeleistä ja automainoksista myöhemmän nostalgian läpi nähtynä.
- Yötaivaan pohja on tärkein: ilman tummaa indigopohjaa neonvärit menettävät hehkunsa ja näyttävät tasaisilta.
- Pidä teksti tasaisen vaaleana suunnitelman tummimmassa kohdassa hehkulla ympäröimisen sijaan, jotta se pysyy terävänä pienessäkin koossa.

**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

- Keskiyö: #0b0221
- Indigotaivas: #241047
- Violetti usva: #6a1b9a
- Kirkas pinkki: #ff2a6d
- Auringonlaskun oranssi: #ff8a3d
- Auringonkeltainen: #ffd23f
- Sähkönsyaani: #05d9e8
- Krominvalkoinen: #d1f7ff

Kolme tummaa väriä taivaaseen, kolme lämmintä aurinkoon, yksi viileä neon ja kromikorostus. Useimmat synthwave-suunnitelmat käyttävät enintään viittä näistä.

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.

- Raidallinen aurinko: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`
- Yöstä horisonttiin: `linear-gradient(180deg, #0b0221 0%, #241047 45%, #6a1b9a 75%, #ff2a6d 100%)`
- Syaanista pinkkiin: `linear-gradient(135deg, #05d9e8 0%, #6a1b9a 55%, #ff2a6d 100%)`
- Kromikirjainten täyttö: `linear-gradient(180deg, #d1f7ff 0%, #7aa7c7 49%, #241047 50%, #05d9e8 100%)`
- Horisontin hehku: `radial-gradient(circle at 50% 100%, #ff2a6d 0%, #6a1b9a 30%, #241047 60%, #0b0221 90%)`
- Pelkkä yöpohja: `linear-gradient(180deg, #241047 0%, #0b0221 100%)`

Kromitäytön keskellä on jyrkkä raja, joka saa sen näyttämään horisonttia heijastavalta kiillotetulta metallilta.

> **Vältä harmaata pinkin ja syaanin välissä** Pinkki ja syaani ovat kaukana toisistaan väriympyrässä, joten suora sekoitus kulkee samean malvan kautta. Ohjaa sekoitus violetin läpi kuten yllä olevassa syaanista pinkkiin kulkevassa liukuvärissä, niin väri pysyy elävänä. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää syyn.

## 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.

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

Yötaivas, alaosastaan raidallinen auringonlasku-aurinko ja perspektiiviin kallistettu syaani ruudukko. Aseta aurinko taivaan ja ruudukon väliselle horisonttiviivalle.

Raidoista ja ruudukoista lisää artikkelissa [toistuvat CSS-liukuvärit](https://gradiently.design/fi/guide/css-repeating-gradient). 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](https://gradiently.design/fi/guide/reduced-motion).

## 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.

| Ilme | Pohja | Keskeiset värit | Tunnelma |
| --- | --- | --- | --- |
| Synthwave | Syvä indigoyö | Auringonlaskun lämpimät sävyt, syaani ruudukko, kromi | Yöajo, sankarillinen, nostalginen |
| Vaporwave | Pastelli tai pehmeä sinivihreä | Lila, minttu, lohenpunainen | Ironinen, unenomainen, ostoskeskus |
| Cyberpunk | Lähes musta, märät kadut | Hapankeltainen, myrkynvihreä, magenta | Karhea, urbaani, dystooppinen |

Synthwave on kolmesta lämpimin ja romanttisin. Muihin voit tutustua artikkeleissa [vaporwave-värit](https://gradiently.design/fi/guide/vaporwave-colors) ja [cyberpunk-väripaletit](https://gradiently.design/fi/guide/cyberpunk-colors).

## 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.

| Yhdistelmä | Värit | Sopii parhaiten |
| --- | --- | --- |
| Klassinen auringonlasku | `#0b0221`, `#ff2a6d`, `#ff8a3d`, `#ffd23f` | Levynkannet, tapahtumajulisteet, sankarillinen sisältö |
| Kylmä neon | `#0b0221`, `#241047`, `#05d9e8`, `#d1f7ff` | Tekniikka, pelaaminen, rauhallisempi myöhäisillan sisältö |
| Violetti hämärä | `#241047`, `#6a1b9a`, `#ff2a6d`, `#d1f7ff` | Podcastit, soittolistat, pehmeämmät brändisyötteet |

Jokainen yhdistelmä säilyttää yhden tumman pohjan ja lisää sen päälle enintään kolme väriä.

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](https://gradiently.design/fi/guide/dark-gradient-backgrounds), 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.

Night Drive Radio -podcastin neliökansi, jossa vaalea teksti on tummalla violetin ja pinkin synthwave-taustalla

Neliönmuotoinen podcast-kansi: tasainen vaalea teksti tummalla taivaalla, väri reunoilla.

Pystysuuntainen uutta singleä mainostava tarina, jossa vaalea teksti on ylhäällä tummalla synthwave-taivaalla ja lämmin väri alhaalla

Sama paletti tarinassa, lämmin auringonlasku alhaalla ja sanat ylhäällä pimeässä.

- 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](https://gradiently.design/fi/guide/80s-aesthetic).

## FAQ

### Mitä värejä synthwavessa käytetään?

Kirkasta pinkkiä, sähkönsyaania, auringonlaskun oranssia, auringonkeltaista ja violettia syvällä indigonsinisellä tai lähes mustalla taivaalla, krominvalkoisin korostuksin.

### Mikä on synthwave-liukuväri?

Auringonlasku, joka kulkee keltaisesta oranssin ja pinkin kautta violettiin. CSS:llä: `linear-gradient(180deg, #ffd23f 0%, #ff8a3d 35%, #ff2a6d 70%, #b3138f 100%)`.

### Onko synthwave sama kuin retrowave tai outrun?

Nimiä käytetään lähes toistensa synonyymeinä. Outrun viittaa usein ilmeen ajamiseen ja urheiluautoihin liittyvään puoleen, mutta paletti on sama.

### Mitä eroa on synthwaven ja vaporwaven väreillä?

Synthwave käyttää kylläisiä neonvärejä tummalla yötaivaalla. Vaporwave käyttää pehmeämpiä pastelleja, kuten lilaa, minttua ja lohenpunaista, vaaleilla tai sinivihreillä pohjilla.