# Unenomaiset liukuvärit: utuiset pastellit ja pehmeä valo

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

Unenomaiset liukuvärit muistuttavat aamun valoa verhon läpi: vaaleita, utuisia ja hieman lämpimiä. Tässä niiden toimivat piirteet, kahdeksan kopioitavaa koodia ja sopiva tekstiväri.

## The short version

- Unenomainen liukuväri käyttää vaaleita, vähän kylläisiä lähisävyjä ilman kovia reunoja.
- Unenomaisuus syntyy valosta: yksi pehmeä kirkas alue hieman sivussa keskeltä häipyy utuiselle pohjalle.
- Syvä sävytetty tekstiväri, kuten luumu tai liuskekivi, toimii paremmin kuin valkoinen tai puhdas musta.
- OKLCH-sekoitus pitää vaaleiden värien keskikohdat puhtaina, kun sRGB voi muuttaa ne liitumaisiksi tai harmaiksi.
- Hieno rakeisuus ehkäisee vaaleiden liukuvärien sävyportaita somepakkauksessa.

**Unenomainen liukuväri** on vaalea, utuinen lähivärien sekoitus: lila persikkaan, roosa kermaan. Yksi pehmeä valopiste saa sen näyttämään valolta maalin sijaan. Kolme asiaa tekee sen: vähän kylläiset sävyt, niin pehmeät reunat ettei värin vaihtumista erota ja kirkas ydin sivussa keskeltä. Alla on kahdeksan kopioitavaa koodia, oman liukuvärin menetelmä ja vaalealla pinnalla luettava tekstiväri.

## Mikä tekee liukuväristä unenomaisen

Unenomaisuus on tunnelma, joten sen osat kannattaa nimetä. Lähes kaikki värit ovat niin vaaleita, että näyttäisivät hämärässä valkoisilta. Sävyt ovat naapureita, joten sekoitus ei kulje harmaan läpi. Valolla on suunta: yksi alue on kirkkaampi ja lämpimämpi kuin aurinko olisi kuvan ulkopuolella, ja muu pinta häipyy siitä usvaan.

- Aamun kerma: #fdf6f0
- Roosahuntu: #fbe3e8
- Lila usva: #efe1fb
- Puuteritaivas: #dde7fb
- Persikkavalo: #fde8d4
- Luumumuste: #4a3352

Viisi yhteen sopivaa vaaleaa sävyä ja yksi syvä tekstiväri. Vaaleus on yhteinen, joten mitkä tahansa kaksi sekoittuvat siististi. Luumu on sanoille.

Vertaa [pastelliliukuväriin](https://gradiently.design/fi/guide/pastel-gradients), joka voi olla tasainen ja iloinen, tai [sumeaan liukuväriin](https://gradiently.design/fi/guide/blurry-gradient), joka voi olla minkä värinen tahansa. Unenomainen asettuu niiden väliin: pastellivärit, pehmeä valo ja hieman usvaa päällä.

## Kopioitavat unenomaiset liukuvärikoodit

Jokainen on yksi CSS-arvo. Sivuun sijoitettu ellipsimäinen säteittäinen liukuväri luo valonlähteen vaikutelman. Kaksi lineaarista sopivat bannereihin ja pitkiin kaistaleisiin, joissa säteittäinen näyttäisi toispuoliselta.

- Ensivalo: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Lila aamu: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Ikkunan hehku: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Merisumu: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Kultaisen hetken usva: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Helmiäinen: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Pilvihämärä: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Laventeli kuutamossa: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Kahdeksan unenomaista liukuväriä. Jokaisen syvinkin sävy on vaalea, mikä pitää tunnelman pehmeänä.

Laventeli kuutamossa on ainoa hieman syvemmän reunan sisältävä vaihtoehto. Se sopii iltateemoihin, unisovelluksiin ja kehtolaululistoihin, joissa puhdas kerma olisi liian kirkas.

## Rakenna oma unenomainen liukuväri

1. **Valitse sävyperhe** Valitse kaksi tai kolme sävyä noin neljänneskierroksen sisältä väripyörästä: pinkki, lila ja sininen tai persikka, roosa ja lila. Vastakkaiset persikka ja sininen kohtaavat harmaassa. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) käsittelee ongelmaa.
2. **Nosta vaaleutta, laske kylläisyyttä** Vie kaikki värit lähelle valkoista. OKLCH:ssa tavoittele vaaleutta noin 0,92:sta 0,96:een ja kromaa alle noin 0,05:n. Värin pitäisi olla vihje, ei julistus.
3. **Sijoita valo** Aseta lämpimin ja vaalein sävy ellipsin keskelle ja siirrä keskusta sivuun, yleensä yläkulmaan. Jostakin tuleva valo muuttaa vaalean unenomaiseksi.
4. **Levitä väripysäkit** Jätä pysäkkien väliin niin paljon tilaa, ettei yksikään kaista ole alle kolmannesta kuvasta. Tiheät pysäkit tekevät renkaita, jotka rikkovat usvan.
5. **Lisää häivähdys rakeisuutta** Hieno kohinakerros hyvin pienellä peittävyydellä tuntuu filmiltä tai paperilta ja peittää sävyportaat. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää miten.

Vaiheista rakennettu: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Persikkavalo vasemmassa yläkulmassa, sitten roosa, lila ja haalea sininen kaukoreunassa. Jokaisen pysäkin vaaleus on yli 0,9.

## Unenomainen liukuväritausta CSS:llä

