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

[Canonical HTML page](https://gradiently.design/fi/guide/website-color-scheme)

Sivusto tarvitsee vähemmän värejä kuin luulet, ja jokaisella pitää olla tehtävä. Määritä roolit ja tarkista värit toisiaan vasten, niin sivusto pysyy yhtenäisenä kasvaessaan.

## The short version

- Verkkosivun värimaailma toimii parhaiten lyhyenä rooliluettelona: sivun tausta, pinnat, teksti, hillitty teksti, reunus, korostus ja tilavärit.
- Useimmat sivustot tarvitsevat yhden brändin korostusvärin lähinnä painikkeisiin ja linkkeihin. Neutraalit hoitavat loput.
- WCAG edellyttää tavalliselle tekstille vähintään kontrastisuhdetta 4,5:1 ja suurelle tekstille sekä käyttöliittymän osille, kuten syöttökenttien reunuksille, suhdetta 3:1.
- Kun tallennat värit CSS:n mukautettuina ominaisuuksina eli designtokeneina, koko sivuston teema vaihtuu yhtä arvojoukkoa muuttamalla.
- Tumma teema on samojen roolien erillinen arvojoukko, ei vaalean teeman käänteinen versio.

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

| Rooli | Käyttö | Nyrkkisääntö |
| --- | --- | --- |
| Tausta | Sivun tausta | Kevyt sävytys tuntuu puhdasta valkoista tai mustaa pehmeämmältä |
| Pinta | Kortit, paneelit, valikot | Taustaa askeleen vaaleampi vaaleassa teemassa ja vielä vaaleampi tummassa teemassa |
| Teksti | Otsikot ja leipäteksti | Erittäin vahva kontrasti taustaa ja pintoja vasten |
| Hillitty teksti | Kuvatekstit, tunnisteet, metatiedot | Kontrasti taustaa vasten yhä vähintään 4,5:1 |
| Reunus | Jakajat ja syöttökenttien reunat | Koristejakajat voivat olla hentoja, kenttien reunukset tarvitsevat suhteen 3:1 |
| Korostus | Painikkeet, linkit, valitut tilat | Brändivärisi, säästeliäästi käytettynä viestii: toimi tässä |
| Tila | Virheet, varoitukset, onnistumiset | Punainen, meripihka ja vihreä korostusväriin sovitettuina |

Seitsemän roolia kattaa useimmat sivustot. Nimeä värit roolin, älä sävyn mukaan, jotta brändivärin vaihtaminen onnistuu myöhemmin yhdellä muutoksella.

## Näin valitset verkkosivun värit

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](https://gradiently.design/fi/guide/how-to-choose-brand-colors) auttaa.
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. **Valitse vaalea, tumma tai molemmat** Valitse teema, jonka useimmat kävijät näkevät ensin, ja suunnittele se valmiiksi ennen toista.
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. **Sovella suhdetta 60, 30, 10** Noin 60 % taustaa, 30 % pintoja ja tekstiä, 10 % korostusta. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) selittää tasapainon.

## Kolme verkkosivun väripalettia lähtökohdaksi

- Tausta: #f7f9fb
- Pinta: #ffffff
- Teksti: #14202b
- Hillitty teksti: #52606d
- Kentän reunus: #8a96a3
- Sinivihreä korostus: #0f766e

Rauhallinen klinikka, vaalea. Tekstin kontrasti taustaa vasten on noin 15,7:1, hillityn tekstin 6,1:1 ja valkoisen sinivihreällä painikkeella 5,5:1. Kentän reunus saavuttaa juuri suhteen 3:1 valkoisella.

- Kermanvärinen tausta: #fbf6ef
- Kauransävyinen pinta: #efe4d6
- Espressonvärinen teksti: #2a1f17
- Hillitty teksti: #635e68
- Terrakottakorostus: #b4441c

