# Auringonlaskun liukuvärit: oranssi, koralli ja hämärä

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

Useimmat auringonlaskun liukuvärit menevät pieleen samassa kohdassa: keskellä, jossa sininen kohtaa oranssin ja muuttuu harmaaksi. Oikea taivas ei koskaan tee niin. Tässä on luonnon käyttämä järjestys ja kymmenen sille rakennettua palettia.

## The short version

- Auringonlaskun liukuväri sekoittaa lämpimät värit, kuten kullan, oranssin ja korallin, pinkkiin, violettiin ja syvään illansiniseen.
- Oikeassa auringonlaskussa taivas kulkee horisontin keltaisesta ja oranssista punaisen ja pinkin kautta violettiin ja siniseen pään yläpuolella.
- Sinisen sekoittaminen suoraan oranssiin ohittaa välissä olevat pinkit ja violetit ja muuttuu keskeltä harmaaksi.
- Oranssin häivyttäminen suoraan mustaan muuttuu ruskeaksi, joten hämärän liukuvärit näyttävät paremmilta, kun ne tummenevat luumun tai indigon kautta.
- Sijoita teksti auringonlaskun liukuvärin tummempaan yläosaan, jossa kontrasti valkoiseen tekstiin on suurin.

**Auringonlaskun liukuväri** sekoittaa lämpimät värit, kullan, oranssin ja korallin, pinkkiin, violettiin ja syvään illansiniseen. Se on yksi suunnittelun rakastetuimmista liukuväreistä, koska jokainen tunnistaa sen ja lähes jokainen pitää siitä. Se on myös yksi helpoimmista saada pieleen. Salaisuus on seurata järjestystä, jota taivas oikeasti käyttää: lämmin ja kirkas horisontissa, viilenevä pinkin ja violetin kautta ylöspäin katsottaessa. Jos jätät nuo keskivärit väliin, liukuväri muuttuu harmaaksi.

## Auringonlaskun värien luonnollinen järjestys

Kun aurinko on matalalla, sen valo kulkee paljon paksumman ilmakehän läpi päästäkseen luoksesi. Matkalla ilma sirottaa sinistä valoa pois suorasta säteestä, joten auringon lähellä valo saapuu keltaisena, oranssina ja punaisena. Korkeammalla taivaalla, kauempana auringosta, sinistä on jäljellä enemmän. Tuloksena on värikaistojen pino horisontista ylöspäin.

Auringonlaskun koko järjestys: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Pään yläpuolen syvästä sinisestä violetin, pinkin ja oranssin kautta horisontin kultaan. Jokainen askel on seuraavan naapuri, joten mikään ei muutu harmaaksi.

| Korkeus taivaalla | Väri | Esimerkkikoodi |
| --- | --- | --- |
| Pään yläpuolella | Syvästä sinisestä indigoon | `#1e3a8a` |
| Ylätaivas | Violetista malvaan | `#6d28d9` |
| Keskitaivas | Pinkistä magentaan | `#db2777` |
| Alataivas | Oranssista koralliin | `#f97316` |
| Horisontti | Kullasta vaaleankeltaiseen | `#fcd34d` |

Selkeän auringonlaskun kaistat. Oikeat taivaat vaihtelevat pilvien, utun ja vuodenajan mukaan, mutta järjestys pitää.

## Auringonlaskun liukuvärien paletit koodeineen

Nämä kymmenen palettia noudattavat kaikki taivaan järjestystä ylhäältä alas. Jotkin käyttävät koko alueen, toiset vain lämpimän pään tai vain hämärän.

- Korallihämärä: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Aavikon ilta: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Sininen hetki: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Iltarusko: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Trooppinen, vain lämmin: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Persikkautu: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Välimeri: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Aurinko horisontissa: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Hiillos: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Kymmenen auringonlaskun liukuväriä. Säteittäinen sijoittaa itse auringon kuvan alareunaan.

