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

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

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 käsittelee kokonaisia teemoja, nämä ovat niiden rakennuspalikoita.

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

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.

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. 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. 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. 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. 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 kertoo syntaksin ja lineaarinen CSS-liukuväri perusteet.

: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;
}

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.

Verkossa pieni SVG-kohinatekstuuri liukuvärin päällä matalalla peittävyydellä poistaa näkyvät askeleet ilman huomattavaa rakeisuutta. CSS-kohinatekstuuri 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 tarjoaa kylläiset koodit.