Lämmin kahvila, vaalea. Espresson kontrasti kermaan on noin 15:1 ja valkoisen terrakottaan noin 5,5:1, joten painikkeiden tekstit erottuvat.

- Yönsävyinen tausta: #0f0e17
- Kohotettu pinta: #1a1926
- Teksti: #ecebf3
- Hillitty teksti: #a5a3b8
- Lila korostus: #a78bfa

Yöateljee, tumma. Luonnonvalkoinen teksti vähentää häikäisyä puhtaaseen valkoiseen verrattuna. Lilan korostuksen kontrasti taustaan on noin 7:1, joten käytä liloissa painikkeissa tummaa tekstiä.

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

[WCAG:n kontrastiohjeet](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) 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](https://webaim.org/resources/contrastchecker/) testaa minkä tahansa parin. [Värikontrastioppaamme](https://gradiently.design/fi/guide/color-contrast-accessibility) käsittelee perusteet ja rajatapaukset.

### Tavalliset ongelmat

- Vaaleanharmaa paikkamerkkiteksti kentän ainoana tunnisteena
- Valkoinen teksti vaalealla brändivärillä, kuten keltaisella tai taivaansinisellä
- Linkit, jotka eroavat leipätekstistä vain väriltään
- Vaalea reunus lomakekentän ainoana rajana
- Virheilmoitukset pelkästään punaisella

### Korjaukset

- Oikeat tunnisteet kenttien yläpuolelle, hillitty teksti kontrastilla 4,5:1
- Tumma teksti vaaleille korostuksille tai tummempi korostusväri
- Alleviivaa leipätekstin linkit tai lihavoi ne
- Kenttien reunusten kontrasti taustaan 3:1
- Kuvake tai sanat värin rinnalle

## 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](https://gradiently.design/fi/guide/design-tokens) ydinajatus.

```css
: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); }
```

Rooleja, ei sävyjä. Huomaa, että `--on-accent` vaihtuu valkoisesta lähes mustaksi, koska vaalea lila painike tarvitsee tumman tekstin.

## 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](https://gradiently.design/fi/guide/dark-mode-design) 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.

Fysioterapiaklinikan leveä verkkosivun pääkuva, jossa on lyhyt otsikko täyteläisen liukuvärin päällä

Yksi ilmeikäs 1920×1080-alue kantaa brändiä. Muu sivusto käyttää yllä kuvattuja rauhallisia värien rooleja.

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](https://gradiently.design/fi/guide/color-harmony) ja [verkkosivun aloitusosion suunnittelu](https://gradiently.design/fi/guide/hero-section-design).

## FAQ

### Kuinka monta väriä verkkosivustolla pitäisi olla?

Yleensä yksi brändin korostusväri, kolmesta viiteen neutraalia taustaan, pintoihin, tekstiin ja reunuksiin sekä kolme tilaväriä. Useampi korostusväri vaikeuttaa napsautettavien kohteiden tunnistamista.

### Miten valitsen verkkosivustolleni värimaailman?

Aloita brändin korostusväristä, sävytä neutraalit harmaat sen suuntaan, valitse vaalea tai tumma teema ja tarkista jokaisen tekstin ja taustan parin kontrastiksi vähintään 4,5:1.

### Millaisen kontrastisuhteen verkkosivun teksti tarvitsee?

WCAG edellyttää tavalliselle tekstille vähintään suhdetta 4,5:1 ja suurelle tekstille sekä käyttöliittymän osille, kuten syöttökenttien reunuksille, suhdetta 3:1.

### Pitäisikö verkkosivun taustan olla puhdas valkoinen?

Ei välttämättä. Hyvin kevyesti sävytetty luonnonvalkoinen tuntuu usein rauhallisemmalta ja erottaa valkoiset kortit taustasta.

### Miten lisään värimaailmaan tumman tilan?

Määritä jokainen värin rooli CSS:n mukautettuna ominaisuutena ja anna sille toinen arvojoukko `prefers-color-scheme: dark` -mediakyselyssä.