# Petrolinsininen liukuväri: laguunista syvänmeren sävyihin

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

Petrolinsininen on sinisen ja vihreän puolivälissä, joten se on rauhallinen, hienostunut ja helppo yhdistää muihin sävyihin. Etene laguunista syvänmereen ja poimi koodit joka syvyydelle.

## The short version

- Petrolinsininen liukuväri yhdistää sinivihreitä sävyjä, tavallisesti vaaleasta akvasta syvään vihertävään siniseen.
- Petrolinsininen sulautuu siististi lähisävyihinsä: syaaniin, smaragdinvihreään, siniseen ja laivastonsiniseen.
- Lämpimät korallin, persikan ja kuparin sävyt ovat petrolinsinisen vastavärejä ja saavat sen hehkumaan, kun pidät ne erillään liukuväristä.
- Valkoinen teksti vaatii kontrastin vuoksi vähintään sävyn #0f766e syvyisen petrolinsinisen; vaaleammat sävyt tarvitsevat tumman tekstin.
- Hyvin tumma petrolinsininen sopii erinomaisesti tumman tilan pohjaksi, sillä se tuntuu mustaa pehmeämmältä ja laivastonsinistä yllätyksellisemmältä.

**Petrolinsininen liukuväri** kulkee sinivihreiden sävyjen välillä: vaaleassa päässä on akvaa, keskellä selkeä petrolinsininen ja tummassa päässä mustemainen vihertävä sininen. Sinisen ja vihreän puolivälissä oleva petrolinsininen sulautuu helposti kumpaankin suuntaan eikä juuri koskaan muutu sameaksi. Alla olevat koodit vievät sinut aurinkoisesta laguunista syvänmereen. Mukana on ohjeita tehosteväreihin, CSS:ään ja kunkin sävyn typografiaan.

## Petrolinsininen sävyasteikko liukuvärien pohjaksi

Useimmat hyvät petrolinsiniset liukuvärit käyttävät tämän asteikon kahdesta neljään sävyä. Valitse vierekkäiset sävyt pehmeään liukuun tai ohita kolme askelmaa, kun kaipaat dramaattisuutta. Alla olevia nimiä käytetään läpi artikkelin.

- Matalikko: #ccfbf1
- Laguuni: #5eead4
- Akva: #2dd4bf
- Petrolinsininen: #14b8a6
- Riutta: #0d9488
- Rakkolevä: #0f766e
- Syvä petrolinsininen: #115e59
- Syvänne: #042f2e

Kahdeksan petrolinsinistä vaaleasta tummaan. Kaksi tai kolme vierekkäistä sävyä luo rauhallisen liu’un; vaaleasta tummaan etenevä liuku tuo syvyyttä.

## Vaaleat petrolinsiniset liukuvärit: laguuni ja matalikko

Vaalea petrolinsininen on puhdas, raikas ja hillityn iloinen. Se sopii hyvinvointiin, uima-altaisiin ja uima-asuihin, hammas- ja terveysklinikoille sekä tuotteisiin, joiden halutaan tuntuvan hygieenisiltä ilman puhtaan sinisen kylmyyttä. Liu’uta sitä valkoiseen tai vaaleaan minttuun, niin ilme pysyy pehmeänä.

- Matalikko: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Laguuni: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Taivaasta laguuniin: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Aurinkoinen allas: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Vaaleat petrolinsiniset pysyvät raikkaina. Jokaisessa on lähes valkoinen väripiste, jonka päälle tumma teksti sopii.

## Keskisyvät petrolinsiniset liukuvärit: riutta ja jade

Asteikon keskellä petrolinsininen on itsevarmimmillaan. Nämä sävyt sopivat sovelluksiin, finanssiteknologian näkymiin, vastuullisiin brändeihin ja koulutukseen. Niissä yhdistyvät sinisen luotettavuus ja vihreän elinvoima. Smaragdin suuntaan kallistuva sävy tuntuu luonnolliselta, sinisen suuntaan kallistuva tekniseltä.

