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

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

Irisointi on holografisen ilmeen hiljainen sukulainen: helmi, saippuakupla, simpukankuoren sisäpinta. Näillä väreillä, koodeilla ja säännöillä luot pinnan etkä sateenkaarta.

## The short version

- Irisoiva liukuväri yhdistää läheisiä vaaleita sävyjä, yleensä lilaa, minttua, hentoa roosaa, taivaansinistä ja kermaa, jotta pinta näyttää vaihtavan väriä katseen liikkuessa.
- Irisointi eroaa holografisesta ilmeestä voimakkuudellaan: holografinen käyttää kylläistä sateenkaarta, irisoiva pysyy pehmeänä, vaaleana ja pääosin neutraalina.
- Helmiäisvaikutelma syntyy vaaleasta pohjasta, vähäisestä kylläisyydestä, yhdestä valkoisesta heijastuksesta ja väriympyrän läheisistä sävyistä.
- Tumma irisointi, kuten öljyläikkä tai kovakuoriaisen kuori, käyttää samaa ideaa lähes mustalla pohjalla syvän sinivihreän, violetin ja pronssin kanssa.
- Irisoivan taustan teksti tarvitsee taakseen rauhallisen, tasaisen alueen, koska vaihtuvat vaaleat sävyt antavat vaalealle tekstille heikon ja tummalle levottoman kontrastin.

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

- Helmi: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opaali: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Saippuakupla: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Merikorva: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Öljyläikkä: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Kovakuoriaisen kuori: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Neljä vaaleaa ja kaksi tummaa irisoivaa liukuväriä. Kaikissa kuudessa sävyjen voimakkuus pysyy lähellä toisiaan, mikä estää sateenkaarivaikutelman.

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](https://gradiently.design/fi/guide/pastel-gradients) 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](https://gradiently.design/fi/guide/holographic-gradients) käsittelee sen kokonaan.

| Ominaisuus | Irisoiva | Holografinen |
| --- | --- | --- |
| Kylläisyys | Matala, vaaleat sävyt | Korkea, koko sateenkaari |
| Pohja | Lähes valkoinen tai lähes musta | Usein hopea tai värit itsessään |
| Siirtymät | Pitkät ja pehmeät | Lyhyet, usein vyöhykkeiset |
| Todellinen esikuva | Helmi, simpukka, saippuakupla, öljy vedessä | Folio, tarrat, turvahologrammit |
| Tunnelma | Rauhallinen, hienostunut, ihonhoito, häät | Leikkisä, voimakas, Y2K, musiikki |

Nopein testi: siristä silmiäsi. Jos näet yhä erilliset sävyt, ilme on holografinen. Jos näet pehmeän vaalean pinnan, jossa on häivähdys väriä, se on irisoiva.

## Irisoivan liukuvärin rakentaminen alusta asti

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. **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. **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. **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. **Viimeistele hienolla rakeella** Vaaleat liukuvärit raidoittuvat helposti näytöillä. Hieman kohinaa hajottaa portaat. [Liukuvärien raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) 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.

- Simpukanvalkoinen: #fbf9f6
- Lila hohde: #ece6f6
- Mintun hohde: #dff3f4
- Taivaansininen hohde: #e4ecf7
- Roosan hohde: #fbe7f0
- Kerman hohde: #fff6e0
- Grafiitin muste: #3d3a4a

Toimiva irisoiva väripaletti: pohja, viisi hohdetta ja yksi tumma muste tekstille. Muste antaa vaaleille väreille vastapainon.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@property).

```css
@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; }
}
```

Helmiäiskortti, jonka hohde kääntyy osoitettaessa. Valkoinen säteittäinen kerros on heijastus, lineaarinen kerros sisältää sävyt.

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ä](https://gradiently.design/fi/guide/css-gradient-oklch).

## 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](https://gradiently.design/fi/guide/text-on-gradient).

Vaalea helmiäishohtoinen lanseerausjulkaisu, jonka otsikko kulkee kirkkaimman hohteen yli ja erottuu heikosti

Suoraan vaihtuvien sävyjen päälle asetetut sanat menettävät reunansa hohteen kirkkaimmassa kohdassa.

Sama helmiäishohtoinen lanseerausjulkaisu, jonka otsikon takana on tasainen alue ja värimuutos kulmassa

Kun rauhallisin alue on otsikon takana ja värimuutos sivussa, sama julkaisu on luettava yhdellä silmäyksellä.

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](https://gradiently.design/fi/guide/skincare-brand-design).
- **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](https://gradiently.design/fi/guide/chrome-effect) on sen kovempi ja kylmempi sukulainen.

## FAQ

### Mitkä värit muodostavat irisoivan liukuvärin?

Vaalea lila, minttu, taivaansininen, hento roosa ja kerma valkoisella pohjalla sekä pehmeä valkoinen heijastus. Tummaan versioon sopivat syvä sinivihreä, violetti ja pronssi sinimustalla.

### Mitä eroa on irisoivalla ja holografisella?

Irisoiva on pehmeä ja vaalea kuin helmi tai saippuakupla. Holografinen käyttää koko sateenkaarta voimakkaasti kylläisenä kuten foliotarrat.

### Miten teen irisoivan tehosteen CSS:llä?

Aseta valkoinen säteittäinen heijastus läheisten vaaleiden sävyjen lineaarisen liukuvärin päälle. Rekisteröi kulma `@property`-säännöllä ja muuta sitä osoitettaessa, niin hohde liikkuu.

### Onko helmiäishohto sama kuin irisointi?

Helmiäishohto on irisoinnin muoto: pääosin valkoinen, jossa on hento värimuutos. Irisointi kattaa myös tummemmat muutokset kuten öljyn vedessä ja kovakuoriaisen kuoren.

### Mikä tekstiväri toimii irisoivalla taustalla?

Paletin tumma muste, esimerkiksi hieman violetti grafiitti, rauhallisimmalla alueella. Valkoinen teksti erottuu vaaleasta irisoivasta pinnasta harvoin.