# Vihreä-sininen liukuväri: raikkaat luonnolliset värikoodit

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

Vihreän ja sinisen kohtaaminen muistuttaa matalaa vettä hiekan päällä, järveä mäntyjen alla ja revontulia. Siksi pari tuntuu helposti luonnolliselta. Näin säilytät vaikutelman.

## The short version

- Vihreä-sininen liukuväri yhdistää vierekkäisiä viileitä sävyjä, kuten smaragdin #10b981, sinivihreän #0d9488 ja taivaansinisen #0284c7, joiden väliin jää sinivihreä tai akvansininen.
- Vihreä ja sininen ovat väriympyrässä vierekkäin, joten sekoitus pysyy puhtaana. Se tuntuu luonnolliselta, koska muistuttaa vettä, jäätä ja taivasta.
- Kirkkaat vihreät ja akvansiniset ovat liian vaaleita valkoiselle tekstille. Käytä vaaleissa versioissa syvän sinivihreää mustetta ja tummissa valkoista tai minttua.
- Tummat vihreä-siniset liukuvärit tuntuvat rauhallisilta ja luotettavilta, vaaleat raikkailta ja puhtailta.
- Pari sopii matkailuun, hyvinvointiin, rahoitukseen, ulkoilubrändeihin ja teknologiaan. Lämmin korosteväri, kuten hiekka tai koralli, ehkäisee kylmää vaikutelmaa.

**Vihreä-sininen liukuväri** yhdistää kaksi viileää naapuria: vihreitä kuten smaragdin `#10b981` tai mintun `#a7f3d0` ja sinisiä kuten `#0284c7` tai taivaan `#bae6fd`. Sinivihreä ja akvansininen rakentavat niiden välille sillan. Sekoitus pysyy puhtaana, koska sävyjen väliin ei tule harmaata kohtaa. Se tuntuu luonnolliselta, koska olet nähnyt sitä koko elämäsi vedessä, jäässä ja taivaalla. Nämä koodit seuraavat neljää maisemaa, ja mukana ovat kullekin sopivat tekstivärit sekä vaalean ja tumman tilan CSS.

## Miksi vihreä ja sininen näyttävät luonnollisilta yhdessä

Vihreä ja sininen ovat [lähivärejä](https://gradiently.design/fi/guide/analogous-colors): ne ovat ympyrässä vierekkäin, joten jokainen väliaskel on oikea väri, enimmäkseen sinivihreää ja akvansinistä. Luonto näyttää paria jatkuvasti matalista meristä, joissa sininen vesi peittää vihreää kasvustoa ja hiekkaa, jäätikköjärviin ja tyynestä vedestä heijastuviin mäntymetsiin. Näiden maisemien lainaaminen on helpoin tapa saada liukuväri tuntumaan rauhalliselta yritysmäisen sijaan.

- Syvä sinivihreä muste: #042f2e
- Mänty: #065f46
- Smaragdi: #10b981
- Sinivihreä: #0d9488
- Akvansininen: #22d3ee
- Järvensininen: #0284c7
- Minttu: #a7f3d0
- Taivas: #bae6fd

Vihreästä siniseen ulottuva skaala sekä syvä muste tekstille. Sinivihreä ja akvansininen pitävät siirtymän jatkuvana.

## Laguuni: kirkkaat akvansiniset ja vihreät liukuvärit

Matala trooppinen vesi on pääosin akvansinistä, matalimmissa kohdissa vihreää ja syventyessä sinistä. Näissä liukuväreissä on kirkas lomatunnelma. Lisää lämmin hiekanvärinen väripiste, jos haluat rannan tuntua uima-altaan sijaan.

- Laguuni: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Riutta: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Hiekkasärkkä: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Kirkkaat vihreä-siniset liukuvärit. Kolmas lisää alareunaan hiekkaa, joka lämmittää koko kuvaa. [Meren liukuvärit](https://gradiently.design/fi/guide/ocean-gradient) tarjoaa lisää.

## Metsäjärvi: syvät vihreät ja siniset liukuvärit

Tummasta vihreästä tummaan siniseen kulkeva liukuväri tuntuu hiljaiselta, arvokkaalta ja luotettavalta. Ajattele metsäjärveä hämärässä tai vanhan pullon väriä. Näillä valkoinen teksti toimii hyvin. Ne sopivat rahoitukseen, ulkoiluvarusteisiin, arkkitehtuuriin ja vakautta hakeville brändeille.

- Metsäjärvi: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Kuutamon sinivihreä: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Pullosta laivastonsiniseen: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Tumma vihreä ja sininen. Pakatut kuvat porrastuvat helposti, joten lisää hieno rakeisuus ennen vientiä.

## Jäätikkö: vaaleat mintun ja taivaan liukuvärit

Kun vaalennat parin kunnolla, saat jäätikköjäätä ja kylmiä aamuja: puhtaita, ilmavia ja hyvin rauhallisia. Ne sopivat terveydenhuoltoon, ihonhoitoon, siivoukseen ja tuottavuussovelluksiin. Ilme voi tuntua kliiniseltä, joten ripaus lämmintä valkoista auttaa.

- Jäätikkö: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Kylmä aamu: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Jää auringossa: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Vaalea vihreä ja sininen. Syvän sinivihreä muste erottuu kaikilla. [Mintun liukuvärit](https://gradiently.design/fi/guide/mint-gradient) syventyy vihreään.

## Revontulet: vihreä ja sininen yötaivaalla

Revontulet ovat vihreää ja sinistä valoa mustalla, minkä vuoksi revontuliliukuvärit ovat suosituimpia tummia taustoja. Pidä väri pehmeissä kaistoissa ja jätä suurin osa kuvasta tummaksi. [Revontuliliukuvärit](https://gradiently.design/fi/guide/aurora-gradients) käsittelee tekniikan kokonaan.

- Revontulet: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Valokaista: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Napapyörre: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Vihreää ja sinistä lähes mustalla. Minttu ja akvansininen ovat näillä näyttäviä tekstivärejä.

## Tekstivärit vihreä-sinisillä liukuväreillä

Smaragdi ja akvansininen ovat yllättävän vaaleita, joten valkoinen teksti kirkkaissa versioissa jää usein heikoksi. Syvän sinivihreä muste toimii vaaleissa sekoituksissa ja pitää kokonaisuuden samassa väriperheessä. Valkoinen ja minttu erottuvat tummissa. Alla olevat suhteet käyttävät WCAG-kaavaa. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) näyttää, mitä tehdä rivin ylittäessä molemmat päät.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Smaragdi `#10b981` | Valkoinen | 2,5:1 | Ei riitä |
| Akvansininen `#22d3ee` | Valkoinen | 1,8:1 | Ei riitä |
| Sinivihreä `#0d9488` | Valkoinen | 3,7:1 | Vain suuriin otsikoihin |
| Minttu `#a7f3d0` | Syvä sinivihreä `#042f2e` | 11,3:1 | Erinomainen |
| Mänty `#065f46` | Valkoinen | 7,7:1 | Erinomainen |
| Yö `#04202a` | Akvaminttu `#5eead4` | 11,4:1 | Erinomainen, väri musteena |

Vihreä-sinisessä sekoituksessa vihreä pää on yleensä vaaleampi. Tarkista kontrasti ensin siellä.

Matkailun pystyjulkaisu, jossa syvän sinivihreät kirjaimet ovat kirkkaalla akvansinisellä ja vihreällä liukuvärillä

Matkatoimiston julkaisu kirkkailla laguunisävyillä ja syvän sinivihreällä tekstillä.

Rahoitussovelluksen vaakalinkkikuva valkoisella tekstillä tummasta vihreästä laivastonsiniseen kulkevalla liukuvärillä

Rahoitussovelluksen LinkedIn-linkkikuva männynvihreästä laivastonsiniseen kulkevalla taustalla.

## Näin lämmität vihreä-sinistä palettia

Vihreä ja sininen ovat kumpikin viileitä, joten kokonainen brändi niillä voi tuntua etäiseltä. Yksi lämmin korosteväri korjaa asian. Hiekka, koralli ja pehmeä kulta ovat sinivihreää vastapäätä väriympyrässä. Käytä niitä liukuvärin vieressä painikkeessa, logossa tai kapeana kaistaleena reunalla sen sijaan, että sekoittaisit niihin. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) selittää, miksi ympyrän poikki sekoittaminen tuottaa harmaata.

### Vältä

- Sinivihreän sekoittamista suoraan koralliin
- Valkoista tekstiä smaragdilla tai akvansinisellä
- Viileitä värejä joka pinnalla
- Täysikylläistä vihreää täysikylläisellä sinisellä

### Tee näin

- Koralli tai hiekka liukuvärin vieressä korosteena
- Syvän sinivihreä muste vaaleissa sekoituksissa
- Lämmin valkoinen tai kerma paneeleissa ja tekstissä
- Yksi johtava väri ja toinen tukemassa

## Vihreä-sinisen liukuvärin CSS vaaleaan ja tummaan tilaan

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Jäätikkö vaaleassa tilassa, metsäjärvi tummassa. Samat sävyt pitävät brändin yhtenäisenä.

Saman vihreän ja sinisen vaalea ja tumma versio tekee teemanvaihdosta suunnitellun tuntuisen pelkän kääntämisen sijaan. [Tumman tilan liukuvärit](https://gradiently.design/fi/guide/dark-mode-gradients) syventyy aiheeseen. Gradientlyssä yksi Mark renderöityy jokaiseen suunnittelemaasi kokoon ja valitsee vaalean tai tumman musteen riveittäin omasta paletistaan. Niin kirkas laguuni kuin tumma metsäjärvi pitää sanat luettavina.

## FAQ

### Mikä on hyvä vihreä-sinisen liukuvärin koodi?

Kirkas vaihtoehto on `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Tummempaan, rauhallisempaan ilmeeseen kokeile `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Sopivatko vihreä ja sininen yhteen?

Kyllä. Ne ovat väriympyrän naapureita, joiden välissä ovat sinivihreä ja akvansininen. Sekoitus pysyy siksi puhtaana ja tuntuu luonnolliselta.

### Mikä väri on vihreän ja sinisen välissä?

Sinivihreä, noin `#0d9488`, jonka kirkkaampia sukulaisia ovat akvansininen ja turkoosi.

### Mikä tekstiväri sopii vihreä-siniselle liukuvärille?

Syvä sinivihreä kuten `#042f2e` vaaleisiin versioihin, valkoinen tai minttu tummiin. Valkoinen kirkkaalla smaragdilla tai akvansinisellä ei täytä kontrastivaatimusta.

### Mitä vihreä-sininen liukuväri viestii brändistä?

Se tuntuu yleensä rauhalliselta, raikkaalta ja luotettavalta, koska muistuttaa vettä, taivasta ja kasveja. Tummat versiot tuntuvat vakailta, vaaleat puhtailta.