- Riutta: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Syaanista rakkolevään: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Petrolinsinisestä siniseen: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Kolmiportainen petrolinsininen: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Keskisyvät petrolinsiniset kallistuvat smaragdiin tai siniseen. Valitse suunta sen mukaan, millaisen tunnelman haluat brändillesi.

## Tummat petrolinsiniset liukuvärit: syvänmeri

Tummassa päässä petrolinsininen muuttuu lähes mustaksi, jossa on viileä vihreä vivahde. Se on petrolinsinisen hienostunein muoto: sopiva asianajotoimistoille, väkeville juomille, hotelleille, arkkitehtuuriin ja iltatilaisuuksiin. Se on myös erinomainen pohja yhdelle kirkkaalle tehostevärille, sillä mikään siinä ei kilpaile huomiosta. Tummat liu’ut voivat raidoittua pakatussa viennissä, joten pieni rakeisuus auttaa. Lue [liukuvärien raidoittumisesta](https://gradiently.design/fi/guide/gradient-banding).

- Laskeutuminen: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Valo ylhäältä: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Syvä petrolinsininen ja keskiyö: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Valonsäde: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Tummia petrolinsinisiä, joissa on yksi valonlähde. Ilme tuntuu arvokkaalta ja rauhalliselta.

## Lämpimät tehostevärit petrolinsiniselle liukuvärille

Petrolinsinisen vastaväri väriympyrässä on lämmin punaoranssi, joten koralli, persikka, aprikoosi ja kupari tuovat sen eloon. Pidä lämmin väri erillään itse liu’usta: petrolinsinisestä koralliin kulkeva liukuväri muuttuu keskeltä sameanharmaaksi. Käytä tehosteväriä mieluummin painikkeessa, otsikossa tai pienessä muodossa. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) selittää vetovoiman, ja [koralliliukuväreistä](https://gradiently.design/fi/guide/coral-gradient) löydät vastapuolen koodit.

- Vältä: harmaa keskikohta: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Kupariaurinko syvällä pohjalla: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Vaalea petrolinsininen ja persikka: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

Kylläinen petrolinsinisen ja korallin liuku harmaantuu keskeltä. Pieni lämmin valo petrolinsinisellä tai kahden vaalean sävyn liuku toimii paljon paremmin.

Huomaa kolmas näyte: vastavärien hyvin vaaleat sävyt sulautuvat hyvin, koska menetettävää kylläisyyttä on vähän. Tästä on hyötyä pehmeissä pakkausilmeissä ja hääpainotuotteissa.

## Petrolinsinisen liukuvärin valinta brändillesi

Petrolinsininen on suosittu terveys-, rahoitus- ja vastuullisuusbrändeissä, joten pelkkä sävy ei erotu. Erottuvuuden tuovat valitsemasi syvyys, siihen yhdistetty tehosteväri ja pinta. Aloita suunnitelman tehtävästä.

| Jos kyseessä on | Kokeile | Yhdistä tähän |
| --- | --- | --- |
| Klinikka, uima-allas tai ihonhoitobrändi | Matalikko tai Laguuni | Hiilenharmaa teksti, tyhjä tila |
| Sovellus tai finanssiteknologian tuote | Petrolinsinisestä siniseen | Yksi korallinsävyinen painikeväri |
| Kahvila, kukkakauppa tai puutarhamyymälä | Jade | Kerma ja terrakotta |
| Hotelli, baari tai asianajotoimisto | Valo ylhäältä | Kupariset tai messinkiset yksityiskohdat |
| Iltatilaisuus | Valonsäde | Vaalean laguuninsävyinen otsikko |

Lähtökohtia, ei sääntöjä. Kokeile jokaista oikealla otsikollasi ja logollasi.

## Petrolinsinisen liukuvärin CSS tummaan käyttöliittymään

Syvä petrolinsininen on kaunis vaihtoehto mustalle tai laivastonsiniselle tummassa käyttöliittymässä. Se tuntuu puhdasta mustaa pehmeämmältä ja antaa silti vaalealle tekstille runsaasti kontrastia. Tässä on sovelluksen pohjan tausta, jossa sivun yläosan takana on pehmeä hehku. Lue lisää [tumman tilan suunnittelusta](https://gradiently.design/fi/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

Syvä petrolinsininen pohja, jonka yläosassa on petrolinsininen hehku. Vaaleat laguuninsävyiset linkit pysyvät luettavina.

## Luettava teksti petrolinsinisellä

Keskisyvä petrolinsininen on petollinen. `#14b8a6` näyttää riittävän voimakkaalta valkoiselle tekstille, mutta sen kontrasti on noin 2,5:1 ja jää selvästi vaatimusten alle. Valkoinen vaatii Rakkolevän (`#0f766e`, noin 5,5:1) tai sitä tummemman sävyn. Käytä Akvalla ja sitä vaaleammilla sävyillä tekstivärinä Syvännettä `#042f2e`: teksti pysyy petrolinsinisen sävyperheessä ja on helppo lukea.

| Tausta | Valkoinen teksti | Syvänteen teksti #042f2e |
| --- | --- | --- |
| Laguuni `#5eead4` | Ei riitä | Noin 9,8:1 |
| Petrolinsininen `#14b8a6` | Noin 2,5:1, ei riitä | Noin 5,8:1 |
| Riutta `#0d9488` | Noin 3,7:1, vain suurelle tekstille | Heikko |
| Rakkolevä `#0f766e` | Noin 5,5:1, riittää | Ei riitä |
| Syvä petrolinsininen `#115e59` | Noin 7,6:1, riittää | Ei riitä |

Tekstiväri vaihtuu tummasta valkoiseen Riutan ja Rakkolevän välissä.

Kylpylän pystyjulkaisu, jossa valkoinen teksti on syvällä petrolinsinisellä liukuvärillä

Pystyjulkaisussa otsikko asettuu petrolinsinisen rauhallisimpaan kohtaan.

Sama kylpyläsuunnitelma korkeana tarinana, jossa petrolinsininen valo on sovitettu kokoon

Sama suunnitelma tarinana, uudelleen renderöitynä eikä rajattuna.

Viimeinen kohta on tärkeämpi kuin ensin näyttää. Kun liukuväri rajataan julkaisusta tarinaksi, valo siirtyy väärään paikkaan. Gradientlyssä Mark renderöidään jokaiseen kokoon, ja Designer voi tehdä muut koot puolestasi. Siten petrolinsininen ilme pysyy tasapainossa syötteessä, tarinassa ja [verkkosivun pääkuvassa](https://gradiently.design/fi/guide/website-hero-background).

## FAQ

### Mitkä värit sopivat petrolinsiniseen liukuväriin?

Syaani, smaragdinvihreä, sininen ja laivastonsininen sulautuvat siihen. Koralli, persikka, kupari ja kulta ovat vahvoja lämpimiä tehostevärejä, kun käytät niitä liu’un ulkopuolella.

### Mikä on petrolinsinisen heksakoodi?

Verkon nimetty `teal` on `#008080`. Useimmissa nykyisissä paleteissa käytetään elävämpiä versioita, kuten keskisyvää `#14b8a6` ja tummempaa `#0f766e`.

### Mitä eroa on petrolinsinisellä ja turkoosilla?

Petrolinsininen on syvempi ja hillitympi; turkoosi on vaaleampi, kirkkaampi ja hieman vihreämpi. Molemmat ovat sinisen ja vihreän välissä.

### Voinko käyttää valkoista tekstiä petrolinsinisellä?

Vain syvällä petrolinsinisellä, suunnilleen sävystä `#0f766e` tummempaan. Kirkkaat ja vaaleat petrolinsiniset tarvitsevat tumman tekstin, jotta kontrasti riittää.

### Sopiiko petrolinsininen tummaan tilaan?

Kyllä. Hyvin tumma petrolinsininen, kuten `#042f2e`, on mustaa pehmeämpi ja laivastonsinistä erottuvampi. Vaaleat petrolinsiniset tehosteet näkyvät sillä hyvin.