# Metsänvihreä liukuväri: syvät luonnolliset värikoodit

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

Metsänvihreä on vihreistä aikuisin: hiljainen, rikas ja hieman vakava. Koodit seuraavat oikeaa metsää maanpinnasta latvustoon, ja väriparit pitävät ilmeen elävänä.

## The short version

- Metsänvihreä liukuväri kulkee puiden varjon lähes mustasta vihreästä keski- tai vaaleanvihreään, jossa valo pääsee läpi.
- Siniseen taittuvat vihreät muistuttavat mäntyä ja havupuita, keltaiseen taittuvat sammalta ja saniaisia.
- Pieni lämmin korostus, kuten kerma, messinki tai terrakotta, tekee metsänvihreästä rikkaan tasaisen sijaan.
- Metsänvihreä samenee suoraan punaiseen tai oranssiin sekoitettuna, joten pidä lämpimät värit erillisinä korostuksina.
- Vaalea teksti metsänvihreän liukuvärin tummassa päässä erottuu hyvin ja tuntuu rauhalliselta sekä laadukkaalta.

**Metsänvihreä liukuväri** kulkee puiden syvän varjon lähes mustasta vihreästä rikkaampaan keskivihreään tai pehmeään auringon vihreään, jossa valo siivilöityy latvuston läpi. Se tuntuu luonnolliselta, vakaalta ja hillityn arvokkaalta, joten perinteikkäät brändit, ulkoiluyritykset, hotellit ja kasvikaupat tarttuvat siihen. Alla olevat koodit seuraavat oikeaa metsää maanpinnasta latvoihin. Mukana on vinkit kunkin väripariin.

## Metsän värit maanpinnasta latvustoon

Metsässä näet useampaa kuin yhtä vihreää. Syvin varjo on lähes musta. Mänty ja kuusi taittuvat siniseen. Sammal, saniaiset ja nuoret lehdet keltaiseen. Korkealla aurinko tekee lehdistä vaaleita ja kultaisia, ja kosteana aamuna kaikki häipyy pehmeään harmaanvihreään. Hyvä metsäliukuväri valitsee yhden näistä tarinoista, ei kaikkia.

- Yömänty: #0b1f14
- Metsä: #14391f
- Latvusto: #22573a
- Kuusi: #1d4a3f
- Sammal: #4f6b2a
- Saniaisen valo: #a7c97a
- Aamusumu: #c9d3cc
- Aurinko lehtien läpi: #f3d98b

Metsän vihreät. Kuusi taittuu siniseen, sammal keltaiseen, ja auringon väripiste on ainoa tarvitsemasi lämmin väri.

## Metsänvihreän liukuvärin koodit

Aloita syvästä latvustosta, jos haluat klassisen **tummanvihreän liukuvärin**. Se on monipuolisin ja kantaa vaaleaa tekstiä kauniisti. Mänty on viileämpi ja modernimpi. Sammal on maanläheisempi ja sopii ruokaan, käsitöihin ja kaikkeen käsintehtyyn. Saniaisen valo on joukon kirkkain ja silti selvästi metsäinen, ei limenvihreä.

- Syvä latvusto: `linear-gradient(160deg, #0b1f14 0%, #14391f 45%, #22573a 100%)`
- Mänty ja kuusi: `linear-gradient(180deg, #0e2a26 0%, #1d4a3f 50%, #3c6e5d 100%)`
- Sammal: `linear-gradient(135deg, #2f3d17 0%, #4f6b2a 50%, #8a9a4b 100%)`
- Saniaisen valo: `linear-gradient(180deg, #1f4d2b 0%, #3f7d3c 55%, #a7c97a 100%)`

Neljä metsänvihreää. Jokainen säilyttää sävyn ja muuttaa lähinnä vaaleutta, mikä pitää sekoituksen puhtaana.

