# Turkoosi liukuväri: trooppiset värikoodit ja syvyys

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

Kirkas turkoosi yksin muistuttaa uima-altaan kuvaketta. Syvä pohja, lämmin ranta ja hieman valoa muuttavat sen saaren edustan mereksi. Näin teet sen värikoodeilla.

## The short version

- Turkoosi liukuväri yhdistää kirkkaita vihertäviä sinisiä ja näyttää luonnollisimmalta, kun mukana on syvempi sininen ja vaalea, lähes valkoinen valoalue.
- Turkoosi on vaaleampi ja kirkkaampi kuin petrooli ja vihreämpi kuin syaani. CSS:n nimetty väri turquoise on #40e0d0.
- Tasaiset turkoosit liukuvärit näyttävät keinotekoisilta. Lisää syvyyttä tummansinisellä pohjalla, vaalealla valoalueella tai lämpimällä hiekanvärillä.
- Valkoinen teksti ei toimi kirkkaalla turkoosilla. Käytä sen sijaan syvää tummansinistä, kuten #083344.
- Hiekka, koralli ja valkoinen ovat turkoosin luontevimmat kumppanit, sillä ne tuovat mieleen rannan.

**Turkoosi liukuväri** yhdistää kirkkaita vihertäviä sinisiä. Trooppisimmissa yhdistelmissä on kolme osaa: vaalea valoalue, johon valo osuu, selkeä turkoosi pääalue ja syvempi sininen sen alla. Ilman tätä vaihtelua turkoosi näyttää tasaiselta ja keinotekoiselta. Alla ovat kirkkaiden laguunien, syvien turkoosien ja lämpimään hiekkaan yhdistettyjen sävyjen koodit sekä CSS ja luettavuutta tukevat tekstivärit.

## Turkoosin, petroolin, syaanin ja akvan erot

Näitä neljää käytetään usein toistensa synonyymeina, mutta ne ovat eri värejä. Valinta muuttaa tunnelmaa. Turkoosi on joukon kirkkain ja lomahenkisin.

| Väri | Tavallinen heksakoodi | Vaikutelma |
| --- | --- | --- |
| Turkoosi | `#40e0d0` | Kirkas, vihertävä, trooppinen, jalokivimäinen |
| Akva | `#7fffd4` (akvamariini) | Vaalea, minttuinen, kevyt, vesimäinen |
| Syaani | `#00ffff` (CSS cyan) | Sähköinen, viileämpi, digitaalinen |
| Petrooli | `#008080` (CSS teal) | Syvempi, hillitty, rauhallinen, aikuinen |

Turkoosi on vaaleampi kuin petrooli ja vihreämpi kuin syaani. Syvempää vaihtoehtoa käsittelee petroolin opas.

Jos brändisi kaipaa rauhallista ja vakavaa ilmettä, [petrooliliukuvärit](https://gradiently.design/fi/guide/teal-gradient) sopivat luultavasti paremmin. Jos haet lomaa, energiaa ja lämpöä, jatka tästä.

## Kirkkaat trooppiset turkoosit liukuvärit

Nämä ovat postikorttien väriyhdistelmiä: matalaa vettä valkoisen hiekan päällä. Jokaisessa on vaalea väripiste, jota vasten turkoosi voi hehkua. Yksikään ei muutu harmaaksi.

- Matala vesi: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Laguuni: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Aurinkoinen poukama: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Turkoosista taivaaseen: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Riutan reuna: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Akvamariini: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Kuusi kirkasta turkoosia yhdistelmää. Vaalea tai valkoinen väripiste saa jokaisen näyttämään valaistulta.

## Näin annat turkoosille liukuvärille syvyyttä

Trooppinen vesi ei koskaan ole yksiväristä. Hiekan yllä se on vaaleaa, matalalla riutalla turkoosia ja syvänteen kohdalla tummansinistä. Kopioi tämä rakenne, niin liukuväri lakkaa näyttämästä tasaiselta täyttöväriltä.

1. **Valitse pohja** Valitse tummimmaksi kohdaksi syvä sininen, kuten `#0c4a6e` tai `#083344`. Se ankkuroi turkoosin ja antaa sille taustan, jota vasten loistaa.
2. **Määritä pääväri** Käytä turkoosia, noin `#2dd4bf` tai `#40e0d0`, suurimmalla alueella, yleensä keskellä tai ylhäällä.
3. **Lisää valoalue** Sijoita pieni lähes valkoinen väripiste, kuten `#ecfeff`, kohtaan, johon valo osuisi. Yhden kulman säteittäinen liukuväri toimii hyvin.
4. **Lämmitä yhtä reunaa** Voit lisätä hiekanvärin alareunaan tai kulmaan, jotta viileä yhdistelmä saa lämpimän rannan.
5. **Viimeistele pinta** Lisää kevyttä rakeisuutta, jotta kirkkaat värit eivät porrastu alustan pakatessa kuvaa. Menetelmä löytyy [rakeisten liukuvärien oppaasta](https://gradiently.design/fi/guide/grainy-gradients).

- Syvänne: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Valoa veden läpi: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turkoosista kobolttiin: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Hehkuva syvyys: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turkoosia syvän sinisen pohjan yllä. Sopii matkailuun, sukellukseen, juomiin ja illan rantatapahtumiin.

## Turkoosin ja hiekan liukuvärit

Turkoosin luontevin kumppani on itse ranta: lämmin hiekka, koralli ja valkoinen. Nämä sävyt ovat väriympyrässä turkoosia vastapäätä. Sekoita niitä vain vähän kylläisissä vaaleissa välisävyissä tai pidä ne erillisinä alueina. Saat rantaviivan harmaan tahrauman sijaan. [Kesän väripaletit](https://gradiently.design/fi/guide/summer-color-palettes) tarjoaa lisää lomahenkisiä yhdistelmiä.

- Rantaviiva: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Hiekasta mereen: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Korallia turkoosilla: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

Turkoosi kohtaa hiekan vaalean keskialueen kautta, joten lämmin ja viileä puoli eivät muutu harmaiksi.

- Vaahto: #ecfeff
- Turkoosi: #40e0d0
- Riutansininen: #0891b2
- Syvä vesi: #083344
- Hiekka: #f5deb3
- Koralli: #fb7185

Kokonainen trooppinen paletti: vaahto, kaksi sinistä, tumma tekstiväri, hiekka ja yksi korallitehoste.

## Missä turkoosi liukuväri toimii parhaiten

Turkoosi on voimakas väri. Se sopii paikkoihin, joissa odotetaan jo valmiiksi lomaa, vettä tai hauskanpitoa. Näissä käyttötavoissa se voi päihittää muut värit:

- **Matkailu ja hotellit:** 1080×1920-tarina, jossa Syvänne-taustan päällä on yksi rivi, kuten ”Kolme yötä Lisbonissa”.
- **Uimakoulut ja uima-altaat:** vaalea Matala vesi -tausta aikatauluille ja syvän tummansininen teksti.
- **Smoothiebaarit ja mehumerkit:** Laguuni-tausta ja yksi korallinvärinen hintatarra. Se erottuu turkoosin vastavärinä.
- **Kesämenut ja festivaalijulisteet:** Rantaviiva A4-julisteessa, meri ylhäällä ja hiekka yksityiskohtien taustana.
- **Korut:** turkoosi on myös kivi, joten syvä Valoa veden läpi -tausta sopii hopeisten ja kultaisten tuotteiden kuviin.

Vältä turkoosia, kun ilmeen pitää olla hiljainen tai muodollinen. Asianajotoimistolle tai hautaustoimistolle petrooli tai tummansininen sopii paremmin.

## Turkoosi CSS-liukuväri ja valo

Kaksi säteittäistä valoaluetta lineaarisen pohjan päällä tuo mieleen auringonvalon veden läpi. Tausta on kevyt piirtää eikä tarvitse kuvaa. Syntaksin selittää [CSS:n säteittäisten liukuvärien opas](https://gradiently.design/fi/guide/css-radial-gradient).

```css
.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}
```

Vaahdon valo vasemmassa yläkulmassa, turkoosi keskellä ja syvä vesi alhaalla. Sijoita otsakkeet yläpuoliskoon syvän veden värisinä.

## Teksti turkoosilla liukuvärillä

Turkoosi on paljon vaaleampi kuin miltä näyttää. Valkoisen kontrasti värillä `#40e0d0` on noin 1,6:1. Sitä on vaikea lukea puhelimesta auringossa. Syvän veden värin `#083344` kontrasti samalla turkoosilla on noin 8:1. Käytä kirkkaissa kohdissa tummansinistä tekstiä ja vaihda valkoiseen vasta syvän sinisellä alueella. Kaikki säännöt löytyvät [värikontrastin ja saavutettavuuden oppaasta](https://gradiently.design/fi/guide/color-contrast-accessibility).

Vesiurheilutapahtuman julkaisu, jonka vaalea teksti hukkuu kirkkaaseen turkoosiin liukuväriin

Vaaleat sanat kirkkaalla turkoosilla katoavat heti, kun kuvaa katsotaan ulkona.

Sama tapahtumajulkaisu, jossa selkeä tumma teksti on turkoosin liukuvärin rauhallisemmalla alueella

Sama julkaisu, jonka tekstiväri ja rauhallinen tausta-alue on valittu sanoille sopiviksi.

Gradientlyn Mark tekee tämän itse: rauhallisin alue siirtyy sanojen taakse ja Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin omista väreistä. Päivittäin julkaisevat matkailu- ja majoitusalan tiimit löytävät lisää ideoita [matkatoimiston somesta](https://gradiently.design/fi/guide/travel-agency-social-media).

## FAQ

### Mikä on turkoosin heksakoodi?

CSS:n nimetty väri `turquoise` on `#40e0d0`. Myös hieman syvempiä versioita, kuten `#2dd4bf`, käytetään paljon.

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

Syvä tummansininen, valkoinen, hiekka ja koralli. Tummansininen tuo syvyyttä, valkoinen valoa ja hiekka tai koralli lämpöä, kun ne pidetään erillään pääsekoituksesta.

### Onko turkoosi sama kuin petrooli?

Ei. Turkoosi on vaaleampi, kirkkaampi ja trooppisempi. Petrooli on syvempi ja hillitympi. Molemmat sijoittuvat sinisen ja vihreän väliin.

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

Kirkkaalla turkoosilla valkoisen kontrasti on liian heikko. Käytä syvää tummansinistä tekstiä tai siirrä valkoinen teksti liukuvärin tummimpaan siniseen kohtaan.

### Miten turkoosi liukuväri näyttää vähemmän tasaiselta?

Lisää syvän sininen pohja, lähes valkoinen valoalue ja kevyttä rakeisuutta. Nämä kolme vaihetta saavat sen näyttämään vedeltä tasaisen täyttövärin sijaan.