Yötaivaan liukuväri: syvät siniset, tähdet ja kuunvalo

Yötaivaan liukuväri on pystysuuntainen liuku lähes mustasta yläosasta pehmeämpään siniseen horisontissa. Aivan alareunassa on usein hento lämmin tai sinivihreä kaista. Suunta on tärkeä: taivaan laki on yön tummin osa, ja horisontissa on vielä kaupungin, laskevan auringon tai kuun hajavaloa. Kun järjestys on oikein, jo kaksi väriä näyttää yöltä. Kuu, muutama tähti ja rakeisuus tekevät siitä paikan.

Oikean yötaivaan värit

Pimeän taivaan valokuvissa on hyvin vähän puhdasta mustaa. Taivaan laki on syvän tummansininen, jossa on häivähdys violettia. Keskiosa on indigoa tai liuskekiven sävyinen. Horisonttiin tarttuu ympäristön valo: katuvalojen oranssi, sinisen hetken lila tai korkeiden leveysasteiden revontulten hento vihreä. Näiden valitseminen erillisiksi väripisteiksi erottaa yötaivaan tavallisesta tummansinisestä liukuväristä.

Yötaivaan liukuvärikoodit

Jokainen kulkee ylhäältä alas 180 asteessa, joten tummin väri jää kuvan yläosaan. Kopioi sellaisenaan tai vaihda horisontin väripiste muuttaaksesi aikaa ja ympäristöä.

Huomaa, etteivät väripisteet ole tasavälein. Suurin osa kuvasta pysyy tummana ja väri muuttuu alimmassa viidenneksessä, kuten oikeassa horisontissa. Tasaväli tekee taivaasta rampin kupolin sijaan. Epätasaisten välien perusteet löytyvät oppaasta liukuvärin väripisteet.

Näin lisäät kuun

Kuu on kolmiosainen säteittäinen liukuväri: pieni lähes valkoinen kiekko, nopea siirtymä vaaleansiniseen ja pitkä hento sädekehä, joka häipyy taivaaseen. Pidä kiekko pienenä, noin 3-5 prosentissa kuvan leveydestä. Suuri pehmeä kuu näyttää kohdevalolta. Aseta se sivuun keskeltä, korkealle kulmaan, ettei se kilpaile otsikon kanssa.

Yhdistä kuu horisontin hehkuun kerrostamalla säteittäinen liukuväri lineaarisen päälle. Säteittäisen liukuvärin opas käsittelee sijainteja ja kokoja tarkemmin.

Näin piirrät tähdet CSS:llä

Tähdet ovat pieniä säteittäisiä liukuvärejä: terävä valkoinen piste, joka päättyy pikselin murto-osan päässä. Anna kullekin tähtikerrokselle oma background-size, jotta toistoväli vaihtelee. 200, 230, 290 ja 170 pikselin laatat toistuvat eri tahdissa, eikä silmä löydä ruudukkoa. Vaihtele myös peittävyyttä: oikeat tähdet eivät ole yhtä kirkkaita.

.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}

Designideoita yötaivaan liukuvärille

Yötaivas sopii iltatapahtumiin, lanseerauksiin, uni- ja hyvinvointibrändeille, tähtitiedekerhoille, musiikkijulkaisuihin ja kaikkeen pimeällä tapahtuvaan. Tumma yläpuolisko on luonteva paikka vaalealle tekstille, ja kirkkaampi horisontti antaa katseelle perustan. Aseta otsikko keskikohdan yläpuolelle ja pidä kuu siitä erillään. Jos sanat osuvat horisonttikaistaan, tarkista luettavuus: teksti liukuvärillä käsittelee kontrastisääntöjä.

Näin estät tummansinisen liukuvärin porrastumisen

Tummansinisessä liukuvärin porrastuminen näkyy selvimmin, koska näytöillä on vähän erottuvia sävyaskelia lähes mustien välillä. Levitä tummimmat väripisteet kauemmas toisistaan, lisää hieno kohinakerros hyvin pienellä peittävyydellä ja vältä voimakasta JPEG-pakkausta. Tummat liukuväritaustat tarjoaa lisää tummia paletteja, ja galaksiliukuvärit vie saman taivaan violettiin ja magentaan.

Jos et halua rakentaa rakeisuutta, valoa ja luettavuutta käsin, Gradientlyn Markit ovat eläviä taustoja. Ne piirtyvät kaikissa käyttämissäsi ko’oissa ja rauhoittuvat sanojesi taakse. Hae Markkinoilta värisanoilla kuten ”midnight” tai ”deep navy” ja suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla.