Irisoivat liukuvärit: helmiäishohtoa ja valmiit värikoodit

Irisoiva liukuväri yhdistää läheisiä vaaleita sävyjä, tavallisesti lilaa, minttua, hentoa roosaa, taivaansinistä ja lämmintä kermaa, vaalean pohjan ja pehmeän valkoisen heijastuksen päälle. Vaikutelma jäljittelee helmiä, saippuakuplia ja merikorvan kuoren sisäpintaa. Värit ovat lempeitä ja muuttuvat vähitellen pinnalla, joten tulos näyttää hohteelta eikä väriraidalta. Alla olevat koodit voi liittää CSS:ään tai mihin tahansa heksakoodeja hyväksyvään suunnittelutyökaluun.

Irisoivien liukuvärien koodit

Jokainen alkaa lähes valkoisesta tai lähes mustasta ja lisää lähekkäisiä sävyjä. Kopioi liukuväri sellaisenaan tai vaihda yksi väripiste tehdäksesi siitä omasi.

Huomaa vaaleiden versioiden yhteinen piirre: yksikään väripiste ei ole täysin kylläinen, ja vaalein kohta on puhdas tai lähes puhdas valkoinen. Voimakas väri yhdessä pisteessä muuttaa helmen pastelliliukuväriksi tai vielä pidemmälle vietynä sateenkaareksi.

Irisoiva ja holografinen ilme

Sanoja käytetään usein samasta asiasta, mutta suunnittelussa ne tarkoittavat eri ilmeitä. Holografinen jäljittelee foliotarroja ja luottokorttien hologrammeja: kaikkia sävyjä, suurta kylläisyyttä ja teräviä vyöhykkeitä. Irisoiva jäljittelee luonnon pintoja, jotka vaihtavat väriä hillitysti. Jos haluat voimakkaamman version, holografiset liukuvärit käsittelee sen kokonaan.

Irisoivan liukuvärin rakentaminen alusta asti

1. 1

   Valitse pohja

   Vaalea irisointi alkaa valkoisesta tai hieman lämpimästä luonnonvalkoisesta, kuten #fbf9f6. Tumma alkaa sinimustasta, kuten #0d0f1a. Pohjan pitäisi kattaa vähintään kolmannes pinnasta.

2. 2

   Valitse kolmesta viiteen läheistä sävyä

   Etene väriympyrällä pienin askelin: lilasta taivaansiniseen, minttuun, kermaan ja roosaan. Pidä vaaleus samankaltaisena, ettei yksikään sävy nouse esiin.

3. 3

   Laske kylläisyyttä

   Jos sävyn värin tunnistaa huoneen toiselta puolelta, se on liian voimakas. Vaaleissa versioissa tavoittele sävyjä, joissa on enimmäkseen valkoista ja vain häivähdys väriä.

4. 4

   Lisää yksi heijastus

   Pieni valkoinen säteittäinen valopiste lähellä kulmaa kertoo, mistä valo tulee. Yksi riittää. Kaksi alkaa näyttää kiiltävältä painikkeelta.

5. 5

   Viimeistele hienolla rakeella

   Vaaleat liukuvärit raidoittuvat helposti näytöillä. Hieman kohinaa hajottaa portaat. Liukuvärien raidoittuminen selittää syyn ja korjauksen.

Kolmas vaihe on tärkein. Useimmat epäonnistuneet irisoivat suunnitelmat ovat vain liian värikkäitä. Oikea helmi on pääosin valkoinen. Värin huomaa vasta toisena.

Irisoiva CSS, jonka väri vaihtuu osoitettaessa

Verkossa hohteen voi saada liikkumaan osoittimen alla. Se jäljittelee sitä, mitä painettu helmiäispinta tekee mutta litteä kuva ei. Kulman rekisteröinti @property-säännöllä antaa selaimen animoida sen tasaisesti. Selaimet ilman tukea näyttävät lepotilan. Lisätiedot ovat MDN:n @property-sivulla.

@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}

Kulman kääntäminen on lempeämpää kuin taustan sijainnin liu’uttaminen, koska sävyt pysyvät paikallaan ja vain niiden suunta muuttuu. Se vastaa paremmin todellisen pinnan tapaa heijastaa valoa. OKLCH-väripisteet auttavat sävyjä sekoittumaan tasaisemmin. Katso OKLCH-liukuvärit CSS:ssä.

Teksti irisoivalla taustalla

Vaalea irisoiva pinta on vaikea tekstille. Valkoinen katoaa, ja tumma toimii vain tasaisella alueella. Käytä paletista poimittua tummaa mustetta puhtaan mustan sijaan. Pidä sanat liukuvärin rauhallisimmassa kohdassa ja vilkkain värimuutos kulmassa. Yleiset säännöt ovat artikkelissa teksti liukuväritaustalla.

Tässä Gradientlyn Mark näyttää hyötynsä. Mark tietää sanojen sijainnin ja siirtää rauhallisimman alueensa niiden taakse. Automaattinen muste valitsee vaalean tai tumman tekstivärin rivi riviltä Markin omasta paletista. Näin pehmeä helmiäispinta pysyy luettavana kaikissa ko’oissa ilman laatikoita tai varjoja.

Missä irisointi toimii parhaiten

• Ihonhoito ja kauneus: lanseerausjulkaisut, sävykortit ja pakkaustarrat. Ilme tuo mieleen kasteen ja valon iholla. Katso ihonhoitobrändin suunnittelu.
• Häät: kutsut ja ennakkokutsut helmiäispinnalla, grafiitin musteella ja reiluilla marginaaleilla.
• Korut: helmi- tai opaalitausta tuotekuvien takana toistaa kivien sävyjä kilpailematta niiden kanssa.
• Musiikki ja yöelämä: tumma öljyläikkäliukuväri 1080×1920-tarinassa, yksi valkoinen tekstirivi tummimmalla alueella.
• Teknologiatuotteiden sivut: helmiäishohtoinen pääkuva yllä kuvatulla osoitinhohteella lyhyen otsikon takana.

Irisointi sopii selkeään antiikvaan tai kevyeen groteskiin ja väljään välistykseen. Raskaat heittovarjot, paksut ääriviivat ja kylläiset tehostevärit riitelevät sen kanssa. Jos haluat helmen sijaan metallia, kromitehoste on sen kovempi ja kylmempi sukulainen.