Unenomaiset liukuvärit: utuiset pastellit ja pehmeä valo

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.

Vertaa pastelliliukuväriin, joka voi olla tasainen ja iloinen, tai sumeaan liukuväriin, 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.

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. 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 käsittelee ongelmaa.

2. 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. 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. 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. 5

   Lisää häivähdys rakeisuutta

   Hieno kohinakerros hyvin pienellä peittävyydellä tuntuu filmiltä tai paperilta ja peittää sävyportaat. Rakeiset liukuvärit näyttää miten.

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 kertoo miksi.

.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%);
}

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.

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ä.

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.

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.