# Näin teet hyvän liukuvärin: seitsemän tarkistusta

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

Huonot liukuvärit epäonnistuvat yleensä samoissa testeissä. Käy nämä seitsemän kohtaa läpi järjestyksessä, niin tiedät tarkalleen, mitä muuttaa ennen kuin muut näkevät työn.

## The short version

- Liukuväri näyttää hyvältä, kun värit kohtaavat harmaantumatta, pysäkit ovat epätasaisin välein ja valo tuntuu tulevan yhdestä suunnasta.
- Harmaa tai samea keskikohta syntyy vastavärien suorasta sekoituksesta; väliväri tai OKLCH-sekoitus korjaa sen.
- Pieni rakeisuus, noin 2-6 prosentin peittävyydellä, peittää raidoittumista ja saa digitaalisen liukuvärin tuntumaan pinnalta.
- Hyvä liukuväri jättää aina rauhallisen alueen, jossa sanat erottuvat vahvalla kontrastilla.
- Vie liukuvärit PNG:nä tai laadukkaana videona pakatun JPEGin sijaan, sillä se aiheuttaa näkyviä raitoja.

Hyvän liukuvärin tekeminen perustuu seitsemään järjestyksessä tehtävään tarkistukseen: harmaantumatta kohtaavat värit, epätasaiset pysäkkivälit, yksi valosuunta, tunnelman määrittävä pohja, ripaus rakeisuutta, rauhallinen tila sanoille ja tasaisuuden säilyttävä vienti. Jokainen on nopea testi selkeällä korjauksella. Lähes jokainen halvalta näyttävä liukuväri epäonnistuu ainakin kahdessa, ja niiden korjaaminen auttaa yleensä enemmän kuin kaikkien värien vaihtaminen.

| Tarkistus | Testi | Korjaus |
| --- | --- | --- |
| 1. Puhdas keskikohta | Onko keskikohta harmaa tai ruskea? | Lisää väliväri tai sekoita OKLCH:ssa |
| 2. Epätasaiset pysäkit | Onko jokainen väri yhtä leveä? | Anna yhdelle värille suurin osa tilasta |
| 3. Yksi valo | Osaatko sanoa, missä valo on? | Kirkasta yksi sivu tai kulma |
| 4. Pohja | Onko kokonaisuus selvästi tumma tai vaalea? | Tummenna tai vaalenna pohjaa |
| 5. Rakeisuus | Näetkö raitoja? | Lisää 2-6 prosenttia kohinaa |
| 6. Tila sanoille | Onko teksti luettavaa kaikkialla? | Rauhoita sen takainen alue |
| 7. Vienti | Kestääkö kuva latauksen? | PNG still-kuviin, suuri bittinopeus videoon |

Koko tarkistus yhdellä sivulla. Etene ylhäältä alas, sillä myöhemmät korjaukset riippuvat aiemmista.

## 1. Puhtaasti kohtaavat värit

Kun väriympyrän vastakkaiset värit sekoittuvat suoraan, keskikohta muuttuu harmaaksi. Tavallisia pareja ovat sininen ja oranssi sekä vihreä ja vaaleanpunainen. Lisää väliväri, joka ohjaa sekoituksen ympyrää pitkin keskustan sijaan, tai sekoita havaintoon perustuvassa väriavaruudessa. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) ja [liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) selittävät molemmat.

- Ei toimi: harmaa keskikohta: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Toimii: magenta välivärinä: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Toimii: OKLCH-sekoitus: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Samat kaksi väriä kolmella tavalla. Väliväri tai havaintoon perustuva sekoitus pitää keskikohdan elävänä.

## 2. Epätasaisin välein asetetut pysäkit

Tasaiset värivälit näyttävät valmiilta liukuväripohjalta. Luonnossa yksi väri hallitsee ja muutos tapahtuu lyhyellä matkalla: taivas on enimmäkseen sininen ja lämmin kaista horisontissa kapea. Anna päävärille 60-70 prosenttia kuvasta ja muiden tulla myöhään. [Liukuvärin väripysäkit](https://gradiently.design/fi/guide/gradient-stops) syventää sijainteja ja siirtymävihjeitä.

- Tasaiset kolmannekset: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Painotus yläosaan: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Samat kolme väriä. Painotetussa versiossa on tunnelma, tasaisessa kaava.

## 3. Valo yhdestä suunnasta

Hyvä liukuväri tuntuu valaistulta. Päätä valon suunta, yleensä yläkulma, ja tee siitä kirkkain ja kylläisin alue. Muu pinta hiipuu siitä poispäin. Jos et voi osoittaa valonlähdettä, liukuväri tuntuu litteältä väreistä riippumatta. Lineaarisen päälle asetettu pehmeä [säteittäinen liukuväri](https://gradiently.design/fi/guide/radial-gradient) lisää valon nopeimmin.

## 4. Tunnelman määrittävä pohja

Päätä, onko suunnitelma tumma vai vaalea, ja pysy siinä. Keskivioletista keskivaaleanpunaiseen vaeltavalla liukuvärillä ei ole pohjaa, joten se tuntuu epäröivältä. Lähes musta saa värit hohtamaan, lämmin luonnonvalkoinen tuntumaan painetuilta. Vie pohja hieman mukavuusrajan yli ja palaa yksi askel takaisin.

- Ei pohjaa: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Tumma pohja, valaistu kulma: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Vaalea pohja, valaistu kulma: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Tarkistukset 3 ja 4 yhdessä. Selkeä pohja ja yksi valo muuttavat valmisasetuksen maisemaksi.

## 5. Rakeisuus: sopiva kohinan määrä

Täysin sileät digitaaliset liukuvärit raidoittuvat monilla näytöillä ja näyttävät ohjelmiston oletuksilta. Hieno kohinakerros korjaa molemmat. Hyödyllinen alue on kapea: alle noin 2 prosentin peittävyyttä ei näe, ja yli noin 8 prosenttia näyttää jo tarkoitukselliselta tekstuurilta viimeistelyn sijaan. Aloita tummalla liukuvärillä 3 prosentista ja vaalealla 5 prosentista, sillä kohina erottuu vaaleissa väreissä heikommin.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Toistuva SVG-kohinakerros 4 prosentin peittävyydellä. Muuta peittävyyttä askel kerrallaan tarkkaillen tumminta aluetta.

Lisää rakeisuusohjeita on artikkeleissa [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) ja [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture).

## 6. Rauhallinen tila sanoille

Useimpien liukuvärien tehtävä on kantaa viesti. Päätä sanojen paikka ja varmista, että alue on rauhallisin ja sävyiltään tasaisin, jolloin jokaisella rivillä on sama kontrasti. Kirkkain ja levottomin kohta kuuluu muualle. Älä korjaa heikkoa kontrastia kirjainten takaisella hohdolla: siirrä valo.

Alennusjulkaisu, jonka otsikko osuu osittain liukuvärin kirkkaaseen kohtaan ja menettää kontrastin

Ei läpäise kohtaa 6: väri kulkee suoraan sanojen läpi.

Sama alennusjulkaisu, otsikon takana rauhallinen tasainen alue ja kaikki sanat selkeästi luettavina

Läpäisee: tekstin takainen alue on rauhallisempi ja kaikki rivit erottuvat.

Tämän tarkistuksen Gradiently tekee puolestasi. Mark tietää sanojesi paikan: rauhallisin alue siirtyy tekstin taakse, värit syvenevät tai vaalenevat kirjainten lähellä ja Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista.

## 7. Tasaisuuden säilyttävä vienti

- **Still-kuvat:** vie PNG:nä. JPEG-pakkaus muuttaa pitkät häivytykset portaiksi, ja somesovellus pakkaa uudelleen ladattaessa.
- **Video:** käytä suuren bittinopeuden MP4:ää täsmälleen alustan koossa, jotta skaalausta ei tarvita.
- **Koko:** vie alustan omilla mitoilla, kuten Instagram-julkaisu 1080×1350, sovelluksen rajauksen sijaan.
- **Tarkista puhelimella:** katso ladattu versio pimeässä huoneessa täydellä kirkkaudella. Siellä raidoittuminen paljastuu.

Jos raidat säilyvät, [liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) tarjoaa perusteellisemmat korjaukset.

## FAQ

### Miten teen hyvännäköisen liukuvärin?

Käytä harmaantumatta sekoittuvia värejä, epätasaisia pysäkkivälejä ja yhtä valosuuntaa. Valitse tumma tai vaalea pohja, lisää vähän rakeisuutta ja jätä rauhallinen tila sanoille.

### Paljonko kohinaa liukuväriin kannattaa lisätä?

Yleensä 2-6 prosentin peittävyys. Aloita tummilla liukuväreillä noin 3 prosentista ja vaaleilla 5 prosentista ja lopeta heti raitojen kadottua.

### Miksi liukuvärini näyttää samealta?

Kaksi vastaväriä sekoittuu harmaan kautta. Lisää niiden väliin väliväri tai sekoita OKLCH:ssa.

### Miksi liukuvärini näyttää halvalta?

Siinä on luultavasti kaksi tasaisesti jaettua väriä 45 asteen kulmassa ilman rakeisuutta. Nämä ovat useimpien työkalujen oletukset ja näyttävät siksi harkitsemattomilta.

### Mikä tiedostomuoto sopii liukuväreille?

PNG still-kuville ja suuren bittinopeuden MP4 videolle. Pakattu JPEG raidoittaa pitkät, pehmeät häivytykset.