# Yksiväriset liukuvärit: yksi sävy, monta tummuusastetta

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

Yksi väri, jossa muuttuu vain vaaleus: rauhallisin liukuväri paljastaa jokaisen virheen. Saat toimivat koodit, sävyn säilyttävän CSS:n ja korjauksen raidoittumiseen.

## The short version

- Yksivärinen liukuväri yhdistää yhden sävyn tummasta vaaleaan tai kulkee mustasta valkoiseen harmaiden kautta.
- Yksivärinen liukuväri on yksi häivytys, kun taas monokromaattinen värimaailma on kokonainen yhdestä sävystä rakennettu paletti.
- Väripisteiden määrittely oklch-muodossa kiinteällä sävyllä estää yhden värin liukuväriä ajautumasta harmaaseen tai toiseen sävyyn.
- Tummat yksiväriset liukuvärit raidoittuvat eniten, koska 8-bittisessä näytössä on vain vähän erillisiä askelia lähes mustien sävyjen välillä.
- Kevyt rakeisuuskerros yksivärisen liukuvärin päällä peittää raidoittumista ja saa sen tuntumaan pinnalta.

**Yksivärinen liukuväri** kulkee yhden sävyn omien tummuusasteiden läpi syvästä vaaleaan ilman toista väriä. Mustasta valkoiseen harmaan kautta on puhtain versio. Myös tummansinisestä vaaleansiniseen tai munakoisosta lilaan nouseva häivytys on yksivärinen liukuväri. Ne näyttävät rauhallisilta ja arvokkailta, koska mikään ei kilpaile huomiosta. Samasta syystä ne paljastavat jokaisen virheen: raidat, sameat keskikohdat ja puolivälissä karkaavan sävyn. Alla olevat koodit ja CSS välttävät kaikki kolme.

Hiilenharmaasta hopeaan: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Mustavalkoinen liukuväri, jonka väripisteet painottuvat tummaan päähän. Suurin osa kehyksestä pysyy syvänä, ja valo tulee vasta lopussa.

## Yksivärinen liukuväri ja monokromaattinen värimaailma

