# Tunnelmalliset liukuvärit: tummat ja syvät värikoodit

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

Tummuus on helppoa. Tunnelma syntyy valon paikasta, hillityistä väreistä ja varjojen koostumuksesta. Kaksitoista koodia ja niiden taustalla olevat valinnat.

## The short version

- Tunnelmallinen liukuväri on tumma häivytys, jossa suurin osa pinnasta jää varjoon ja väri näkyy vain valon osuessa siihen.
- Tunnelmalliset liukuvärit käyttävät hillittyjä, hieman harmaannettuja värejä kylläisten sijaan. Siksi ne tuntuvat elokuvamaisilta eivätkä räikeiltä.
- Hieman värilliset varjot, kuten sinimusta tai luumunmusta, tuntuvat puhdasta mustaa syvemmiltä.
- Yksi lämmin valo viileällä pohjalla on nopein tapa antaa tummalle liukuvärille tunnelmaa.
- Tummat liukuvärit raidoittuvat vaaleita enemmän, joten lisää hieman rakeisuutta ja vie PNG:nä tai laadukkaana videona.

**Tunnelmallinen liukuväri** on tumma häivytys, joka käyttäytyy kuin hämärä huone: suurin osa pinnasta jää varjoon, yksi alue saa valoa ja värejä hillitään korostamisen sijaan. Resepti on helppo kertoa. Aloita sävytetystä lähes mustasta, lisää yksi tai kaksi hillittyä keskisävyä ja anna yhden valon, usein lämpimän viileää pohjaa vasten, herättää pinta eloon. Alla on kaksitoista kopioitavaa koodia sekä ohjeet oman version tekemiseen ja tekstin luettavuuteen.

## Mikä tekee liukuväristä tunnelmallisen pelkän tumman sijaan

Moni tumma liukuväri tuntuu lattealta. Laivastonsinisestä mustaan häivyttyvä pinta on tumma mutta vailla säätä. Tunnelma syntyy muutamasta päätöksestä, joita valokuvaajat ja elokuvien värimäärittelijät tekevät vaistomaisesti. Sinä voit tehdä ne tietoisesti.

- **Hämärä valaistus.** Noin kolme neljäsosaa pinnasta on varjoa. Valo on poikkeus, ei sääntö.
- **Yksi lähde.** Valo tulee nurkasta tai reunasta, joten katse ymmärtää ikkunan tai lampun paikan.
- **Hillitty väri.** Keskisävyt ovat hieman harmaannettuja. Pölyinen petrooli tuntuu kirkasta tunnelmallisemmalta.
- **Värilliset varjot.** Tummin kohta on sinimusta, vihreänmusta tai häränveri, ei koskaan `#000000`.
- **Lämpötilakontrasti.** Pieni lämmin valo viileässä näkymässä tai päinvastoin luo jännitettä.

### Tumma mutta lattea

- Puhdas musta toisessa päässä
- Kirkas, kylläinen korostus
- Valo jakautuu tasaisesti pinnalle
- Suora lävistäjä nurkasta nurkkaan
- Täysin sileä digitaalinen pinta

### Tunnelmallinen

- Sävytetty varjo, jossa on yhä väriä
- Hillitty, hieman harmaannettu korostus
- Valo kerääntyy yhteen kohtaan
- Säteittäinen tai pehmeä viisto hiipuminen
- Hieno rakeisuus kuin filmissä

## Kaksitoista tunnelmallista liukuvärikoodia

Jokainen näistä on yksi CSS-arvo, jonka voit liittää `background`-ominaisuuteen. Ne on ryhmitelty väljästi lämpötilan mukaan: ensin viileät ja myrskyisät, sitten lämpimät lamppuvalot ja lopuksi muutama siltä väliltä.

- Myrsky: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Keskiyön petrooli: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Syvä meri: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Metsä hämärässä: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Häränveri: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Viimeinen hiillos: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Kynttilänvalo: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Katuvalo: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Tumma luumu: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Muste ja violetti: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Sammal ja pronssi: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafiittiruusu: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Kaksitoista tunnelmallista liukuväriä. Mikään ei pääty puhtaaseen mustaan eikä käytä täysin kylläistä väriä.

