Näin luot väripaletin nettisivuillesi

Olet aloittamassa yritystäsi ja nyt nettisivuille (sekä brändille) pitäisi valita värit. Nettisivujen värien suunnittelu lähtee usein liikkeelle logosta, mikäli mitään valmiita brändivärejä ei ole. 

Mutta entä jos logokin ollaan toteuttamassa itse, eikä mitään suunnitelmaa väreistä ole? Mistä kannattaisi lähteä liikkeelle ja mitä on hyvä ottaa huomioon sopivaa värimaailmaa suunnitellessa?

Mitä ottaa huomioon nettisivujen väreissä

Hyvä nyrkkisääntö nettisivujen värejä valitessa on, että niitä ei kannata olla liian montaa. Yleensä nettisivuilla on käytössä 3-5 eri väriä. Taustaväri, tekstin väri sekä 1-3 korostusväriä. Korostusvärejä voidaan käyttää painikkeissa, otsikoissa, pienempien osioiden taustaväreinä tai graafisissa yksityiskohdissa.

Jos ideat värimaailmasta ovat vielä hakusessa, voi ensimmäisenä lähteä hakemaan inspiraatiota väripaleteista. Niitä voi hakea esim. Pinterestista “color palette” -haulla. Hyvä työkalu väripaletin suunnitteluun on myös Coolors.co-sivusto. Sivustolla voit luoda väripaletteja itse tai esim. valokuvan pohjalta ja myös selata valmiita väripaletteja.

Eri väreillä luodaan myös mielikuvia yrityksesi brändistä. Googlettamalla esim. värien merkitys, löydät paljon artikkeleita ja kuvia eri väreihin liitetyistä mielikuvista.

Kun ajatus siitä, millaisia värejä haluat sivuillesi, on kirkastunut, on aika lähteä miettimään tarkkoja värisävyjä. Kun puhutaan nettisivuista (ja toki muustakin markkinointimateriaalista), värien kontrastiin kannattaa kiinnittää huomiota. 

Värien kontrasti nettisivuilla

Kontrastilla tarkoitetaan värien kohdalla niiden tummuuseroa toisiinsa nähden. On selkeää, että mustalla ja valkoisella on suuri kontrasti. Musta teksti erottuu selkeästi valkoiselta pohjalta ja valkoinen teksti mustalta pohjalta. Mutta entä kun puhutaankin vaikka punaisesta painikkeesta? Pitäisikö painikkeen teksti olla mustalla vai valkoisella, jotta se erottuu hyvin, jotta se erottuu punaiselta pohjalta? Tai voiko se olla jollain muulla värillä?

Värien kontrasti nettisivuilla on tärkeää, jotta sivusto on mahdollisimman saavutettava eli helppokäyttöinen mahdollisimman monelle ihmisryhmälle. Värien liian pieni kontrasti tekee sivuista hankalat selata värisokeille henkilöille, mutta myös ihmisille, joilla on muuten huono näkö. Kun valitset värejä, voit tarkistaa niiden kontrastin helposti esim. WebAIM:n contrast checker -työkalulla. Syötät työkaluun vain etualalle tulevan värin (foreground) ja taustavärin (background) ja se kertoo, onko kontrasti riittävä leipätekstille, lihavoidulle tekstille / otsikoille sekä graafisille objekteille.

Nettisivuilla on hyvä huomata, että puhtaan valkoisen ja mustan yhdistelmä ei myöskään ole aina paras, koska se on näytöllä melko kova silmille. Usein onkin parempi taittaa mustaa tai valkoista hieman, niin lopputulos on miellyttävämpi.

Miten käytät valitsemiasi värejä nettisivuilla

Kuten aiemmin kerroin, nettisivuilla kannattaa olla käytössä tekstin värin ja taustavärin lisäksi 1-3 korostusväriä. Usein näitä käytetään vähintäänkin painikkeissa ja mahdollisesti otsikoissa. 

Ellei sivuille haeta todella värikylläistä ulkoasua, paras vaihtoehto on yleensä pitää elementtien värit aina samoina. Poikkeuksena tähän on toki se, jos käytät eri taustaväriä tai taustakuvaa joissain sivun osiossa. Tällöin esimerkiksi sama painikkeen väri ei välttämättä toimi kaikilla taustoilla. Mutta tässäkin tapauksessa on hyvä valita käyttöön vain kaksi eri värivaihtoehtoa, toinen vaalealle taustalle ja toinen tummalle taustalle.

Se, että elementeissä toistuvat samat värit, tekee kokonaisuudesta selkeämmän sekä antaa sivustolle yhtenäisen ja viimeistellyn ilmeen.

Käytettäessä WordPress-sivujen mallipohjia, sivupohjan värien muokkaaminen on yksinkertaista. Mallipohja sisältää valmiin väripaletin, jonka värejä muokkaamalla vaihdat sivuston värit suoraan. Voit myös muokata yksittäisten elementtien värejä erikseen.

Haluatko toteuttaa nopeasti ammattimaiset ja kauniit WordPress-sivut? Tutustu valmiisiin mallipohjiini täällä.