Värikylläisyys suunnittelussa: lisää tai vähennä voimaa

Värikylläisyys suunnittelussa tarkoittaa värin voimakkuutta: täysin kylläinen on kirkas ja puhdas, kokonaan kylläisyytensä menettänyt harmaa. Lisää sitä huomioon ja energiaan painikkeessa, tarjoushinnassa tai yhdessä korostuksessa. Vähennä sitä suurilla alueilla, pitkässä lukemisessa, laadukkaissa brändeissä ja tummissa käyttöliittymissä, joissa kirkkaus väsyttää nopeasti. Useimmat hyvät paletit yhdistävät tarkoituksella rauhallisen pohjan yhteen tai kahteen kylläiseen sävyyn.

Mitä kylläisyys on

Jokaisella värillä on kolme ominaisuutta: sävy eli mikä väri, vaaleus eli etäisyys valkoiseen tai mustaan ja kylläisyys eli puhtaus tai harmaus. Pelkän kylläisyyden muutos siirtää kirsikanpunaisen pölyiseksi roosaksi ja sitten harmaaksi ilman vaalenemista tai tummenemista. Sävy, kylläisyys ja kirkkaus selittää suhteet.

HSL:ssä kylläisyys on toinen luku. Uudemmassa oklch-väriavaruudessa vastaava on chroma, joka käyttäytyy tasaisemmin eri sävyissä. Sama chroma saa keltaisen ja sinisen näyttämään yhtä voimakkailta. HSL-värit käsittelee vanhemman mallin ja lukujen lukemisen.

Milloin kylläisyyttä kannattaa lisätä

• Yksi painettava asia. Kylläinen painike rauhallisella sivulla ei tarvitse osoittavaa nuolta. Tämä on korostusvärin tehtävä.
• Lyhyet, äänekkäät hetket. Tarjousilmoitukset, lanseerausjulkaisut ja tapahtumien lähtölaskennat keskeyttävät selauksen.
• Nuoret, leikkisät tai urheilulliset brändit. Lastentuotteet, energiajuomat ja festivaalit käyttävät suurta kylläisyyttä persoonassaan.
• Erottuva data. Kyllästä kaavion tärkeä sarja ja harmaanna muut.
• Pienet alueet tummalla. Kirkas väri pienellä alueella lähes mustalla näyttää valolta. Siksi neon toimii yöllä.

Milloin kylläisyyttä kannattaa vähentää

• Suuret alueet. Täysin kylläinen koko näyttö väsyttää. Taustat toimivat yleensä hieman harmaannettuina.
• Laadukas asemointi. Hillityt, monisyiset oliivin, häränveren ja liuskeen sävyt tuntuvat usein harkitummilta ja kalliimmilta kuin päävärit.
• Pitkä lukeminen. Artikkelit, asiakirjat ja koontinäytöt tarvitsevat pinnan, jota voi katsoa tunnin.
• Tumma tila. Kylläiset värit hohtavat ja leviävät tummalla. Vähennä kylläisyyttä ja lisää hieman vaaleutta; tumman tilan suunnittelu selittää tarkemmin.
• Kuvien ja tekstin takana. Rauhallisempi tausta antaa kuvan ja sanojen johtaa.

Värinän ongelma

Aseta kaksi hyvin kylläistä vastaväriä vierekkäin, kuten punainen vihreälle tai sininen oranssille, ja raja näyttää väreilevän. Optinen vaikutus tekee lukemisesta epämukavaa, vaikka kontrastisuhde vaikuttaisi riittävältä. Vähennä toisen kylläisyyttä tai erota värit neutraalilla.

Kylläisyyden säätö CSS:llä

Hex-koodit piilottavat kylläisyyden, joten sen silmämääräinen säätö hexinä on hidasta. Käytä HSL:ää tai oklch:ta tai sekoita väriä harmaaseen color-mix()-funktiolla.

:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}

Määritä jokainen brändiväri alusta asti kahdessa kylläisyydessä: täysi korostuksiin ja hillitty suurille täytöille. Näin pehmeämpää sävyä ei tarvitse keksiä myöhemmin.

Valokuvat seuraavat samaa logiikkaa. Levoton, kylläinen kuva otsikon takana kilpailee sen kanssa. Vähennä kuvan kylläisyyttä noin kolmanneksen verran, niin sanat johtavat ilman laatikkoa tai varjoa. Toiseen suuntaan yksittäinen kylläinen kohde hillityssä kuvassa, kuten punainen takki harmaalla kadulla, on vanha katseenohjauskeino.

Kylläisyys painossa

Näytöt toistavat kylläisempiä värejä kuin CMYK-muste, etenkin kirkkaat siniset, vihreät, oranssit ja purppurat. Kirkas näyttöväri painuu usein selvästi himmeämpänä. Jos kylläisyys on brändillesi keskeistä, harkitse Pantone-spottimustetta ja tarkista vedos ennen suurta painosta. RGB ja CMYK selittää eron.

Kylläisyys toimii myös värilämpötilan kanssa: lämmin hillitty paletti tuntuu vintagelta, viileä hillitty skandinaaviselta. Valmiit ääripäät löydät hillityistä väripaleteista ja kirkkaista väripaleteista.

Gradientlyn Markit soveltavat samaa elävään taustaan: rauhallisin, parhaan kontrastin alue siirtyy tekstin taakse ja levottomat yksityiskohdat rauhoittuvat siinä. Sanat ovat hiljaisemmalla alueella muun Markin säilyttäessä värinsä.