Yksi säteittäinen liukuväri antaa yhden valon. Kaksi tai kolme vaalean pohjan päälle kerrostettuna luo leijuvan, pilvimäisen vaikutelman. Sekoita OKLCH:ssa, jotta keskikohdat pysyvät puhtaina. [Liukuvärin interpolaatio](https://gradiently.design/fi/guide/gradient-interpolation) kertoo miksi.

```css
.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}
```

Kolme pehmeää valoa vaalealla pohjalla: persikka ylävasemmalla, lila oikealla ja puuterinsininen nousemassa alhaalta.

> **Vaaleisiin syntyy sävyportaita ensin** Hyvin vaaleissa sekoituksissa pysäkkien välillä on vähän erillisiä väriarvoja, joten voimakas pakkaus muuttaa ne raidoiksi. Vie somejulkaisu PNG:nä ja lisää rakeisuutta. [Liukuvärin sävyportaat](https://gradiently.design/fi/guide/gradient-banding) kattaa korjaukset.

## Tekstin sijoittaminen unenomaiselle liukuvärille

Valkoinen teksti katoaa vaaleaan liukuväriin, ja puhdas musta näyttää kovalta kuin lomakeleima vesivärillä. Ratkaisu on saman perheen syvä väri: luumu pinkillä ja lilalla, liuskekivensininen sumuisella tai lämmin ruskea persikalla. Teksti erottuu ja kuuluu silti kuvaan.

### Vältä

- Valkoinen tai vaaleanharmaa teksti
- Puhdas musta paksussa leikkauksessa
- Kirkkain ydin otsikon takana
- Ohut käsialafontti pienessä koossa
- Laatikko tai hehku sanojen takana kontrastin pelastamiseksi

### Tee näin

- Syvä sävytetty muste: luumu, liuskekivi, kaakao
- Tavallinen tai keskipaksu leikkaus väljällä asettelulla
- Sanat usvan rauhallisella ja tasaisella alueella
- Päätteellinen tai pehmeä päätteetön fontti reilussa koossa
- Kontrastin tarkistus jokaisen rivin sijainnissa

Vaalea unenomainen sitaattijulkaisu, jossa liukuvärin kirkkain alue tekstin takana häivyttää sanat

Kirkkain ydin osuu sanojen taakse ja rivi haalistuu.

Sama unenomainen sitaattijulkaisu, jossa rauhallisempi liukuvärialue tekstin takana tekee sanoista luettavia

Sama julkaisu, rauhallinen alue sanojen takana ja syvempi tekstiväri.

Tässä Gradiently auttaa. Mark tietää sanojen sijainnin: se siirtää rauhallisimman alueensa niiden taakse, syventää värejä kirjainten lähellä ja valitsee paletistaan vaalean tai tumman tekstivärin rivikohtaisesti. Pehmeä tausta ei maksa luettavuutta. Yleiset säännöt löytyvät oppaasta [teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient).

## Mihin unenomaiset liukuvärit sopivat

Unenomainen tuntuu lempeältä, henkilökohtaiselta ja kiireettömältä. Se sopii joillekin brändeille, toisille ei. Alennuksen lähtölaskenta lilassa usvassa tuntuu ristiriitaiselta, ihonhoitotuotteen lanseeraus juuri oikealta.

- **Hyvinvointi ja ihonhoito:** tuotejulkaisut, rutiinit ja sitaatit, yleensä Instagramissa koossa 1080×1350.
- **Häät ja kutsut:** 5×7 in kutsu koossa 1500×2100, persikan ja roosan laveeraus sekä päätteellisellä fontilla nimi.
- **Musiikki ja ääni:** Spotify Canvas 1080×1920 tai Apple Podcasts -kansi 3000×3000 rauhallisille, uni- tai ambient-ohjelmille.
- **Journal ja uutiskirjeet:** Substack-otsake 1456×816 luo rauhallisen tunnelman ennen ensimmäistä sanaa.
- **Puhelintaustat ja tarinat:** riittävän pehmeä kuvakkeiden tai tarrojen alle kilpailematta niiden kanssa.

Night Garden -podcastin neliökansi pehmeällä laventelin ja persikan unenomaisella taustalla

Podcast-kansi 3000×3000. Unenomainen väri kertoo tunnelman ennen nimen lukemista.

Jos unenomaisesta tulee brändisi pysyvä ilme, harkitse jotain, jota muut eivät voi käyttää. Gradientlyn jokaisella Markilla on kerrallaan yksi omistaja. Lunastamasi utuinen lila pysyy omana ja piirretään uudelleen jokaiseen kokoon. Pehmeiden ilmeiden laajempi perhe löytyy oppaasta [revontuliliukuvärit](https://gradiently.design/fi/guide/aurora-gradients).

## FAQ

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

Vaaleat, vähän kylläiset lähisävyt: roosa, lila, puuterinsininen, persikka ja kerma. Pidä kaikki pysäkit hyvin vaaleina.

### Miten pastelli- ja unenomainen liukuväri eroavat?

Pastelli kuvaa värejä. Unenomainen lisää pehmeän suunnatun valon ja usvan, joten liukuväri näyttää valaistulta tasaisen sijaan.

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

Syvä saman perheen väri, kuten luumu, liuskekivensininen tai kaakao. Valkoinen katoaa ja puhdas musta voi näyttää kovalta.

### Miksi unenomaisessa liukuvärissä näkyy raitoja?

Vaaleissa siirtymissä on vähän väliarvoja, joten pakkaus tuo ne esiin kaistoina. Vie PNG:nä, levitä pysäkkejä ja lisää hienoa rakeisuutta.

### Miten teen unenomaisen liukuvärin CSS:llä?

Kerrostamalla kaksi tai kolme sivuun sijoitettua, läpinäkyvään häipyvää säteittäistä liukuväriä vaalealle lineaariselle pohjalle. Sekoita `in oklch`, jotta keskikohdat säilyvät puhtaina.