varit-blogipostaus

Värien valitseminen nettisivuille

Web design ja värit

 

Värien koodit

Web designissa ja ohjelmoinnissa väreistä puhutaan koodeilla, jotka ovat lukuja. Jokaisella värillä ja sävyllä on yksilöllinen koodi, jolla sen löytää aina uudelleen. Koodit ovat nimeltään HEX- ja RGB. Alla nähtävässä kuvassa on punaisen värin koodit. Sivusto on: https://htmlcolorcodes.com/

 

varikoodit

Värin valittuasi voit lisätä juuri sen saman värin verkkosivuillesi HEX-koodilla.

 

wb-varikoodi

Oletetaan, että haluat verkkosivujesi pääväriksi logosi värin, mutta et tiedä sen värikoodia. Pitääkö tyytyä melkein samaan väriin? Ei tarvitse! On olemassa apuvälineitä, joilla voi selvittää jonkun tietyn värin koodin. Itse käytän Colorzillaa, joka on Chromen maksuton lisäosa. Ladattuasi lisäosan se ilmestyy selaimeesi osoiterivin perään.

ColorZillan voit ladata tästä: https://www.colorzilla.com/chrome/

colorzilla

Klikkaamalla Colorzillaa avautuu valikko. Valitse: Pick color from page. Sen jälkeen mene hiirellä jonkun värin päälle, ja Colorzillan paneelissa näkyy sinulle väri ja sen koodit. Haetut värit ja koodit tallentuvat Colorzillaan. Saat ne näkyviin klikkaammalla jälleen Colorzillaa ja valitsemalla: colorpicker.

colorzilla-valinta

 

 

colorpicker

 

colorpicker-tulos

Värien valitseminen

Värejä valitaan yleensä 1 pääväri, 1-2 tehosteväriä ja taustaväri. Pääväriä käytetään navigointiin, painikkeisiin ja logoon. Tehosteväreillä korostetaan toissijaista tietoa. Taustavärin kanssa kannattaa olla tarkkana. Paras kontrasti tulee vaaleasta taustaväristä ja tummasta tekstistä.

Erilaisia tapoja valita värejä ja hieman tietoa niistä:

colorwheel-valinta

Komplementtivärit (complementary)

Komplementtiväreillä on suurin kontrasti ja ne ovat tasan vastakkaiset värit väriympyrässä. Komplementtivärit vaikuttavat toistensa voimakkuuteen ja niissä on visuaalista sävykkyyttä. Värit toimivat myös hyvin valkoisen kanssa.

 

Analogiset värit (analogous)

Analogiset värit sijaitsevat vierekkäin väriympyrässä. Ne näyttävät samalta ja luovat eläväisen sekä houkuttelevan kokonaisuuden. Värit ovat miellyttävät silmälle.

 

Monokromaattiset värit

Valitaan yksi väri, josta käytetään eri kylläisyyttä tai arvoa. Eli samaa väriä eri ”voimakkuudella”. Monokromaattinen väri voi olla hyvinkin näyttävä yhdistettynä esimerkiksi mustaan ja harmaaseen.

 

Triadic

Yleisin ja turvallisin valinta. Valitaan kolme väriä tasaisin välein väriympyrästä. Yksi väri hallitsevaksi ja 2 tehosteeksi.

 

Tuplakomplementtiväri (rectangle, tetradic)

Väriympyrästä valitaan 2 väriä ja toiset kaksi vastakkaiselta puolelta. Komplementti värit voimistavat toisiaan, joten näiden 4 värin kanssa kannattaa olla tarkkana ja varovainen, ettei kokonaisuudesta ei tule epäsointuinen.

 

Jaetut komplementtivärit (split complementary)

Komplementtivärissä valittiin vastavärit toisilleen. Tässä valitaan ensin yksi väri ja sen jälkeen väriympyrän vastapuolelta 2 sävyä vastavärin vierestä, jotka sijaitsevat saman etäisyyden päässä ensiksi valitusta. Nämä kaksi vastaväriä, yhden sijaan, hieman pienentävät kontrastia ja luovat hillitymmän tunnelman.
Omille verkkosivuilleni valitsin jaetut komplementtivärit: punainen, oranssi ja sininen

oma-colorwheelKontrasti

Käytettävyyden ja saavutettavuuden kannalta kontrasti on tärkeä asia. Kontrastin avulla oleellinen ja tärkeä erottuu sivustolta, myös erityisryhmille.  Kontrastia voi testata. Itse käytän testaamiseen tämmöistä
sivustoa: https://color.a11y.com

Sivuston käyttö on hyvin helppoa. Etusivulle annat vain verkkosivujen osoitteen, jota haluat testata, ja painat Check contrast.

kontrastitesti

 

Tulos tulee suhdelukuna. Ensi näytetään ne kohdat, joissa suhdeluku ei ole riittävä. Omilla sivuillani on yksi ongelma. Etusivun ”lähetä”-painikkeessa ei ihan riitä oranssin ja valkoisen kontrastisuhde. Musta fontti olisi parempi.

 

kontrastisuhdeluku

Blur-testi

Kontrastia ja ensisijaisten asioiden näkyvyyttä sivustolla voi testata myös blur-testillä. Ota kuvakaappaus sivustosta, vie se kuvankäsittelyohjelmaan ja laita siihen bluria (sumennusta). Katso mitä blurin läpi erottuu. Omalla etusivullani olen pitänyt tärkeänä painikkeita. Niistä pääsee tuotteisiin, hintoihin, palveluihin ja blogiin. Nämä painikkeet erottuvat blurin läpi, niinkuin pitääkin. Jos joku tärkeä asia ei erotu riittävästi blurin läpi, korjaa sen väriä ja kontrastia.

Tämän kohdan verkkosivuistani testasin

blurtesti-alku

 

Tässä blur-testi

 

blurtesti

 

Kiva kun kävit lukemassa 🙂

Lue tästä lisää ohjeita verkkosivujen tekemiseen
Tästä pääset lukemaan kuinka saat lisättyä näkyvyyttä blogiisi tai verkkosivustoosi hakukoneoptimoinnilla

Ystävällisin terveisin Miia

Share on facebook
Share on twitter
Share on linkedin