Vinkki: Värit webissä

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!

Color wheel

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/

Color test result

Kari Selovuo

Kari Selovuo

Kari on Corellian saavutettavuus ja web-tekniikoiden asiantuntija. Karin kiinnostuksen ja koulutusten aiheina on mm. Verkon tekniikat (HTML, CSS ja JavaScript), WordPress julkaisujärjestelmä ja sen käyttö, websuunnittelu, käytettävyys ja saavutettavuus verkossa.

Kari on IAAP (International Association of Accessibility Professionals) jäsen ja sertifioitunut saavutettavuusasiantuntija CPWA (CPACC + WAS)

This Post Has One Comment

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *