# Hillitty liukuväri: rauhallista syvyyttä käyttöliittymään

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

Parhaat käyttöliittymän liukuvärit huomataan vasta, kun ne poistuvat. Tästä saat heti käytettävät koodit, sopivat käyttökohteet ja ratkaisun tekniseen pulmaan, johon moni törmää.

## The short version

- Hillitty liukuväri muuttaa vaaleutta vain muutaman prosentin tai sävyä pienen askeleen, jolloin pinta näyttää valaistulta eikä tasaiselta.
- Hillityt liukuvärit toimivat parhaiten sivutaustoissa, korteissa, pääosioissa ja tumman tilan pinnoilla, joissa ne tuovat syvyyttä kilpailematta sisällön kanssa.
- Oklch-tilassa sekoittaminen pitää hillityn liukuvärin vaaleuden muutoksen tasaisena päästä päähän.
- Hillityt liukuvärit raidoittuvat voimakkaita enemmän, koska lähekkäisten sävyjen välissä on vähemmän väriaskelia. Tavallinen korjaus on pieni määrä kohinaa.
- Tummassa käyttöliittymässä hieman vaaleampi yläreuna näyttää pintaan osuvan valon vaikutukselta.

**Hillitty liukuväri** siirtyy kahden niin läheisen värin välillä, että muutoksen tuntee enemmän kuin näkee: valkoisesta viileään luonnonvalkoiseen tai lähes mustasta hieman pehmeämpään lähes mustaan. Pieni siirtymä saa pinnan näyttämään valaistulta, minkä vuoksi selkeät käyttöliittymät käyttävät sitä sivutaustoissa, korteissa ja tumman tilan paneeleissa. Alla olevissa koodeissa vaaleusero pysyy muutamassa prosentissa. Suurempi ero tekee liukuväristä jo huomiota vaativan elementin pelkän pinnan sijaan.

## Vaaleiden hillittyjen liukuvärien koodit

Jokainen alkaa läheltä valkoista ja kulkee kohti hentoa sävyä. Poimi sävy brändiväristäsi, niin taustakin kantaa jälkeä identiteetistä. Ylhäältä alas kulkevat siirtymät tuntuvat luonnollisimmilta, koska valo tulee yleensä ylhäältä.

- Paperi: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Sumunsininen: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Lämmin pellava: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Syreeniutu: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Minttulaveeraus: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Kulmavalo: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Kuusi vaaleaa, hillittyä liukuväriä. Kirkkaalla näytöllä ne tuntuvat pehmeästi valaistulta paperilta, puhelimella päivänvalossa lähes valkoiselta.

## Tummien hillittyjen liukuvärien koodit

Tummat pinnat hyötyvät vielä enemmän, koska tasainen puhdas musta näyttää reiältä näytössä. Nosta yläosaa hieman ja anna alaosan asettua. [Tumman tilan liukuvärit](https://gradiently.design/fi/guide/dark-mode-gradients) käsittelee kokonaisia teemoja, nämä ovat niiden rakennuspalikoita.

- Grafiitti: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Keskiyö: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Mustevioletti: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Metsäyö: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Ylähehku: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Kuusi tummaa, hillittyä liukuväriä. Ylähehku sopii pääosioon tai modaaliin: hento valolammikko ylhäältä.

## Hillittyjen liukuvärien paikat käyttöliittymässä

| Pinta | Hillittyyden taso | Esimerkki |
| --- | --- | --- |
| Sivun tausta | Tuskin näkyvä koko korkeudella | `#ffffff` → `#f6f7f9` |
| Kortti | Hieman vaaleampi yläreunassa | `#ffffff` → `#fafafa` |
| Pääosio | Hento sävy kerääntyy otsikon taakse | Kulmavalo tai ylähehku |
| Painike | Vaaleampi ylhäällä, hieman syvempi alhaalla | `#4f46e5` → `#4338ca` |
| Tumman tilan paneeli | Yläosa nostettu, alaosa rauhallinen | `#18181b` → `#0f0f12` |
| Sivupalkki tai alatunniste | Sivua hieman tummempi, yhä liukuva | `#f8fafc` → `#eef2f7` |

Hillityt liukuvärit eri pinnoilla. Käytä samaa suuntaa koko käyttöliittymässä, jotta valo näyttää tulevan yhdestä paikasta.

Nyrkkisääntö: hillitty liukuväri ei saa olla katseen kohde. Jos arvioija kommentoi liukuväriä, se on liian voimakas taustaksi. Hillitympiä ilmeitä painoon, someen ja näytöille löydät [minimalistisista taustoista](https://gradiently.design/fi/guide/minimalist-backgrounds).

Pystyjulkaisu, jossa on lyhyt tekstirivi rauhallisella, pehmeästi muuttuvalla taustalla

Rauhallinen tausta ja yksi lyhyt rivi. Kun väri pysyy hiljaisena, typografia tekee työn.

## Sävytä hillitty liukuväri brändivärilläsi

Neutraali harmaa liukuväri on turvallinen mutta nimetön. Kun vaaleassa tai tummassa päässä on häivähdys brändisävyäsi, koko käyttöliittymä tuntuu liittyvän logoon, vaikka kukaan ei osaisi sanoa miksi. Säilytä sävy ja poista lähes kaikki kylläisyys.

1. **Poimi brändin sävy** Muunna päävärisi oklch- tai HSL-muotoon ja kirjaa vain sävy: violetille noin 265, vihreälle 160, lämpimälle oranssille 30.
2. **Pidä väri lähes harmaana** Aseta värikylläisyys oklch-tilassa hyvin matalaksi, noin 0,005-0,015, tai HSL-kylläisyys alle noin 30 %:n hyvin suurella vaaleudella. Tavoite on värin kuiskaus, ei pastelli.
3. **Aseta kaksi vaaleusarvoa** Vaaleissa teemoissa kokeile 99 % ja 96 %, tummissa noin 20 % ja 15 %. Pidä molemmat päät samalla sävyllä, jotta sekoitus ei kulje kohti harmaata tai toista väriä.
4. **Vertaa puhtaaseen valkoiseen tai mustaan** Aseta liukuväri tasaisen valkoisen tai mustan alueen viereen. Jos et näe eroa lainkaan, säädä alempaa päätä. Jos sävy näkyy huoneen toiselta puolelta, vähennä kylläisyyttä.

Sama sävy voi jatkua reunuksissa, jakoviivoissa ja osoitustiloissa, jolloin liukuväri on osa hillittyä järjestelmää eikä yksittäinen tehoste. Painikkeissa voit sallia hieman vahvemman siirtymän ja muutaman prosentin tummemman alareunan, koska pieni tilavuuden tuntu tekee niistä painettavan näköisiä.

## Hillitty liukuväri CSS:llä

Heksakoodit toimivat kaikkialla. Tarkempaan hallintaan kirjoita värit oklch-muodossa, jossa ensimmäinen luku on havaittu vaaleus. Näin voit asettaa muutoksen tarkasti esimerkiksi 99 %:sta 96 %:iin. Oklch-sekoitus pitää myös muutoksen tasaisena koko matkalla. [CSS-liukuväri oklch-tilassa](https://gradiently.design/fi/guide/css-gradient-oklch) kertoo syntaksin ja [lineaarinen CSS-liukuväri](https://gradiently.design/fi/guide/css-linear-gradient) perusteet.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

Heksavärivararatkaisu ja sitten oklch-versio tarkalla vaaleusmuutoksella selaimille, jotka tukevat värien interpolointia liukuväreissä.

> **Kiinteä vai vierivä** `background-attachment: fixed` sitoo liukuvärin ikkunaan, joten pitkä sivu ei venytä muutosta näkymättömäksi. Testaa mobiilissa, jossa jotkin selaimet käsittelevät kiinteitä taustoja eri tavalla.

## Miksi hillitty liukuväri raidoittuu ja miten korjaat sen

Kahden läheisen värin välissä on 8-bittisessä kuvassa hyvin vähän askelia. Kun venytät ne 1920 pikselin levyisen pääosion yli, jokaisesta askeleesta tulee näkyvä raita. Tämä korostuu tummissa liukuväreissä ja edullisemmilla näytöillä. Koko selitys on [liukuvärin raidoittumisen oppaassa](https://gradiently.design/fi/guide/gradient-banding).

### Raidat näkyvät

- Kaksi tummaa, hyvin läheistä väriä koko näytöllä
- Pakattuna JPEG:nä tallennettu liukuväri
- Puhdas sekoitus ilman askelia rikkovaa elementtiä

### Pysyy tasaisena

- Hieman suurempi muutos tai kolmas väripiste
- CSS:llä renderöity tai PNG:nä viety
- Hento kohinakerros liukuvärin päällä

Verkossa pieni SVG-kohinatekstuuri liukuvärin päällä matalalla peittävyydellä poistaa näkyvät askeleet ilman huomattavaa rakeisuutta. [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture) tarjoaa koodin. Somejulkaisuissa ja dioissa Gradientlyn Markissa on oma rakeisuus, ja se renderöityy joka kokoon. Näin hillitty tausta pysyy tasaisena tarinassa ja bannerissa. Kun haluat hillityn vastakohdan, [eloisat liukuvärit](https://gradiently.design/fi/guide/vibrant-gradients) tarjoaa kylläiset koodit.

## FAQ

### Mikä on hillitty liukuväri?

Liukuväri kahden hyvin läheisen värin välillä. Vaaleus eroaa yleensä vain muutaman prosentin, joten pinta näyttää pehmeästi valaistulta eikä selvästi värilliseltä.

### Mikä on hyvä hillitty liukuväri valkoiselle taustalle?

Kokeile `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, joka siirtyy valkoisesta hentoon viileään harmaaseen.

### Miksi hillitty liukuvärini näyttää raidalliselta?

Läheisten värien välissä on vähän askelia, joten ne raidoittuvat. Lisää kolmas väripiste, suurenna muutosta hieman tai aseta päälle hento kohinatekstuuri.

### Pitäisikö hillityn liukuvärin kulkea ylhäältä alas?

Yleensä. Valo tulee tavallisesti ylhäältä, joten hieman vaaleampi yläosa tuntuu luonnolliselta sekä vaaleilla että tummilla pinnoilla.