Raikkaampia ja kirkkaampia vihreitä smaragdista limeen löydät laajemmasta [vihreiden liukuvärien](https://gradiently.design/fi/guide/green-gradient) kokoelmasta. Jos haluat metsänvihreään lisää sinistä, [petrooliliukuväri](https://gradiently.design/fi/guide/teal-gradient) jatkaa siitä, mihin mänty jää.

## Sumu, auringonvalo ja metsänpohja

Tunnelma saa metsäliukuvärin tuntumaan paikalta eikä värilastulta. Sumu nostaa yläosan vaalean harmaanvihreäksi ja antaa puiden nousta näkyviin alapuolella. Latvuston läpi tuleva auringonvalo on kuvan yläosaan sijoittuva pehmeän kullan säteittäinen hehku. Metsänpohja tuo alareunaan hieman ruskeaa ja ankkuroi suunnitelman. Yksi näistä tehosteista per suunnitelma riittää.

- Sumuinen metsä: `linear-gradient(180deg, #c9d3cc 0%, #7e968a 45%, #2f4a3d 100%)`
- Aurinko latvuston läpi: `radial-gradient(ellipse at 70% 10%, #f3d98b 0%, #8aa64b 25%, #2c5a2f 55%, #0c2215 90%)`
- Metsänpohja: `linear-gradient(0deg, #1a140c 0%, #2e2a16 35%, #2a4a26 100%)`
- Havumetsän yö: `radial-gradient(circle at 50% 30%, #1f4a35 0%, #0d2219 50%, #040b08 100%)`

Tunnelmalliset metsäliukuvärit. Sumuisessa metsässä vaalea teksti sopii alas ja tumma ylös. Havumetsän yössä valkoinen toimii kaikkialla.

## Metsänvihreän väriparit

Metsänvihreä voi yksin näyttää raskaalta. Yksi lämmin pari tekstissä tai pienessä korostuksessa muuttaa koko luonteen. Valitse pari tavoitellun tunteen mukaan ja pidä se itse liukuvärin ulkopuolella.

| Yhdistä | Hex | Tunnelma | Sopii |
| --- | --- | --- | --- |
| Lämmin kerma | `#f4efe3` | Perinteikäs, rauhallinen | Ulkoilubrändit, kirjakaupat, kahvilat |
| Messinkikulta | `#c9a24a` | Ylellinen, klassinen | Hotellit, väkevät juomat, yksityisklubit |
| Terrakotta | `#c8643b` | Maanläheinen, ystävällinen | Kasvikaupat, keramiikka, ruoka |
| Puuteripinkki | `#f2c6c2` | Pehmeä, romanttinen | Kukkakaupat, häät, kauneus |
| Vaalea salvia | `#d7e2d0` | Raikas, lempeä | Hyvinvointi, ihonhoito, tee |

Yksi pari kerrallaan. Kerma ja messinki ovat turvallisimmat, puuteripinkki yllättää ja erottaa kukkakaupan syötteen.

Luonnollisten palettien rakentamisesta kerrotaan lisää [luonnon väripaleteissa](https://gradiently.design/fi/guide/nature-color-palettes) ja [maanläheisissä väreissä](https://gradiently.design/fi/guide/earth-tone-colors). Vihreän välittämiä viestejä käsittelee [vihreän merkitys](https://gradiently.design/fi/guide/green-color-meaning).

## Pidä metsänvihreä rikkaana

### Näyttää tasaiselta tai sairaalloiselta

- Vihreä sekoittuu suoraan punaiseen tai oranssiin
- Niin kirkas keltavihreä, että se näyttää limeltä
- Tummentamiseen lisätty neutraali harmaa
- Puhdas musta tummassa päässä
- Kirkkaanvihreä teksti tummanvihreällä

### Näyttää metsältä

- Lämpimät värit erillisinä korostuksina
- Pehmeä vaalea pää, kuten #a7c97a
- Tummentaminen vaaleutta vähentämällä, sävy säilyttäen
- Yhä vihreä lähes musta, kuten #0b1f14
- Kerman- tai messinkivärinen teksti tummanvihreällä

Ensimmäinen kohta yllättää monet. Vihreä ja punainen ovat väriympyrässä vastakkain, ja niiden suora sekoitus kulkee ruskean kautta. Jos haluat molemmat, anna niiden kohdata terävällä rajalla tai pidä punainen tekstissä. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) näyttää tarkasti, mitä välissä tapahtuu.

> **Tummat vihreät painossa** Syvät vihreät painuvat yleensä tummempina ja himmeämpinä kuin näytöllä. Lähes musta pää voi menettää värinsä kokonaan. Nosta tumminta väripistettä hieman vaaleammaksi flyereissä, ruokalistoissa ja kylteissä ja tilaa vedos ennen koko painosta. [Liukuvärien painaminen](https://gradiently.design/fi/guide/print-gradients) käsittelee raitoja ja värimuutoksia paperilla.

## Metsänvihreä liukuväri käytännön suunnitelmissa

Metsänvihreä on lahja ulkona tai elävien asioiden parissa toimiville yrityksille, koska se viestii osaamista ja huolenpitoa huutamatta. Pihayritys voi julkaista kausimuistutuksia, kukkakauppa ilmoittaa työpajasta ja hotelli mainostaa viikonloppulomaa. Kaikki näyttää saman brändin kokonaisuudelta.

Pystysomejulkaisu syvällä metsänvihreällä taustalla ja kermanvärisellä otsikolla Kevätkäyntien varaus on auki

Pihayrityksen pystyjulkaisu. Kermanvärinen teksti tummassa päässä, vaaleampi vihreä reunoilla.

Johdonmukaisuus on vaikeaa, kun kauden julkaisut, tarinat ja flyerit syntyvät eri käsissä. Gradientlyssä valitset metsänvihreän Markin kerran, ja jokainen Studion suunnitelma käyttää sitä oikeassa koossa rauhallinen alue sanojen takana. [Pihayrityksen markkinointi](https://gradiently.design/fi/guide/landscaping-marketing) tarjoaa kokonaisen kauden ideoita.

```css
:root {
  --forest-950: #0b1f14;
  --forest-800: #14391f;
  --forest-600: #22573a;
  --forest-300: #a7c97a;
  --cream: #f4efe3;
}

.hero--forest {
  color: var(--cream);
  background: linear-gradient(160deg, var(--forest-950) 0%, var(--forest-800) 45%, var(--forest-600) 100%);
}
```

Metsänvihreä uudelleenkäytettävinä tokeneina, kerma tekstille. Samat muuttujat voivat värittää sivuston painikkeet ja reunat.

## FAQ

### Mikä on metsänvihreän hex-koodi?

CSS:n nimetty väri `forestgreen` on `#228b22`, melko kirkas vihreä. Liukuvärien syvemmät metsänvihreät ovat noin #14391f ja #22573a välillä, ja tumman pään lähes mustia versioita on esimerkiksi #0b1f14.

### Mitkä värit sopivat metsänvihreään liukuväriin?

Lämmin kerma, messinkikulta, terrakotta, puuteripinkki ja vaalea salvia. Käytä yhtä tekstissä tai korostuksessa vihreään sekoittamisen sijaan.

### Miksi vihreä liukuvärini näyttää samealta?

Se sekoittuu luultavasti punaiseen, oranssiin tai harmaaseen. Pidä sävy vakaana, tummenna vaaleutta vähentämällä ja anna lämpimien värien kohdata vihreä terävällä rajalla tai pysyä tekstissä.

### Mikä tekstiväri toimii tummanvihreällä?

Kerma, kuten #f4efe3, valkoinen tai pehmeä messinki. Ne erottuvat tummassa päässä ja säilyttävät rauhallisen luonnollisen tunnelman.