# Taivasliukuvärit: aamun, päivän, illan ja yön koodit

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

Taivas on liukuväri, jota jokainen on tutkinut vuosia huomaamattaan. Tässä koodit sen eri tunteihin oikean taivaan järjestyksessä sekä ohjeet tekstin sijoittamiseen.

## The short version

- Uskottava taivasliukuväri on syvin ylhäällä ja vaalein horisontissa, koska horisontin valo kulkee suuremman ilmamäärän läpi.
- Aamunkoitteessa ja iltahämärässä lämpimät värit ovat alhaalla horisontin lähellä ja viileät siniset pysyvät ylhäällä.
- Vie taivasliukuväri pystysuuntaan CSS:n arvolla `180deg`, jotta sommittelun yläosa näyttää taivaan yläosalta.
- Yötaivas näyttää luonnollisemmalta, kun horisontissa on hieman vaaleampi kaista tasaisen mustan sijaan.
- Tumma muste toimii keskipäivän taivaalla ja aamutaivaan alaosassa. Vaalea muste sopii aamutaivaan yläosaan, iltahämärään, siniseen hetkeen ja yöhön.

**Taivasliukuväri** kulkee syvemmästä yläväristä vaaleampaan horisonttiin, koska päivänvalo toimii niin: horisontin valo kulkee enemmän ilman läpi, siroaa enemmän ja lähestyy valkoista. Kun suunta on oikein, lähes mikä tahansa sininen näyttää taivaalta. Alla on kuuden vuorokaudenajan kopioitavat koodit aamunkajosta kuuttomaan yöhön sekä ohjeet niiden käyttöön ja tekstin väriin.

## Miten oikea taivas rakentuu

Selkeänä päivänä suoraan yläpuolen sininen on rikkaampi kuin kattojen lähellä. Auringonnousussa ja -laskussa valo kulkee niin paljon ilmakehän läpi, että suurin osa sinisestä siroaa pois ennen sinua. Punaiset, oranssit ja pinkit jäävät alas, lakipiste viileäksi. Tästä seuraa kaksi sääntöä: syvä ylhäällä ja vaalea alhaalla sekä lämpimät värit vain horisontin lähellä.

- Aamun indigo: #2b3a67
- Ensivalon roosa: #e3a6b4
- Keskipäivän lakipiste: #1f6fd1
- Keskipäivän horisontti: #a9d3f5
- Kultainen hetki: #f59e42
- Iltahämärän magenta: #b5507a
- Sininen hetki: #23407a
- Keskiyö: #03050f

Taivaan yksi päivä kahdeksana värinä. Jokainen ajankohta lainaa näistä kahta tai kolmea, aina tummempi ylhäällä.

## Aamunkoiton ja auringonnousun koodit

Aamunkoitto on päivän pehmein taivas. Ylhäällä on yhä yön indigo, keskellä lila ja horisontissa roosan ja persikan kaista. Tunnelma on hiljainen ja toiveikas, joten se sopii hyvinvointibrändeihin, aamurutiineihin, uutuustiedotteisiin ja lempeään viestintään.

- Aamunkoitto: indigosta persikkaan: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Vaalea ensivalo: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Auringonnousu: lilasta aprikoosiin: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Kolme aamunkoittoa. Lämpimät pisteet eivät nouse alimman kolmanneksen yli, joten ilme näyttää auringonnousulta eikä -laskulta.

## Selkeä keskipäivä ja päivätaivaan liukuvärit

Selkeä keskipäivä on klassinen **taivaansininen liukuväri**: kylläinen sininen ylhäällä häipyy vaaleaan lähes valkoiseen siniseen horisontissa. Pidä sävy vakaana ja anna vaaleuden tehdä työ. Jos alin piste muuttuu harmaaksi vaaleansinisen sijaan, taivas alkaa näyttää saastuneelta. Utuinen iltapäivä on sama ajatus vähemmällä kylläisyydellä, pilvipäivä taas vaihtaa sinisen viileään harmaaseen.

- Selkeä keskipäivä: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Utuinen iltapäivä: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Pilvinen: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Päivätaivaita. Selkeä keskipäivä on se, mitä taivaansinisellä yleensä tarkoitetaan. Pilvinen sopii rauhaan ilman väriä.

Lisää sinisiä tummansinisestä jäähän löydät [sinisen liukuvärin](https://gradiently.design/fi/guide/blue-gradient) koodeista. Jos haluat myös veden taivaan alle, [meriliukuväri](https://gradiently.design/fi/guide/ocean-gradient) toimii toisin päin: vaalea ylhäällä, syvä alhaalla.

## Kultaisen hetken, iltahämärän ja sinisen hetken koodit

Iltataivas tekee liukuväreistä dramaattisia. Kultaisessa hetkessä päivän sininen pysyy ylhäällä ja horisontissa on vahvaa meripihkaa. Niiden välinen pehmeä harmahtava kaista on todellinen, joten älä vastusta sitä. Iltahämärä syventää sinisen tummansiniseksi ja lisää magentaa ja korallia. Sininen hetki, lyhyt vaihe auringon laskettua, on lähes kokonaan sininen ja yksi imartelevimmista tummista taustoista.

- Kultainen hetki: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Iltahämärä: tummansinisestä koralliin: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Sininen hetki: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Iltataivaita. Iltahämärä on tämän sivun koodeista vilkkain, joten anna sille vähemmän sanoja ja enemmän tilaa.

Jos sommittelu käyttää vain oransseja ja pinkkejä ilman sinistä, olet siirtynyt taivaasta auringonlaskuun. [Auringonlaskuliukuvärin](https://gradiently.design/fi/guide/sunset-gradient) koodit sopivat silloin paremmin.

## Yötaivaan liukuvärikoodit

Yötaivas on harvoin täysin musta. Kaupungit, kuu ja ilmakehän hento hohde pitävät horisontin hieman lakipistettä vaaleampana. Lähes musta yläosa ja syvänsininen horisontti näyttävät taivaalta; päinvastoin ne näyttävät reiältä. Tähdet, kuunvalo ja monet tummansiniset löytyvät oppaasta [yötaivaan liukuväri](https://gradiently.design/fi/guide/night-sky-gradient).

Kuuton yö: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Lähes musta ylhäällä, syvä tummansininen horisontissa. Lisää hienoa rakeisuutta, koska näin tumma liukuväri raidoittuu näytöillä helposti.

> **Tummat taivaat raidoittuvat** Sinisen hetken ja yön koodeissa on vähän erillisiä väriarvoja, joten näytöt ja pakatut viennit näyttävät sävyportaita. Kevyt kohina korjaa tämän, kuten [liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää.

## Mikä taivas sopii mihinkin sommitteluun

| Taivas | Tunnelma | Sopii | Tekstin väri |
| --- | --- | --- | --- |
| Aamunkoitto | Lempeä, toiveikas | Hyvinvointi, lanseeraukset, aamutapahtumat | Valkoinen ylhäällä, tumma indigo horisontissa |
| Selkeä keskipäivä | Avoin, optimistinen | Matkailu, sovellukset, kesätarjoukset | Tumma laivastonsininen |
| Pilvinen | Rauhallinen, vakava | Raportit, hillityt tiedotteet | Hiilenharmaa |
| Kultainen hetki | Lämmin, nostalginen | Majoitus ja ravintolat, valokuvaus, häät | Tummanruskea tai valkoinen yläosassa |
| Iltahämärä | Dramaattinen, sosiaalinen | Tapahtumat, musiikki, yöelämä | Valkoinen |
| Sininen hetki ja yö | Arvokas, keskittynyt | Teknologia, elokuva, myöhäiset aukiolot | Valkoinen tai vaaleansininen |

Lähtökohta. Testaa oikeat sanasi oikealla taustalla, sillä yksi liukuväri voi tarvita tummaa tekstiä toisessa päässä ja vaaleaa toisessa.

Viimeinen huomio on taivaissa erityisen tärkeä, koska ne kulkevat tarkoituksella tummasta vaaleaan. Sijoita sanat rauhallisimpaan kohtaan ja valitse muste sen alueen, ei koko liukuvärin mukaan. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) kertoo lisää. Gradiently hoitaa tämän puolestasi: Mark pitää rauhallisimman alueensa sanojen takana ja Automaattinen muste valitsee vaalean tai tumman tekstin riveittäin Markin paletista.

Pystytarina aamunkoiton väreillä ja otsikolla Hereillä ennen aurinkoa yläosassa

Varhaisen tunnin tarina. Otsikko on vaaleana rauhallisessa ylätaivaassa, lisätiedot alempana pehmeimmässä valossa.

## Taivasliukuvärit kaikkiin muotoihin

Korkeat muodot sopivat taivaisiin: tarina tai pin näyttää koko nousun horisontista lakipisteeseen. Leveä muoto litistää sen, joten pidä horisontin värit alimmassa kolmanneksessa ja anna ylätaivaan täyttää loput. Jokainen koko vaatii eri asettelun, minkä vuoksi yhden kuvan rajaaminen eri muotoihin kadottaa usein horisontin.

- Tarina 1080×1920: 1080 × 1920
- Pinterest-pin 1000×1500: 1000 × 1500
- Verkkosivun pääkuva 1920×1080: 1920 × 1080
- X-otsake 1500×500: 1500 × 500

Tarinassa taivas saa hengittää. Otsakkeessa lämpimän horisonttikaistan on oltava ohuempi, ettei se täytä koko kuvaa.

## Taivasliukuväri CSS:llä jokaiseen vuorokaudenaikaan

Verkkosivulla kolme mukautettua ominaisuutta riittää kuvaamaan mitä tahansa taivasta. Vaihda yksi luokka, niin koko osio vaihtaa tuntia. Tämä sopii kävijän paikallista aikaa seuraavaan pääkuvaan tai tarinan mukana tummenevaan sivuun.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

Yksi liukuväri, neljä tuntia. Valitse luokka kävijän kelloa lukevalla JavaScript-rivillä tai aseta se sivukohtaisesti käsin.

Kulmat, väripisteiden sijainnit ja vararatkaisut löytyvät oppaasta [CSS:n lineaarinen liukuväri](https://gradiently.design/fi/guide/css-linear-gradient).

## FAQ

### Mitkä värit muodostavat taivasliukuvärin?

Päivätaivas kulkee yläosan kylläisestä sinisestä, kuten #1f6fd1, horisontin vaaleansiniseen, kuten #dceefb. Aamunkoitto ja iltahämärä lisäävät roosaa, persikkaa, magentaa tai korallia vain alaosaan.

### Mihin suuntaan taivasliukuvärin tulee kulkea?

Ylhäältä alas, tummin väri ylhäällä. CSS:ssä se on `linear-gradient(180deg, top, bottom)`.

### Miten erotan auringonnousun liukuvärin auringonlaskusta?

Suunnittelussa auringonnousu näyttää yleensä pehmeämmältä ja viileämmältä: lilaa ja persikkaa sekä matala ohut lämmin kaista. Auringonlasku kuvataan kylläisempänä, vahvemman oranssin ja magentan noustessa ylemmäs.

### Mikä tekstiväri toimii taivaansinisellä liukuvärillä?

Tumma laivastonsininen tai hiilenharmaa toimii keskipäivällä ja aamuhorisontissa. Käytä valkoista iltahämärässä, sinisessä hetkessä, yössä ja aamutaivaan yläosassa. Tarkista kontrasti tekstin todellisessa kohdassa.

### Miksi yötaivasliukuvärini näyttää raidalliselta?

Hyvin tummissa liukuväreissä on vähän sävyportaita, joten näytöt tuovat raidat esiin. Lisää kevyttä rakeisuutta ja vie PNG:nä voimakkaasti pakatun JPEG:n sijaan.