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

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.

Yksivärinen liukuväri ja monokromaattinen värimaailma

Termit liittyvät toisiinsa ja sekoittuvat usein. Monokromaattinen värimaailma 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.

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.

Tämän perheen tummaa päätä käsittelevät mustat liukuvärit ja harmaat liukuvärit. Askeliin perehdyttää vaalennukset, harmaannukset ja tummennukset.

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ä käsittelee muodon.

.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%
  );
}

1. 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. 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. 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 näyttää lisää.

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

Liukuvärin raidoittuminen ja rakeiset liukuvärit 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.

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.