Jos muistat tammikuun, yksi tavoitteistani vuodelle 2013 oli oppia lisää väreistä ja jakaa oppimaani teidän kanssanne. Olen puhunut ennenkin siitä, miten koen, että taitoni työskennellä värien kanssa ovat puutteelliset, ja sanoin, että jossain vaiheessa tänä vuonna tarttuisin muutamaan värejä käsittelevään kirjaan siinä toivossa, että tämä muuttuisi.
Yhtä syntymäpäivää, jokseenkin anteliasta veljeä ja Amazonin laadukasta palvelua myöhemmin, ja valikoima kirjoja (mukaan lukien muutama nimenomaan värejä käsittelevä) on täällä odottamassa lukemista. Kiitos David.
Olen lukenut loppuun yhden värikirjoista, Design Elements: Color Fundamentals, ja ajattelin aloittaa jakamisen. Haluan aloittaa siitä, miten kuvaamme värejä osittain siksi, että se on alku ja osittain siksi, että se johti jonkinlaiseen selkeyteen siinä, miten ymmärrän värin.
Miten kuvaamme värejä
Väriä voi kuvata kolmella pääasiallisella tavalla ja koska kirja lisäsi siihen myös neljännen tavan kuvata väriä.
- Sävy (Hue) – toinen sana värille
- Värikylläisyys (chroma) – värisävyn voimakkuus tai puhtaus
- Vaaleus (value) – tiettyyn värisävyyn sekoittuneen mustan tai valkoisen suhteellinen aste
- Lämpötila (Temperature) – värin koettu lämpö tai kylmyys
Kaivetaanpa kuhunkin niistä hiukan syvällisemmin.
Värisävyt ovat värejä, ja se, minkä värisävyn näemme, riippuu heijastuvan tai tuotetun valon aallonpituudesta. Minun tuskin tarvitsee kertoa, mikä väri on, ja koska väri ja värisävy ovat synonyymejä, sinun pitäisi myös tietää, mikä värisävy on. Yksi asia, josta muistutan teitä, on se, että me kaikki havaitsemme värit eri tavoin. Sävy, jonka sinä näet, ei välttämättä ole sama sävy, jonka minä näen.
Kylläisyys viittaa siihen, kuinka puhdas tai voimakas tietty sävy on. Sataprosenttinen kylläisyys tarkoittaa, että sävyyn ei ole lisätty harmaata. Väri on täysin puhdas. Toisessa ääripäässä värisävy, jonka kylläisyys on 0 %, näkyy keskiharmaana. Mitä kylläisempi (lähempänä 100 %) väri on, sitä elävämpi tai kirkkaampi se on. Tyydyttymättömät värit sen sijaan näyttävät tylsemmiltä.
Miten tyydyttyneeltä värisävy näyttää, riippuu jossain määrin myös siitä, minkä värien vieressä se on. 50-prosenttisesti kyllästetty värisävy, joka on sijoitettu 25-prosenttisesti kyllästetyn värisävyn viereen, vaikuttaa eloisammalta kuin jos sama värisävy olisi sijoitettu 75-prosenttisesti kyllästetyn värisävyn viereen.
Valovoima mittaa mustan tai valkoisen suhteellista määrää, joka on sekoitettu tiettyyn värisävyyn. Valkoisen lisääminen tekee väristä vaaleamman (luo sävyjä) ja mustan lisääminen tekee siitä tummemman (luo sävyjä). Vaaleuden tai arvon vaikutus on suhteellinen muihin sävellyksen arvoihin nähden. Voit saada värin näyttämään vaaleammalta sijoittamalla sen tummemman värin viereen.
Mitä suurempi on elementtien välinen arvoero, sitä suurempi on niiden välinen kontrasti. Tämän vuoksi vaaleus on hyvä tapa osoittaa kontrastia ja elementtien välistä hierarkiaa. Noin 7 vaaleusastetta on suurin vaihtelu, jonka ihmissilmä pystyy havaitsemaan. Sen jälkeen eroja on vaikea erottaa.
Lämpötila on värin havaittu lämpimyys tai viileys. Lämpimiä värejä ovat punainen, oranssi ja keltainen, kun taas viileitä värejä ovat vihreä, sininen ja violetti. Jossain vihreän ja violetin spektrin alueella lämpötila vaihtuu lämpimän ja viileän välillä.
Miten silmä tunnistaa värilämpötilan, voi muuttua valonlähteen perusteella. Esimerkiksi tietokonemonitorin todellinen lämpötila voi vaikuttaa havaittuun värilämpötilaan.
Lämpimät värit pyrkivät etenemään sommittelun etualalle, kun taas viileämmät värit vetäytyvät taustalle. Kuten kylläisyys ja vaaleus, myös lämpötila voi olla suhteellinen. Aseta lämmin väri lämpimämpää väriä vasten, ja alkuperäinen väri vaikuttaa viileämmältä kuin jos se asetettaisiin viileää väriä vasten.
Väriharmonia
Värien kanssa työskennellessämme tavoitteemme on valita paletti miellyttävistä väriyhdistelmistä (paitsi silloin, kun epämiellyttävä yhdistelmä täydentää viestiä paremmin). Pyrimme saavuttamaan jonkinlaisen väriharmonian.
Väriharmonia voi olla subjektiivista. Se, mikä toimii sinun silmääsi, ei välttämättä toimi minun silmääni. Väriteorian periaatteet pyrkivät vähentämään subjektiivisuutta tarjoamalla ohjeita, jotka auttavat meitä löytämään todennäköisemmin hyvin toimivia väripareja ja -ryhmittymiä.
Yksi tärkeimmistä periaatteista on esimerkiksi se, että silmä etsii aina tasapainoa ja tasapainoa väreissä, jotka johtavat sen neutraaleihin yhdistelmiin, kuten silloin, kun värisävy yhdistetään sen vastakohtaan tai komplementtiin. Se on yksi syy siihen, että näemme usein eri värin jälkikuvia (mutta samalla kylläisyydellä ja vaaleudella), kun tuijotamme mitä tahansa väriä liian kauan.
Väriteoria ei aina johda ennustettaviin tuloksiin. Joskus teoria ja käytäntö eivät oikein sovi yhteen, mikä tarkoittaa, että meidän on kehitettävä värisilmäämme ja kokeiltava erilaisia värisävyn, värikylläisyyden ja vaaleuden yhdistelmiä.
Väriteorian ja värikäytännön epäsuhta
Kuten edellä sanoin, jokin napsahti kohdalleni lukiessani Värien perusteet. Kuvaamme värejä värisävyn, kylläisyyden ja vaaleuden (HSL) avulla, mutta silti asetamme väriarvot webissä tyypillisesti heksa-arvojen ja vähemmässä määrin RGB-arvojen avulla. Eikö olisi järkevämpää työskennellä järjestelmällä, joka kuvaa väriä paremmin?
Huomautus: HSL ei ole sama kuin HSB (hue, saturation, brightness) tai HSV (hue, saturation, value), jotka löytyvät useimmista värityökaluista.
Hex- ja RGB-arvot ovat oikeastaan kaksi versiota samasta asiasta. Kumpikin tarjoaa 256 mahdollista arvoa sille, kuinka paljon punaista, vihreää tai sinistä on tietyssä värissä. HSL toimii eri tavalla. Ei ole helppoa tapaa vilkaista jotain kuten rgb(63, 69, 146) tai sen heksakielistä vastinetta #3f4592 ja helposti tietää, että se on 40 % kylläinen tai hsl(236, 40, 41).
Jos haluat nähdä muunnoksen tekemiseen liittyvän matematiikan, vilkaise jotakin tai kaikkia alla olevista linkeistä
- Värialgoritmit
- RGB:n ja HSL:n välinen värimuunnos
- HSL:n ja RGB:n välinen värimuunnos
Miksi? Miksi on olemassa ero siinä, miten yritämme ymmärtää väriä ja miten yritämme käyttää sitä? Jos jotakin, HSL on intuitiivisempi järjestelmä, koska se todella kuvaa näkemämme värit ja sopii yhteen väriteorian kanssa.
Ymmärrän, että väritaidot tulevat siitä, että kehitetään kriittistä silmää värejä kohtaan ja kysytään kysymyksiä siitä, miksi jokin toimii tai ei toimi. Ja kyse on noihin kysymyksiin vastaamisesta, kun tarkkailee värejä ympärillään.
Tuntuu vain siltä, että olisi helpompaa, jos sekä teoria että käytäntö puhuisivat samaa kieltä. Nyt kun olen tullut tähän oivallukseen, olen päättänyt sitoutua käyttämään HSL-arvoja mahdollisimman paljon koodissani. Kompastuskivenä on IE8 ja sitä nuoremmat versiot, jotka eivät hyväksy hsl()- tai rgb()-asetusta. Ne tarvitsevat heksadesimaaliarvoja. Se ei kuitenkaan haittaa, koska SASS voi tehdä muunnoksen. Voit käyttää hsl()-toimintoa SASS:ssä ja saada html-tulosteeksi heksadesimaaliarvon.
Sitoutuakseni olen alkanut rakentaa yksinkertaista värityökalua, joka auttaa minua oppimaan ja opiskelemaan. Sitä ei kannata käyttää nykyisessä muodossaan väripaletin valintaan, mutta sen avulla voi leikkiä värisävy-, kylläisyys- ja vaaleusarvoilla nähdäkseen, miten kukin vaikuttaa yhteen tiettyyn väriin ja sitä ympäröiviin väreihin. Jaan työkalun myöhemmin tällä viikolla.
Olen jo jonkin aikaa epäillyt, että värien väliset matemaattiset suhteet voisivat tarjota oppaan niiden kanssa työskentelyyn, ja olen usein etsinyt näitä suhteita värien heksan arvoista. Toiveeni siitä, että käytän hsl()-toimintoa enemmän ja leikittelen yksinkertaisella värityökalullani, on, että ne auttavat minua yhdistämään teorian ja suunnittelussa käyttämäni värit hieman paremmin toisiinsa kuin ne yhdistyvät minulle nyt.
Pitäkää mielessä tämä epäsuhta siinä, miten opimme ja kuvaamme värejä, ja siinä, miten käytämme niitä. Tämä oivallus on antanut minulle paremman ymmärryksen siitä, miten tutkia värejä paremmin, ja siksi halusin aloittaa tämän keskustelun siitä, miten kuvaamme värejä perusasioissa. Pian on tulossa lisää postauksia väreistä, alkaen myöhemmin tällä viikolla, kun puhun yksinkertaisesta työkalusta, jonka loin avukseni.
Lataa ilmainen näyte kirjastani Design Fundamentals.