# Kohinainen liukuväri: tasainen väri, rakeinen pinta

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

Kohinaisia liukuvärejä on helppo kuvailla mutta hankala tehdä oikein. Tässä viisi testattua ohjetta väreineen, asetuksineen ja perusteluineen sekä selitykset generaattorin jokaiselle säätimelle.

## The short version

- Kohinainen liukuväri on tasainen väriliuku, jonka hieno satunnaiskohina tekee painetun ja käsinkosketeltavan tuntuiseksi sekä peittää porrastumista.
- Tärkeimmät asetukset ovat kohinan taajuus, joka säätää rakeen kokoa, ja peittävyys, joka säätää sen voimakkuutta.
- Fraktaalikohina taajuudella 0,6-0,9 ja Päällekkäin- tai Pehmeä valo -sekoituksella 8-20 prosentin peittävyydessä sopii useimpiin näyttötaustoihin.
- Tummat liukuvärit tarvitsevat vähemmän kohinaa kuin vaaleat, koska rakeisuus näkyy selvimmin varjoissa ja keskisävyissä.
- CSS:ssä kohinan voi piirtää upotetun SVG:n `feTurbulence`-suodattimella, joten se pysyy terävänä kaikissa ko’oissa eikä tarvitse kuvatiedostoa.

**Kohinainen liukuväri** on tasainen väriliuku, jonka päällä oleva hieno satunnaiskohina saa värin tuntumaan painetulta digitaalisen pinnan sijaan. Liuku antaa värin ja valon suunnan, kohina pinnan ja estää liukua hajoamasta raidoiksi. Alla on viisi kopioitavaa ohjetta ja selkeät selitykset generaattorin asetuksista, jotta voit tehdä omia versioita.

## Viisi ohjetta kohinaiseen liukuväriin

Jokainen ohje sisältää pohjaliukuvärin ja kohina-asetuksen. Liukuvärit näkyvät tässä ilman kohinaa, jotta näet värin. Alla oleva taulukko kertoo päälle lisättävän kohinan. Ne ovat tarkoituksella erilaisia: yksi tumma, yksi vaalea, yksi lämmin, yksi viileä ja yksi rohkea.

- 1. Yön violetti: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Persikkapaperi: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Auringonlaskujuliste: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Syvä laguuni: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Kirkas sininen: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

Viisi pohjaliukua ennen kohinaa. Kopioi CSS napsauttamalla haluamaasi.

| Ohje | Taajuus | Sekoitus | Peittävyys | Perustelu |
| --- | --- | --- | --- | --- |
| 1. Yön violetti | 0,85, 3 oktaavia | Päällekkäin | 8 % | Rakeisuus näkyy tummissa sävyissä helposti, joten pidä se kevyenä |
| 2. Persikkapaperi | 0,65, 4 oktaavia | Kertova | 10 % | Kertova vain tummentaa, joten vaalea pohja pysyy pehmeänä |
| 3. Auringonlaskujuliste | 0,6, 3 oktaavia | Päällekkäin | 20 % | Vahva väri kantaa runsaamman, karkeamman rakeen silkkipainon tapaan |
| 4. Syvä laguuni | 0,9, 2 oktaavia | Pehmeä valo | 12 % | Hieno rakeisuus pitää viileän liu’un selkeänä |
| 5. Kirkas sininen | 0,75, 3 oktaavia | Pehmeä valo | 14 % | Sinisestä vaaleansiniseen kulkeva liuku porrastuu helposti, kohina tasoittaa sen |

Kunkin ohjeen kohina-asetukset yksiväriselle fraktaalikohinalle. Taajuus ja oktaavit vastaavat suoraan alla olevan koodin SVG-suodatinta.

## Kohinaliukuvärigeneraattorin asetukset selitettynä

Jokainen kohinavaihtoehdon sisältävä [liukuvärigeneraattori](https://gradiently.design/fi/guide/gradient-generator) ja SVG-kohinasuodatin käyttää samoista säätimistä jotakin versiota. Kun tunnet niiden tehtävät, osaat lukea ohjeita ja korjata tuloksia.

| Asetus | Mitä muuttaa | Hyvä lähtökohta |
| --- | --- | --- |
| **Taajuus** (mittakaava, koko) | Rakeen koko. Suurempi arvo tekee hienomman, pienempi karkeamman. | 0,6-0,9 näytöille |
| **Oktaavit** (yksityiskohdat) | Kohinan sisäiset yksityiskohtakerrokset. Useampi näyttää rikkaammalta ja vaatii enemmän piirtoa. | 2-4 |
| **Tyyppi** | Fraktaalikohina on pehmeää ja pilvimäistä, turbulenssi terävämpää ja juovikkaampaa. | Fraktaalikohina |
| **Väri** | Yksivärinen säilyttää paletin tarkkana, värikohina lisää filmimäisiä pilkkuja. | Yksivärinen |
| **Sekoitustila** | Miten kohina sekoittuu väriin. Päällekkäin lisää kontrastia, Pehmeä valo on lempeämpi, Kertova vain tummentaa. | Päällekkäin tai Pehmeä valo |
| **Peittävyys** (määrä) | Kokonaisvoimakkuus. | 8-20 % |
| **Siemenluku** | Minkä satunnaiskuvion saat. Vaihda, jos jokin kasauma häiritsee. | Mikä tahansa |

Jokaisen kohinageneraattorin säätimet selkokielellä.

> **Arvioi kohina lopullisessa koossa** Kannettavalla lähennettynä sopivalta näyttävä kohina katoaa usein puhelimessa tai puuroutuu latauksen jälkeen. Tarkista viety kuva siinä koossa ja sillä näytöllä, jossa ihmiset sen näkevät.

## Näin teet kohinaisen liukuvärin CSS:llä

Selkein tapa kerrostaa SVG-kohinakuva liukuvärin päälle yhdessä `background`-määrityksessä ja sekoittaa ne. Vaihda liukuväriksi mikä tahansa yllä olevista ohjeista ja aseta taajuus ja peittävyys taulukosta.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

Ohje 1 CSS:nä. Kohina on pseudoelementillä sisällön alla, joten teksti pysyy terävänä. `stitchTiles` tekee saumattoman toiston.

### Vahvakontrastisten pilkkujen menetelmä

Rohkeampaa, lähes risopainettua ilmettä varten aseta kohina ja liukuväri samaan kerrokseen ja käytä kontrastisuodatinta. Kohina puristuu teräviksi pilkuiksi, jotka seuraavat liukuvärin valoa. Ilme on ohjetta 3 voimakkaampi, joten käytä sitä julisteissa ja pääbannereissa, älä leipätekstin takana.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Kontrasti puristaa pehmeän kohinan pilkuiksi, ja suuri kirkkaus vie muun kohti valkoista. Kertova asettaa tuloksen värillisen emoelementin päälle. Säädä kahta suodatinarvoa yhdessä ja pidä teksti erillisessä kerroksessa niiden yläpuolella.

## Oikean kohinan valitseminen eri muotoihin

Kohina on suhteessa työalueeseen. Sama suodatin näyttää puhelintarinassa hienolta ja pienessä bannerissa karkealta. Sovita siis taajuus muotoon saman tiedoston käyttämisen sijaan.

Pystysuuntainen lähtölaskentatarina rakeisella violetilla liukuväritaustalla

1080×1920-tarina näkyy puhelimessa läheltä: pidä kohina hienona ja melko kevyenä.

Leveä verkkopääkuva, jonka otsikko on pehmeän rakeisella lämpimällä liukuvärillä

1920×1080-verkkopääkuva täyttää suuren näytön: vähennä peittävyyttä, koska suurilla pinnoilla kohina korostuu.

- **Tarinat ja julkaisut:** taajuus noin 0,8, peittävyys 8-14 prosenttia. Hieman enemmän kuin luulet, koska lataukset pehmentävät sitä.
- **Verkkopääkuvat:** taajuus 0,7-0,9, peittävyys 4-10 prosenttia. Katso [verkkosivun pääkuvataustat](https://gradiently.design/fi/guide/website-hero-background).
- **Painojulisteet:** karkeampi rae, taajuus 0,5-0,7 lopullisessa pikselikoossa, jotta se säilyy painossa.
- **Tummat taustat:** puolita tavallinen määrä. [Tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) selittää, miksi rakeisuus näkyy ensin varjoissa.

## Kohinainen vai rakeinen liukuväri

Ajatus on sama, painotus eri. Rakeinen liukuväri kuvaa ilmettä, kohinainen liukuväri valmistustapaa. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) kertoo, miksi rae toimii ja mihin sitä sijoitetaan. Tämä sivu on ohjekirja. Jos haluat tekstuurin ilman väriliukua, aloita [rakeisesta tekstuurista](https://gradiently.design/fi/guide/textured-background).

Jos et halua säätää liukusäätimiä lainkaan, jokainen Gradientlyn Mark sisältää oman rakeisuusasetuksensa värien, valon ja liikkeen rinnalla. Se piirtyy uudelleen jokaisessa koossa, joten kohina ei veny tai sumene. Suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla.

## FAQ

### Mikä kohinainen liukuväri on?

Tasainen väriliuku, jonka päällä on hienoa satunnaiskohinaa. Kohina luo painetun pinnan ja peittää porrastumista.

### Mitä kohina-asetuksia käytän liukuvärissä?

Yksivärinen fraktaalikohina, taajuus 0,6-0,9 ja 2-4 oktaavia, sekoitettuna Päällekkäin- tai Pehmeä valo -tilassa noin 8-20 prosentin peittävyydellä.

### Miten lisään kohinaa liukuväriin CSS:llä?

Kerrostamalla upotetun SVG:n `feTurbulence`-suodattimella liukuvärin päälle pseudoelementillä ja asettamalla `mix-blend-mode: overlay` sekä pienen peittävyyden.

### Miksi kohinainen liukuväri näyttää sumealta lataamisen jälkeen?

Alustat pakkaavat kuvat uudelleen ja tasoittavat hienot yksityiskohdat. Vie tarkassa alustakoossa PNG:nä tai laadukkaana JPEG:nä ja käytä somejulkaisuissa hieman enemmän kohinaa.

### Onko kohinainen liukuväri sama kuin rakeinen liukuväri?

Käytännössä kyllä. Rakeinen kuvaa ilmettä ja kohinainen sen tekemiseen käytettyä menetelmää.