Meriliukuväri: koodit matalikosta syvyyksiin

Meriliukuväri sekoittaa sinisiä ja sinivihreitä kuten meri: vaaleaa akvaa hiekan päällä, turkoosia matalikossa, kirkasta sinistä avovedessä ja lähes mustaa tummansinistä syvyyksissä. Vie liuku ylhäältä alas, vaaleasta tummaan, ja se näyttää syvyydeltä ilman selitystä. Alla olevat koodit seuraavat sukellusta. Lisäksi saat horisonttiliu’ut, koko sivun CSS-meren ja veden päällä erottuvat tekstivärit.

Miksi meri on sininen ja mitä se merkitsee liukuvärille

Vesi imee ensin auringonvalon punaisen pään, sitten keltaisen ja vihreän. Syvemmälle mentäessä jäljelle jää lähinnä sininen, kunnes sekin hiipuu. Vaalean hiekan päällä oleva matala vesi heijastaa paljon valoa ja näyttää turkoosilta, syvä vesi tummansiniseltä. Järjestystä seuraava meriliukuväri tuntuu luonnolliselta. Tumma sininen turkoosin yläpuolella näyttää nurinkuriselta, vaikkei syytä osaisi sanoa.

Matalan meren liukuvärit

Kirkas pää: vesi, jonka näet rannalta tai veneestä selkeällä säällä. Aurinkoiset, puhtaat ja kutsuvat liu’ut sopivat lomabrändeille, uima-asuille, allasyrityksille ja kesäruokalistoille. Trooppisempaa puolta käsittelee turkoosit liukuvärit.

Avomeren liukuvärit

Kauempana rannasta meri menettää vihreänsä ja muuttuu kirkkaaksi, varmaksi siniseksi. Liu’ut tuntuvat luotettavilta, rauhallisilta ja kyvykkäiltä. Siksi ne sopivat purjehdusseuroille, matkavakuuttajille, merentutkimukseen ja teknologiabrändeille, jotka haluavat sinistä ilman yritystummansinisen kylmyyttä. Siniset liukuvärit käsittelee laajempaa sinisten joukkoa.

Syvänmeren liukuvärit

Sukelluksen pohjalla meri muuttuu lähes mustaksi ja sinisestä jää vain häivähdys. Ilme on yhtä aikaa dramaattinen ja hiljainen: sukelluskoulut, dokumentit, ylelliset kellot ja kalaravintolat pimeällä. Hento ylhäältä tuleva hehku, kuten pinnan valo, estää tyhjyyden tunteen. Tummat liu’ut porrastuvat helposti, joten lue liukuvärin porrastuminen ennen vientiä.

Horisontin ja rantaviivan liukuvärit

Meriaiheiseen designiin kuuluu usein taivas tai ranta. Horisontin temppu on terävä raja: kaksi väripistettä samassa kohdassa, jolloin taivas päättyy ja meri alkaa selkeällä viivalla. Rantaviiva toimii päinvastoin, häivyttäen meren hiekkaan vaalean vaahtopisteen kautta. Näin lämmin ja viileä eivät kohtaa harmaana. Liukuvärin väripisteet selittää pisteiden sijainnit.

Suunnan valitseminen eri muodoille

Koska meriliukuväri tarkoittaa syvyyttä, se toimii parhaiten pystysuunnassa. Korkeat muodot näyttävät koko sukelluksen. Leveissä horisonttiliuku tai säteittäinen hehku toimii yleensä paremmin kuin koko meren puristaminen matalaan kuvaan. Pystyjulkaisu on välimaasto: lempeä liuku avomerestä syvyyteen toimii, kun otsikko asettuu yhteen kaistaan eikä muutoksen yli.

Tässä yksi rajattu kuva pettää: valo päätyy väärään paikkaan puolessa ko’oista. Gradientlyn Mark piirtyy sen sijaan uudelleen jokaisessa muodossa. Designer voi tehdä tarinan, julkaisun ja bannerin yhdestä toimeksiannosta, joten meri asettuu oikein jokaiseen.

Koko sivun meriliukuväri CSS:llä

Pitkä sivu voi muuttua sukellukseksi: kirkas ylhäällä, syvä alatunnisteessa. Liitä liukuväri koko asiakirjan korkeuteen ikkunan sijaan, anna sille tasainen varaväri ja lisää pehmeä pintahehku ylös. CSS:n lineaariset liukuvärit käsittelee syntaksia.

html {
  background-color: #082f49; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  color: #082f49;
  background-image:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}

/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }

Teksti meriliukuvärillä

Meriliuku muuttuu hyvin vaaleasta hyvin tummaan, joten yksi tekstiväri ei toimi kaikkialla. Syvä tummansininen #082f49 vaalealla taivaansinisellä #7dd3fc antaa kontrastiksi noin 8,3:1. Valkoinen mainingilla #075985 antaa noin 7,6:1, mutta avomerellä #0284c7 suhde laskee noin 4,1:1:een. Se riittää suuriin otsikoihin, ei leipätekstiin. Sijoita sanat niille sopivaan väriin ja katso lisää keinoja oppaasta teksti liukuvärillä.