Termit liittyvät toisiinsa ja sekoittuvat usein. [Monokromaattinen värimaailma](https://gradiently.design/fi/guide/monochromatic-color-scheme) on paletti: yhden sävyn vaalennuksia, harmaannuksia ja tummennuksia koko työssä. Yksivärinen liukuväri on yksi häivytys tämän ajatuksen sisällä. Voit käyttää sitä työssä, jonka paletti ei ole lainkaan monokromaattinen, kuten syvää sinistä taustaa oranssin tekstin alla.

| Ominaisuus | Yksivärinen liukuväri | Monokromaattinen värimaailma |
| --- | --- | --- |
| Mikä se on | Yksi jatkuva häivytys | Joukko erillisiä värejä |
| Missä se esiintyy | Tausta, muoto, painike | Kokonainen brändi tai sommittelu |
| Sävyjen määrä | Yksi | Yksi |
| Tavallinen käyttö | Päätaustat, kortit, julisteet | Käyttöliittymät, kuvitus, identiteetti |

Sama periaate eri mittakaavassa. Liukuväri on pinta, värimaailma järjestelmä.

## Kopioitavat yksiväristen liukuvärien koodit

Jokainen näistä säilyttää yhden sävyn ja muuttaa vain vaaleutta sekä hieman kylläisyyttä. Tummemmat väripisteet ovat hieman kylläisempiä kuin vaaleat. Näin todellinen väri käyttäytyy varjossa, ja siksi nämä näyttävät luonnollisilta.

- Mustasta valkoiseen: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Grafiitin kohdevalo: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Laivastonsinisestä taivaaseen: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Männystä minttuun: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Häränverestä roosaan: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Munakoisosta lilaan: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Umbrasta hunajaan: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Paperista kiveen: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Kahdeksan yksiväristä liukuväriä. Jokainen säilyttää oman sävynsä alusta loppuun.

Tämän perheen tummaa päätä käsittelevät [mustat liukuvärit](https://gradiently.design/fi/guide/black-gradient) ja [harmaat liukuvärit](https://gradiently.design/fi/guide/grey-gradient). Askeliin perehdyttää [vaalennukset, harmaannukset ja tummennukset](https://gradiently.design/fi/guide/tints-tones-shades).

## Yksivärisen liukuvärin tekeminen CSS:llä

Helpoin tapa säilyttää yksi sävy on kirjoittaa väripisteet oklch-muodossa ja muuttaa vain ensimmäistä lukua eli vaaleutta. Sävyä määrittävä kulma pysyy samana, joten väri ei karkaa. Oklch jakaa vaaleuden tasaisesti, joten häivytys etenee vakaasti. [OKLCH selitettynä](https://gradiently.design/fi/guide/oklch-explained) käsittelee muodon.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Muuta sävylukua (264), niin koko liukuväri siirtyy toiseen väriin. Kroma vähenee vaaleassa päässä kuten oikeassa valossa.

1. **Valitse sävy** Valitse yksi väri ja selvitä sen sävykulma. Sininen on noin 260, vihreä noin 145 ja punainen noin 25.
2. **Aseta tummin ja vaalein väripiste** Pidä tumma pää puhdasta mustaa vaaleampana ja vaalea pää puhdasta valkoista tummempana, ellet halua kovaa reunaa. Vaaleus 0,15-0,9 on miellyttävä alue.
3. **Sijoita keskikohta tarkoituksella** Siirrä sitä kohti päätä, jonka haluat hallitsevan. Keskipiste 30 prosentissa tekee kehyksestä enimmäkseen vaalean, 70 prosentissa enimmäkseen tumman. [Liukuvärin väripisteet](https://gradiently.design/fi/guide/gradient-stops) näyttää lisää.
4. **Lisää rakeisuutta** Hento kohinakerros liukuvärin päällä peittää raidoittumista ja tuo materiaalin tuntua.

## Miksi tummat yksiväriset liukuvärit raidoittuvat

Useimmat näytöt näyttävät 256 tasoa kanavaa kohti. Mustasta `#000000` tummanharmaaseen `#282828` kulkevalla liukuvärillä on vain 40 erillistä askelta. Kun se levitetään 1920 pikselin levyiseen pääkuvaan, jokainen askel on 48 pikselin raita, jonka silmä erottaa helposti tummassa. Moniväriset liukuvärit peittävät tämän, koska kanavat muuttuvat eri hetkissä. Yksivärinen liukuväri muuttaa kaikkia kolmea yhdessä, joten raidat osuvat kohdakkain.

### Raidallinen

- Lähes mustasta tummanharmaaseen koko näytöllä
- Voimakas JPEG-pakkaus viennissä
- Täysin puhdas digitaalinen pinta
- Pitkä vähäkontrastinen häivytys vähillä väripisteillä

### Tasainen

- Laajempi vaaleusalue tai lyhyempi matka
- PNG tai korkea laatuasetus
- Kevyt rakeisuuskerros päällä
- Säteittäinen valo, joka muuttuu nopeammin keskuksensa lähellä

[Liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) ja [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) käsittelevät korjauksen tarkemmin ja antavat SVG-kohinakerroksen koodin.

## Missä yksiväriset liukuvärit toimivat

Yhden värin liukuvärit antavat typografian ja valokuvien johtaa. Ne sopivat ylellisten tuotteiden julkaisuihin, arkkitehtistudioille, musiikkijulkaisuihin ja brändeille, joiden identiteetti perustuu yhteen väriin. Aseta sanat saman sävyn vaaleimpaan tai tummimpaan päähän, valkoisiksi tai mustiksi. Työ tuntuu yhdeltä itsevarmalta päätökseltä.

Jos tarvitset korostuksen, ota se sävyn ulkopuolelta ja käytä kerran: yksi oranssi päivämäärä laivastonsinisellä liukuvärillä tai punainen hinta grafiitilla. Liukuväri pysyy yksivärisenä, ja korostus saa kaiken huomion ilman kilpailua.

Neliönmuotoinen albumikansi syvissä mustan ja hiilenharmaan sävyissä ja yksi sana vaalealla tekstillä

Neliönmuotoinen julkaisukansi 1080×1080, lähes kokonaan varjoa ja yhdestä reunasta nousevaa valoa.

Arkkitehtistudion leveä verkkosivun pääkuva tummalla yksivärisellä liukuvärillä

Verkkosivun pääkuva 1920×1080: sama rauhallinen yhden värin lähestymistapa paljon leveämmässä kehyksessä.

Gradientlyn yksivärinen tausta voi myös liikkua. Mark renderöi valonsa reaaliajassa, joten yhden värin liukuväri voi liukua hitaasti sanojen takana. Prolla se viedään saumattomana silmukkana kaikkiin suunnittelemiisi kokoihin.

## FAQ

### Mikä on yksivärinen liukuväri?

Liukuväri, joka yhdistää yhden sävyn omat tummuusasteet tummasta vaaleaan tai kulkee mustasta valkoiseen harmaiden kautta.

### Onko yksivärinen liukuväri sama kuin monokromaattinen värimaailma?

Ei. Monokromaattinen värimaailma on yhden sävyn paletti koko työssä. Yksivärinen liukuväri on yksi saman sävyn jatkuva häivytys.

### Miten teen yhden värin liukuvärin CSS:llä?

Kirjoita väripisteet oklch-muodossa ja muuta vain vaaleutta, esimerkiksi `oklch(0.18 0.08 264)`-arvosta arvoon `oklch(0.86 0.06 264)`. Sävy pysyy samana eikä väri karkaa.

### Miksi mustassa liukuvärissäni on raitoja?

Tummissa sävyissä on vain vähän erillisiä askelia 8-bittisellä näytöllä, joten häivytys näkyy raitoina. Lisää kevyt rakeisuuskerros, laajenna vaaleusaluetta tai vie PNG:nä.

### Mikä on mustavalkoisen liukuvärin koodi?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` on perusversio. Täyteläisemmän ilmeen saat painottamalla väripisteet tummaan päähän ja jättämällä vaalean pään ennen puhdasta valkoista.