# Meriliukuväri: koodit matalikosta syvyyksiin

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

Meri on jo liukuväri: vaalea hiekan päällä, kirkas auringon ulottuessa veteen ja lähes musta sen tavoittamattomissa. Kopioi tämä järjestys, niin meriliuku näyttää aidolta. Tässä koodit syvyys syvyydeltä.

## The short version

- Meriliukuväri sekoittaa sinisiä ja sinivihreitä samassa järjestyksessä kuin oikea vesi: vaaleaa ja turkoosia matalikossa, kirkasta sinistä avovedessä ja lähes mustaa tummansinistä syvyyksissä.
- Vesi imee punaisen valon ensin, minkä vuoksi meri muuttuu syvemmällä sinisemmäksi ja tummemmaksi.
- Pystysuuntainen meriliukuväri, vaalea ylhäällä ja tumma alhaalla, näyttää syvyydeltä. Kahden sinisen terävä raja näyttää horisontilta.
- Valkoinen teksti toimii meriliukuvärin syvänsinisellä puoliskolla, vaalea matalikko tarvitsee tummansinisen tekstin.
- Meriliukuvärit sopivat matkailuun, uintiin, purjehdukseen, mereneläviin, kestävyyteen ja rauhallisiin teknologiatuotteisiin.

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

- Vaahto: #e0f7f4
- Matalikko: #7ee0d6
- Laguuni: #22b8cf
- Avomeri: #0284c7
- Maininki: #075985
- Hämärävyöhyke: #0c3b66
- Syvyys: #082f49
- Syvänne: #020c1b

Meri ylhäältä alas. Useimmat meriliukuvärit käyttävät tästä sarjasta kolmea tai neljää vierekkäistä väripistettä.

## 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](https://gradiently.design/fi/guide/turquoise-gradient).

- Vaahdosta matalikkoon: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)`
- Kirkas vesi: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)`
- Aurinko vedellä: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)`
- Riutan pudotus: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)`

Matalan veden liu’ut alkavat vaalealla tai kirkkaalla pisteellä, kuten valoisa vesi hiekan päällä.

## 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](https://gradiently.design/fi/guide/blue-gradient) käsittelee laajempaa sinisten joukkoa.

- Avomeri: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)`
- Atlantti: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)`
- Ulappa: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)`
- Maininki: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)`

Avoveden siniset. Vähemmän vihreää, enemmän syvyyttä ja silti tarpeeksi kirkas yläosa päivänvalon tuntua varten.

## 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](https://gradiently.design/fi/guide/gradient-banding) ennen vientiä.

- Laskeutuminen: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)`
- Valoa pinnalta: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)`
- Bioluminesenssi: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)`

Syvänmeren liu’ut. Yksi pehmeä valonlähde riittää, kaikki muu on syvyyttä.

## 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](https://gradiently.design/fi/guide/gradient-stops) selittää pisteiden sijainnit.

- Aamunkoiton horisontti: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)`
- Keskipäivän horisontti: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)`
- Rantaviiva: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)`

Terävät rajat tekevät horisontin, vaalea vaahtopiste pehmeän rantaviivan.

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

- Tarina 1080×1920: 1080 × 1920
- Pin-kuva 1000×1500: 1000 × 1500
- Julkaisu 1080×1350: 1080 × 1350
- Verkkopääkuva 1920×1080: 1920 × 1080
- LinkedIn-banneri 1584×396: 1584 × 396

Käytä tarinoissa ja pin-kuvissa koko korkeutta sukellukseen. Kokeile pääkuvassa ja bannerissa horisonttia tai toiselta sivulta tulevaa valoa.

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](https://gradiently.design/fi/guide/css-linear-gradient) käsittelee syntaksia.

```css
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; }
```

Sivu, joka syvenee vierittäessä. Käytä tummaa tekstiä kirkkaissa yläosissa ja vaaleaa alaosissa.

## 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ä](https://gradiently.design/fi/guide/text-on-gradient).

Purjehdusseuran tarina selkeällä otsikolla ja meriliukuvärillä, joka tummenee kirkkaasta sinisestä syvän tummansiniseen

Tarina kulkee yläosan kirkkaasta vedestä alareunan syvään siniseen, sanat rauhallisimmassa kaistassa.

## FAQ

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

Vaalea akva, turkoosi, kirkas sininen, syvä sininen ja lähes musta tummansininen tässä järjestyksessä ylhäältä alas. Koodit kuten `#7ee0d6`, `#0284c7` ja `#082f49` kattavat asteikon.

### Kulkeeko meriliukuväri vaaleasta tummaan vai tummasta vaaleaan?

Vaalea ylhäällä ja tumma alhaalla, kuten valo hiipuu syvyyden mukana oikeassa vedessä.

### Miten teen horisonttiviivan CSS-liukuväriin?

Anna kahdelle väripisteelle sama sijainti, esimerkiksi `#bae6fd 45%, #0284c7 45%`. Väri vaihtuu silloin terävällä viivalla liu’un sijaan.

### Mikä tekstiväri toimii meriliukuvärillä?

Tumma sininen vaaleassa yläosassa ja valkoinen syvässä alaosassa. Tarkista kohta suoraan jokaisen tekstirivin takana.

### Miten meriliukuväri eroaa sinisestä liukuväristä?

Meriliukuväri seuraa oikean veden järjestystä ja sisältää yleensä turkoosia sekä lähes mustaa tummansinistä. Sininen liukuväri voi olla mikä tahansa sinisten yhdistelmä.