Synthwave on aidon auringonlaskun tyylitelty neonserkku, ja [vaporwave-värit](https://gradiently.design/fi/guide/vaporwave-colors) ja [retroliukuvärit](https://gradiently.design/fi/guide/retro-gradients) vievät sitä suuntaa pidemmälle.

## Miksi auringonlaskun liukuvärit samenevat ja miten se korjataan

Klassisia virheitä on kaksi. Ensimmäinen on sinisen ja oranssin liittäminen suoraan yhteen. Ne ovat väriympyrässä lähes vastakkain, ja suora sekoitus niiden välillä keskiarvoistuu keskeltä harmaaksi. Taivas ei koskaan tee näin, koska se kulkee violetin ja pinkin kautta. Toinen on oranssin häivyttäminen mustaan tummemman tunnelman vuoksi. Tumma oranssi on ruskeaa, joten liukuväri näyttää ruosteelta tai mudalta eikä illalta.

- Sinisestä oranssiin: harmaa keskikohta: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Violetin ja pinkin kautta: puhdas: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Mustasta oranssiin: ruskea: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Indigo luumun kautta: hämärä: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Kaksi sameaa auringonlaskua ja niiden korjaukset. Molemmat korjaukset lisäävät värit, joiden kautta taivas itse kulkee.

Jos haluat vähemmän pysäytyspisteitä, sekoittaminen OKLCH:ssa auttaa: se pitää värit kylläisinä sekoituksen keskikohdan läpi. Katso [OKLCH-liukuvärit CSS:ssä](https://gradiently.design/fi/guide/css-gradient-oklch) ja teoriaa varten [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients).

## Missä auringonlaskun liukuvärit toimivat

Auringonlaskuissa on selvä tunne: päivän loppu, lämpö, hieman nostalgiaa. Se tekee niistä luontevia joihinkin tehtäviin ja outoja toisiin. Kirkas, koko alueen auringonlasku sopii kesätapahtumiin, matkailuun, musiikkiin ja ravintola-alalle. Hämärä, enimmäkseen violetti versio sopii iltajulkaisuihin, podcasteihin ja kaikkeen pohdiskelevaan. Vain lämmin versio, kullasta koralliin, sopii ruokaan, juomaan ja alennusmyynteihin.

- **Tapahtumajulisteet ja kutsut:** värit sanovat ilta ennen kuin päivämäärä ehtii.
- **Matkailu ja ravintola-ala:** kultainen hetki on kuvatuin valo, mitä on, ja ihmiset tunnistavat sen.
- **Musiikin kannet ja soittolistat:** hämärän paletit tuntuvat elokuvallisilta ja hieman haikeilta.
- **Kausikampanjat:** syksyn myötä viilenevä auringonlasku merkitsee vuodenajan ilman uutta kuvitusta.

Missä ne sopivat huonommin: vakava rahoitusala, terveydenhuolto ja kaikki, minkä pitäisi tuntua neutraalilta. Lämpö tuo mieleen vapaa-ajan. Auringonlaskun värit ovat myös tiukasti väriympyrän lämpimällä puolella, ja [lämpimät ja kylmät värit](https://gradiently.design/fi/guide/warm-and-cool-colors) selittää, miten lämpötila muuttaa suunnitelman tunnelmaa.

## Miten rakennat oman auringonlaskun liukuvärin

1. **Valitse, kuinka paljon taivasta haluat** Koko alue draamaan, vain lämmin pää energiaan tai vain hämärä rauhaan.
2. **Laita lämmin alas** Kulta ja oranssi kuuluvat lähelle horisonttia. Ylösalaiset auringonlaskut voivat toimia, mutta ne näyttävät tyylitellyiltä.
3. **Älä koskaan ohita naapuria** Lisää sinisen ja oranssin väliin violetti ja pinkki. Lisää oranssin ja tumman väliin luumu tai indigo.
4. **Anna lämpimälle kaistalle vähemmän tilaa** Oikeilla taivailla kirkkaimmat värit pysyttelevät horisontin tuntumassa. Kun ne pidetään alimmassa neljänneksessä, liukuväri tuntuu luonnolliselta.
5. **Lisää rakeisuutta** Pitkät, tasaiset taivaat raidoittuvat helposti. Hieno kohinakerros pitää sekoituksen tasaisena pakkauksen jälkeen.

## Teksti auringonlaskun liukuvärin päällä

Auringonlaskun liukuvärin yläosa on tumma ja viileä, täydellinen valkoiselle tekstille. Alaosa on kirkas ja lämmin, täydellinen tummalle tekstille tai ei millekään. Keskikohta, jossa pinkki kohtaa oranssin, on vaikein paikka kummallekin. Sijoita otsikot ylös ja yksityiskohdat alas tai pidä sanat yhdellä rauhallisella kaistalla.

Pystysuuntainen tapahtumajuliste, jossa otsikko on lähellä lämpimän iltaliukuvärin yläreunaa

Otsikko korkealla tummemmalla taivaalla, yksityiskohdat alempana.

Pystysuuntainen aletarina, jossa otsikko on alareunan lämpimän hehkun yläpuolella

Tarina, jossa lämmin hehku on sanojen alla.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

Aurinko horisontissa -paletti sivun herona, otsikko tummalla taivaalla hehkun yläpuolella.

Lisää taivas- ja maisemapaletteja on oppaassa [väripaletit luonnosta](https://gradiently.design/fi/guide/nature-color-palettes) ja pinkkivetoisia versioita oppaassa [pinkit liukuvärit](https://gradiently.design/fi/guide/pink-gradient).

## FAQ

### Mitä värejä auringonlaskun liukuvärissä on?

Tyypillisesti kultaa ja oranssia horisontissa, sitten korallia, pinkkiä ja magentaa ja lopuksi violettia ja syvää sinistä pään yläpuolella.

### Miksi auringonlaskun liukuvärini näyttää samealta?

Yleensä siksi, että se sekoittaa sinisen suoraan oranssiin tai oranssin suoraan mustaan. Lisää violetti ja pinkki sinisen ja oranssin väliin ja tummenna luumun tai indigon kautta mustan sijaan.

### Mikä on auringonlaskun liukuvärin CSS-koodi?

Kokeile täyteen auringonlaskuun koodia linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Jokaisen tämän sivun paletin voi kopioida CSS:nä.

### Mihin teksti kuuluu auringonlaskun liukuvärissä?

Tummempaan, viileämpään yläosaan valkoiselle tekstille tai vaaleaan lämpimään kaistaan tummalle tekstille. Vältä keskikohtaa, jossa pinkki kohtaa oranssin.