Jos haluat selkeän yön myrskyisen sijaan, [yötaivaan liukuvärit](https://gradiently.design/fi/guide/night-sky-gradient) painottuvat siniseen ja lisäävät tähtiä. Syvempiä, kiiltävämpiä ja kylläisempiä värejä tarjoavat [jalokivisävyt](https://gradiently.design/fi/guide/jewel-tone-colors), jotka ovat astetta kirkkaampia kuin nämä.

## Tunnelmallinen väripaletti lähtökohdaksi

Kun teet oman, aloita paletista kahden värin sijaan. Viisi riittää: pohja, kaksi varjoaskelta, yksi hillitty keskisävy ja yksi valo. Vain valon väri saa olla aidosti kirkas, ja sen pitää näkyä pienellä alueella.

- Yöpohja: #0d1117
- Syvä liuskekivi: #1b2330
- Myrsky: #2c3a4a
- Sateenharmaa: #5b6b78
- Lampun meripihka: #c98a3a

Viileä, sateinen paletti ja yksi lämmin valo. Vaihda meripihka pölyiseen roosaan tai vaaleaan natriumkeltaiseen, niin tarina muuttuu kokonaan.

[Värilämpötila](https://gradiently.design/fi/guide/color-temperature) selittää, miksi lämmin valo toimii niin hyvin viileää varjoa vasten. Lisää valmiita yhdistelmiä löydät artikkelista [tummat väripaletit](https://gradiently.design/fi/guide/dark-color-palettes).

## Tunnelmallisen liukuvärin tekeminen CSS:llä

1. **Aseta sävytetty pohja** Valitse värillinen lähes musta, kuten sinimusta `#0b0d12` tai lämmin ruskeanmusta `#120806`. Käytä sitä myös `background-color`-varavärinä.
2. **Lisää varjon runko** Tee pehmeä lineaarinen liukuväri saman sävyn kahden tumman asteen välille. Se antaa pinnalle syvyyttä ennen valoa.
3. **Sijoita yksi valo** Lisää nurkkaan säteittäinen liukuväri, joka häipyy `transparent`-arvoon noin 40 prosentissa. Pidä väri hillittynä ja peittävyys selvästi alle täyden.
4. **Lisää viileä vastavalo** Voit lisätä vastakkaiseen nurkkaan toisen, suuremman ja himmeämmän säteittäisen liukuvärin viileissä sävyissä. Se estää varjopuolta kuolemasta.
5. **Viimeistele rakeisuudella** Hieno, vähän peittävä kohinakerros peittää raidoittumista ja saa pinnan tuntumaan filmiltä. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) antaa koodin.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Katuvalon hehku oikealla ylhäällä, viileä petrooliutu vasemmalla alhaalla ja liuskekivinen runko. Kolme kerrosta ilman kuvia.

> **Tummat häivytykset raidoittuvat** Kun tummimman ja vaaleimman arvon välinen alue on pieni, tunnelmalliset liukuvärit näyttävät portaittaisia raitoja monilla näytöillä ja pakkauksen jälkeen. Rakeisuus, PNG-vienti ja voimakkaan JPEG-pakkauksen välttäminen auttavat. [Liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää korjauksen tarkasti.

## Sanat tunnelmallisella taustalla

Vaalea teksti tummalla pohjalla erottuu hyvin, kunnes se kulkee vaivalla tekemäsi valoläikän yli. Suunnittele otsikko varjopuolelle ja pidä valo erossa sanoista niiden taakse sijoittamisen sijaan. Pehmeä luonnonvalkoinen kuten `#ece6dc` sopii tunnelmalliseen pohjaan puhdasta valkoista paremmin, sillä puhdas valkoinen voi näyttää kovalta.

Tumma pystysuora tapahtumatarina, jonka taustan vaalea alue on Myöhäisillan show -otsikon takana

Tausta kulkee suoraan sanojen läpi, joten kirkkain alue voi osua otsikon taakse.

Sama tumma tapahtumatarina, jonka otsikon takana on rauhallinen varjo ja hehku toisella reunalla

Tässä Mark siirtää rauhallisimman ja tummimman alueensa tekstin taakse, ja valo pysyy reunalla.

Oikeanpuoleisen version Gradientlyn Mark tekee itse. Se tietää sanojen paikan, syventää väriä kirjainten lähellä ja valitsee vaalean tai tumman tekstin riveittäin omasta paletistaan ilman lisälaatikoita tai varjoja. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) käsittelee käsin tehtävää versiota.

## Missä tunnelmalliset liukuvärit toimivat parhaiten

| Käyttö | Kokeile | Koko |
| --- | --- | --- |
| Myöhäisen tapahtuman tai klubi-illan tarina | Muste ja violetti, Katuvalo | 1080×1920 |
| Podcast-kansi | Häränveri, Grafiittiruusu | 3000×3000 |
| Ravintolan tai baarin ruokalistajuliste | Kynttilänvalo, Sammal ja pronssi | A4, 2480×3508 |
| Studion tai toimiston verkkosivun pääkuva | Myrsky, Keskiyön petrooli | 1920×1080 |
| Trillerin tai esseen YouTube-pikkukuva | Viimeinen hiillos, Syvä meri | 1280×720 |
| Spotify-soittolistan kansi | Metsä hämärässä, Tumma luumu | 1080×1080 |

Tunnelmalliset liukuvärit sopivat yöllä tapahtuvaan, harkittuun sekä kaikkeen, jota kannattaa kuunnella huutamisen sijaan.

Ne sopivat yöhön, musiikkiin, juomiin, elokuvaan, tuoksuihin ja hiljaiseen ylellisyyteen. Lastenjuhliin tai kesäaleen ne sopivat paljon huonommin. Koko käyttöliittymän tekemistä tällä tyylillä käsittelee [tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds), joka kertoo näyttöjen vaatimasta lisähuolellisuudesta.

Jos et halua säätää kerroksia käsin, Markkinoilla on juuri tällaisia eläviä Markeja. Voit hakea niitä sanoilla kuten ”deep teal” tai ”oxblood”. Suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla. Lunastamalla sen varmistat, ettei kenenkään muun julisteessa ole samaa tunnelmaa.

## FAQ

### Mitkä värit tekevät tunnelmallisen liukuvärin?

Sävytetyt lähes mustat kuten sinimusta tai luumunmusta, yksi tai kaksi hillittyä keskisävyä kuten pölyinen petrooli tai liuskekivi sekä yksi lämpimämpi valo kuten meripihka tai hiillos.

### Miten tunnelmallinen liukuväri eroaa tummasta?

Tumman liukuvärin tarvitsee vain olla tumma. Tunnelmallisessa on selkeä valonlähde, hillityt värit ja värilliset varjot, jotka antavat sille tunnelmaa.

### Kannattaako tunnelmallisessa liukuvärissä käyttää puhdasta mustaa?

Yleensä ei. Hieman sävytetty lähes musta kuten `#0b0d12` näyttää syvemmältä ja sulautuu pehmeämmin ympäröiviin väreihin.

### Miksi tumma liukuvärini näyttää raidalliselta?

Kyse on raidoittumisesta, joka näkyy eniten tummissa, hienovaraisissa häivytyksissä. Lisää hienoa rakeisuutta ja vie PNG:nä tai laadukkaana videona pakatun JPEG:n sijaan.

### Mikä tekstiväri toimii tunnelmallisella liukuvärillä?

Pehmeä luonnonvalkoinen erottuu yleensä parhaiten. Sijoita se varjopuolelle kauas kirkkaimmasta alueesta ja tarkista kontrasti jokaisen rivin kohdalla.