Verkkosivun värimaailma: näin valitset sivuston värit

Hyvä verkkosivun värimaailma ei ole viiden lempivärin tunnelmakollaasi. Se on lyhyt rooliluettelo, jossa jokaista tehtävää hoitaa yksi väri: sivun tausta, kohotetut pinnat, leipäteksti, hillitympi teksti, reunukset, yksi toimintojen korostus sekä punainen, meripihka ja vihreä tilojen ilmaisuun. Valitse ensin brändin korostusväri ja rakenna sen ympärille rauhalliset neutraalit. Tarkista kaikkien tekstien ja taustojen kontrasti ja tallenna lopputulos CSS-muuttujiin, jotta koko sivusto käyttää samoja arvoja.

Jokaisen sivuston tarvitsemat värien roolit

Näin valitset verkkosivun värit

1. 1

   Aloita yhdestä korostusväristä

   Brändivärisi tai väri, jonka haluat ihmisten yhdistävän sinuun. Jos väriä ei vielä ole, brändivärien valinta auttaa.

2. 2

   Sävytä neutraalit sen suuntaan

   Harmaat, joissa on aavistus korostusvärin sävyä, tuntuvat sukulaisilta. Sinivihreä brändi saa viileät, hieman sinertävät harmaat, terrakottabrändi lämpimät ja kermaiset.

3. 3

   Valitse vaalea, tumma tai molemmat

   Valitse teema, jonka useimmat kävijät näkevät ensin, ja suunnittele se valmiiksi ennen toista.

4. 4

   Tarkista jokainen tekstin ja taustan pari

   Teksti sivun taustalla ja pinnoilla, hillitty teksti molemmilla sekä valkoinen korostusvärisellä painikkeella. Korjaa kaikki alle 4,5:1 jäävät kontrastit.

5. 5

   Sovella suhdetta 60, 30, 10

   Noin 60 % taustaa, 30 % pintoja ja tekstiä, 10 % korostusta. 60 30 10 -sääntö selittää tasapainon.

Kolme verkkosivun väripalettia lähtökohdaksi

Kontrastisäännöt pitävät sivuston luettavana

WCAG:n kontrastiohjeet asettavat vähimmäistason: 4,5:1 tavalliselle tekstille, 3:1 suurelle tekstille (noin 24 px tai 19 px lihavoituna) ja 3:1 käyttöliittymän osille, kuten syöttökenttien reunuksille ja merkitystä välittäville kuvakkeille. WebAIMin kontrastityökalu testaa minkä tahansa parin. Värikontrastioppaamme käsittelee perusteet ja rajatapaukset.

Värimaailman toteuttaminen tokeneina

Tallenna jokainen rooli kerran CSS:n mukautettuna ominaisuutena ja käytä tyyleissä vain näitä muuttujia. Silloin tumma teema, kausikampanja tai brändiuudistus vaatii yhden arvolohkon muutoksen eikä kaikkien tiedostojen läpikäyntiä. Tämä on designtokenien ydinajatus.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

Tumma tila on oma värimaailmansa

Vaalean paletin kääntäminen toimii harvoin. Kylläiset korostukset hohtavat mustalla liian voimakkaasti, varjot katoavat ja puhdas valkoinen teksti häikäisee. Rakenna tumma tila toisena arvojoukkona: lähes musta, aavistuksen sävytetty tausta, ylöspäin vaalenevat pinnat, pehmeämpi teksti ja kontrastivaatimuksen täyttävä vaalennettu korostus. Tumman tilan suunnittelu kertoo lisää.

Brändiväri muuallakin kuin painikkeissa

Jos korostusväri näkyy vain painikkeissa, sivusto voi tuntua yleisluontoiselta. Ratkaisu ei ole lisätä sitä kaikkialle, vaan antaa brändille yksi ilmeikäs paikka: pääkuva, ominaisuuksia esittelevä alue tai alatunniste. Brändin väreihin kuuluva täyteläinen liukuväri toimii siinä hyvin, kun muu sivu pysyy rauhallisena ja luettavana.

Gradientlyn Mark voi olla tämä ilmeikäs kerros: tausta, jota kenelläkään muulla ei ole ja joka valitsee jokaiselle riville tekstivärin omasta paletistaan pitäen otsikot luettavina. Lisää yhdistelmistä kertovat väriharmonia ja verkkosivun aloitusosion suunnittelu.