Kirkkaat liukuvärit: kylläiset koodit ilman värähtelyä

Kirkkaat liukuvärit ovat voimakkaita ja kylläisiä ilman värähtelyä, kun kaksi sääntöä toteutuu: jokainen väri on lähellä naapuriaan väriympyrässä ja jokainen askel muuttaa vaaleutta selvästi. Jos ensimmäinen sääntö rikkoutuu, keskikohta samentuu. Jos samanvaaleat vastavärit asetetaan vierekkäin, reuna näyttää värähtelevän. Alla olevat kaksitoista koodia noudattavat molempia sääntöjä. Ne ovat voimakkaita julisteen, eivät migreenin tavoin.

Kaksitoista kirkkaan liukuvärin koodia

Miksi osa kirkkaista liukuväreistä värähtelee

Kun kylläinen punainen koskettaa suoraan yhtä kirkasta sinistä, niiden raja näyttää välkkyvän. Värit eivät tunnu päättävän, kumpi on edessä. Suunnittelijat kutsuvat sitä kromaattiseksi värähtelyksi. Se on vahvinta terävissä reunoissa, ohuissa viivoissa ja värillisessä tekstissä. Siksi punainen teksti sinisellä taustalla väsyttää. Värit itsessään toimivat. Ongelma syntyy vastakkaisten ja yhtä vaaleiden sävyjen kosketuksesta.

Ratkaisuja on kaksi. Erota värit tummemmalla tai vaaleammalla välisävyllä kuten oikealla, tai valitse vastavärien sijaan lähivärit. Vastavärit kertoo, milloin vastakkaisuus on vaivan arvoista.

Oman kirkkaan liukuvärin säännöt

Samennus on kirkkaan liukuvärin toinen ongelma. Kun kaksi kylläistä vastaväriä sekoitetaan tavallisessa sRGB:ssä, keskiväri lähestyy harmaata. Sameat liukuvärit käsittelee ilmiötä ja liukuvärin interpolointi sen tekniikkaa. Kylläisyys on liukusäädin, ei kytkin. Kylläisyys suunnittelussa kertoo sen säätämisestä.

Kirkkaat liukuvärit CSS:llä

Nykyselain voi sekoittaa värejä havaintopohjaisessa väriavaruudessa, kun lisäät liukuväriin in oklch. Laajan yhdistelmän keskikohta säilyy yhtä elävänä kuin päät. Anna vanhalle selaimelle ensin heksaversio.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Missä kirkkaat liukuvärit toimivat parhaiten

Kirkas väri ansaitsee huomion. Käytä sitä siellä, missä huomio on koko tehtävä: selattavassa syötteessä, pikkukuvassa kahdenkymmenen muun joukossa tai kadun toisella puolella näkyvässä julisteessa. Pitkään luettavissa dokumenteissa, hallintanäkymissä ja artikkeleissa kylläinen pinta väsyttää jo muutamassa kappaleessa. Rajaa siellä liukuväri otsakkeeseen tai yhteen painikkeeseen ja anna rauhallisen pinnan kantaa loput.

Painossa kannattaa varautua yllätykseen. Kirkkaimmat näytön värit, etenkin sähkönsiniset, kuumat pinkit ja haponvihreät, ovat CMYK-musteiden toistoalueen ulkopuolella. Paperilla ne palaavat selvästi himmeämpinä. RGB vai CMYK selittää miksi. Valitse itse hieman syvemmät versiot ja tilaa vedos ennen painosta.

Sanat kirkkaalla liukuvärillä

Kylläisen taustan kirkkaus vaihtelee päästä toiseen. Tummassa päässä näkyvä tekstiväri voi kadota vaaleassa. Käytä vain valkoista tai lähes mustaa, sijoita otsake syvimpään tai vaaleimpaan kohtaan ja tarkista heikoin kontrasti keskiarvon sijaan. Värikontrasti ja saavutettavuus kertoo tavoitearvot.

Gradientlyn Mark auttaa kirkkaissa väreissä: se tietää sanojen paikan ja syventää tai vaalentaa väriä kirjainten lähellä. Automaattinen muste valitsee rivin vaalean tai tumman tekstin omasta paletistaan. Kylläinen ilme pysyy luettavana kaikissa ko’oissa ilman laatikkoa tai otsakevarjoa. Neonilmeitä käsittelee neonliukuvärit. Asteikon toiseen päähän sopii hillityt liukuvärit.