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

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

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.

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.

Lisää sinisiä tummansinisestä jäähän löydät sinisen liukuvärin koodeista. Jos haluat myös veden taivaan alle, meriliukuväri 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.

Jos sommittelu käyttää vain oransseja ja pinkkejä ilman sinistä, olet siirtynyt taivaasta auringonlaskuun. Auringonlaskuliukuvärin 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.

Mikä taivas sopii mihinkin sommitteluun

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

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.

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.

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

Kulmat, väripisteiden sijainnit ja vararatkaisut löytyvät oppaasta CSS:n lineaarinen liukuväri.