Miten hyvin osaat määrittää haluamasi värin webbisivulle? Aiemmin värien määrittelyyn CSS arvoissa käytettiin ainoastaan HEX koodattua RGB arvoa; arvoa, jossa punaisen (R), vihreän (G) ja sinisen (B) arvo annettiin välillä 0 – F. Koska RGB värit muodostetaan valolla, on väri sitä tummempi mitä vähemmän valoa ja kirkkaampi mitä enemmän valoa annetaan. Siten #000 tarkoittaa mustaa koska kaikki pikselit ovat pimeinä. Vastaavasti #FFF tuottaa valkoista kun kaikki näytön pikselit hehkuvat ”täysillä”.
Hex muodossa väri voidaan ilmaista joko kolmella tai kuudella arvolla. Siten #F60 on sama kuin #FF6600 mutta jälkimmäisellä kirjoitustavalla voidaan tuottaa useampia sävyjä. Itseasiassa sävyjä saadaan noin 16 miljoonaa. Mutta kuka osaa sanoa minkä värinen on #1AF35A? Ei varmaan kukaan normaali ihminen! (#1AF35A on muuten hyvinkin kirkkaan vihreä.)
Miten sitten tietää ennalta millä arvoilla saa minkäkin värin?
hsl() värit CSS säännöissä
Avuksi tulee hsl() värimääritykset. Kyseisessä värimääritystekniikassa valitaan ensin väri (H, hue), sitten värikylläisyys (S, saturation) ja lopuksi kirkkaus (L, luminosity). Väri valitaan astelukuna 0-360 väriympyrästä. Värikylläisyys ja kirkkaus annetaan prosenttilukuna 0 – 100%. Näiden lisäksi voidaan antaa neljäs arvo – alfakanava eli läpinäkyvyys. Läpinäkyvyys annetaan desimaalilukuna välillä 1 – 0. Arvo 1 on täysin läpinäkymätön ja arvolla 0 väriä ei näy!
hsla() mahdollistaa ihmiselle luonnollisemman tavan hahmottaa värin arvot ja ennakoida tuleva väri jo sääntöä kirjoitettaessa. Ennen kaikkea etu on siinä, että sen avulla on erittäin helppoa luoda samasta väristä eri versioita säilyttäen hue-arvo samana mutta muuttamalla saturaatiota tai luminosity arvoa. Oman väripaletin määrittäminen webiin on erittäin helppoa. Vastaavaa hyödyntää myös esimerkiksi SASS CSS preprosessointi syntaksi, jossa voi valitusta väristä luoda automaattisesti funktioilla tummempia tai vaaleampia versioita.
Adobe Color CC
Adobella on hyödyllinen apuohjelma väripalettien tekemiseen – Adobe Color CC omaa sukua Kuler. CC Colorin avulla voit luoda tarkoitukseesi sopivia väripaletteja ja ottaa ne käyttöön muissa CC ohjelmissa. Mukava lisä on myös mobiilisovellus, jolla voit kännykän kameralla luoda väripaletteja haluamastasi ympäristöstä. Palvelun löydät osoitteesta https://color.adobe.com/create/color-wheel/
Miten hyvin osaat kirjoittaa väriarvot?
Haluamansa värin saa aina aikaiseksi. Ellei sitten kirjoittamalla itse, niin valitsemalla editorin työkalulla. Käypä kuitenkin kokeilemassa hauskaa testiä jossa sinulle annetaan väri ja sinun tehtäväsi on kirjoittaa väriarvo, jolla se on tehty.
”Pelin” löydät osoitteesta http://leaverou.github.io/whathecolor/
