# Värin vaalentaminen ja tummentaminen: rakenna väriasteikko

[Canonical HTML page](https://gradiently.design/fi/guide/tints-tones-shades)

Yksi brändiväri ei koskaan riitä suunnitteluun. Vaalennukset, harmaasekoitukset ja tummennukset tekevät siitä väriperheen, jonka asteikko palvelee tekstejä, painikkeita, taustoja ja kaavioita.

## The short version

- Väriä voi muunnella kolmella tavalla: vaalennukseen lisätään valkoista, harmaasekoitukseen harmaata ja tummennukseen mustaa.
- Vaalennukset tuntuvat kevyemmiltä ja pehmeämmiltä, harmaasekoitukset rauhallisemmilta ja hillitymmiltä sekä tummennukset syvemmiltä ja vakavammilta.
- Väriasteikko on saman värisävyn vaalennusten ja tummennusten sarja. Se numeroidaan yleensä vaaleimman 50:stä tai 100:sta tummimman 900:aan.
- Havaintoon perustuvassa väriavaruudessa, kuten OKLCH:ssa, sekoittaminen pitää asteikon askelten erot silmälle tasaisina.
- Hyvä asteikko antaa jokaiselle askeleelle tehtävän, kuten taustan, reunuksen, tekstin tai osoitintilan, ja tarkistaa toisiaan kohtaavien askelten kontrastin.

**Värin vaalentaminen ja tummentaminen** sekä harmaalla sekoittaminen ovat kolme tapaa muuttaa väriä vaihtamatta sen varsinaista värisävyä. **Vaalennus**, englanniksi tint, syntyy valkoisesta ja tekee väristä vaaleamman ja pehmeämmän. **Tummennus**, shade, syntyy mustasta ja syventää väriä. **Harmaasekoitus**, tone, syntyy harmaasta ja tekee väristä rauhallisemman ja hillitymmän. Ajattele siis valkoisen, harmaan ja mustan lisäämistä yhteen värisävyyn. Kun asetat vaalennukset ja tummennukset järjestykseen, saat väriasteikon: työkalun, joka tekee yhdestä brändiväristä käyttökelpoisen suunnitteluun.

## Vaalennus, harmaasekoitus ja tummennus rinnakkain

Eron näkee helpoimmin aloittamalla yhdestä väristä ja muuttamalla sitä kolmeen suuntaan. Tässä pohjana on violetti `#7c3aed`, jota sekoitetaan 20 prosentin askelin.

| Tyyppi | Sekoitettava väri | Vaikutus | Esimerkki väristä #7c3aed |
| --- | --- | --- | --- |
| Vaalennus | Valkoinen | Vaaleampi, pehmeämpi ja ilmavampi | `#b089f4`, kun valkoista on 40 prosenttia |
| Harmaasekoitus | Harmaa | Hillitty, rauhallisempi ja luonnollisempi | `#7e64ac`, kun harmaata on 60 prosenttia |
| Tummennus | Musta | Syvempi, painavampi ja vakavampi | `#4a238e`, kun mustaa on 40 prosenttia |

Värisävy pysyy kaikissa violettina. Vain vaaleus ja kylläisyys muuttuvat.

- Vaalennus 90 %: #f2ebfd
- Vaalennus 60 %: #cbb0f8
- Vaalennus 20 %: #9661f1
- Perusvioletti: #7c3aed
- Tummennus 20 %: #632ebe
- Tummennus 60 %: #32175f
- Tummennus 80 %: #190c2f

Vaalennukset vasemmalla, tummennukset oikealla. Tämä rivi muodostaa jo suurimman osan käyttökelpoisesta asteikosta.

- Perusvioletti: #7c3aed
- Harmaasekoitus 20 %: #7d48d7
- Harmaasekoitus 40 %: #7e56c1
- Harmaasekoitus 60 %: #7e64ac
- Harmaasekoitus 80 %: #7f7296

Harmaasekoitukset säilyttävät vaaleuden suunnilleen samana mutta vähentävät värikylläisyyttä. Siksi niihin perustuvat paletit tuntuvat rauhallisilta ja kypsiltä.

## Miten värimuunnokset vaikuttavat suunnitelmaan

Jokainen suunta muuttaa tunnelmaa yhtä paljon kuin väriä. Vaalennukset tuntuvat lempeiltä, nuorekkailta ja avoimilta, minkä vuoksi [pastelliväripaletit](https://gradiently.design/fi/guide/pastel-color-palettes) ovat enimmäkseen vaalennuksia. Tummennukset tuntuvat täyteläisiltä, vakavilta ja arvokkailta: ne ovat [tummien väripalettien](https://gradiently.design/fi/guide/dark-color-palettes) aluetta. Harmaasekoitukset tuntuvat kypsiltä ja luonnollisilta ja ovat lähes jokaisen [hillityn väripaletin](https://gradiently.design/fi/guide/muted-color-palettes) perusta.

- Vaalennukset: pehmeät ja avoimet: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Harmaasekoitukset: rauhalliset ja kypsät: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Tummennukset: syvät ja vakavat: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Sama violetti kolmeen suuntaan. Vaalennukset keventävät tunnelmaa, harmaasekoitukset rauhoittavat ja tummennukset tuovat painoa.

## Väriasteikon rakentaminen yhdestä hex-arvosta

Useimmat designjärjestelmät numeroivat asteikon 50:stä tai 100:sta eli vaaleimmasta 900:aan eli tummimpaan. Brändiväri on yleensä lähellä 500:aa. Johdonmukaisuus on numeroita tärkeämpää: järjestelmän kaikilla väreillä pitäisi olla samat askeleet, jotta `200` tarkoittaa aina vaaleaa taustaa ja `700` tekstiä. Viisi hyvin valittua askelta on parempi kuin yksitoista, joita kukaan ei erota toisistaan. Lisää väliaskeleita, kun oikeat suunnitelmat näyttävät niiden tarpeen.

1. **Sijoita brändivärisi** Päätä, mille askeleelle se kuuluu. Keskisävy, kuten `#7c3aed`, asettuu 500:aan; hyvin tumma brändin laivastonsininen voi olla 800:ssa.
2. **Tee vaalea pää** Sekoita valkoiseen askeleesta 400 alaspäin 50:een. Vaaleimmassa askeleessa pitäisi olla tuskin väriä, jotta se sopii sivun taustaksi.
3. **Tee tumma pää** Sekoita mustaan askeleesta 600 ylöspäin 900:aan. Tummimman askeleen pitää olla riittävän tumma leipätekstiksi vaaleimman päällä.
4. **Tasaa askelten erot** Katso riviä kauempaa. Jos kaksi vierekkäistä väriä ovat lähes samoja ja toinen väli näyttää hypyltä, säädä niitä silmämääräisesti.
5. **Siirrä värisävyä hieman päissä** Puhdas musta voi tehdä tummennuksista likaisia. Monet suunnittelijat siirtävät tummia askelia muutaman asteen siniseen tai violettiin ja vaaleita lämpimään suuntaan.
6. **Tarkista kohtaavat parit** Testaa tekstiaskeleiden kontrasti tausta-askeleilla [värikontrastin ja saavutettavuuden](https://gradiently.design/fi/guide/color-contrast-accessibility) ohjeen avulla.

| Askel | Hex | Tyypillinen tehtävä |
| --- | --- | --- |
| 50 | `#f2ebfd` | Sivun tai kortin tausta |
| 100 | `#e5d8fb` | Hienovaraiset täytöt ja valitut rivit |
| 200 | `#cbb0f8` | Reunukset, jakajat ja käytöstä poistetut tilat |
| 400 | `#9661f1` | Kuvakkeet ja suuret koristeelliset muodot |
| 500 | `#7c3aed` | Brändiväri ja ensisijaiset painikkeet |
| 600 | `#632ebe` | Painikkeen osoitintila ja linkit |
| 700 | `#4a238e` | Otsikot vaaleilla taustoilla |
| 800 | `#32175f` | Leipäteksti vaalennusten päällä |
| 900 | `#190c2f` | Tumman tilan tausta |

Violetti asteikko, jossa joka askeleella on tehtävä. Valkoinen 500:n päällä on noin 5,7:1 ja askel 800 askeleen 100 päällä noin 10,9:1. Molemmat ylittävät ohjearvon 4,5:1.

## Tee vaalennukset ja tummennukset CSS:llä

Jokaista askelta ei enää tarvitse laskea käsin. CSS:n `color-mix()` sekoittaa kaksi väriä valitussa väriavaruudessa, joten koko asteikko voi seurata yhtä muuttujaa. OKLCH-sekoitus pitää askeleet silmälle tasaisempina kuin tavallinen sRGB, kuten [OKLCH-opas](https://gradiently.design/fi/guide/oklch-explained) kertoo. Selaintuki on laaja; tarkista yksityiskohdat [MDN:n color-mix()-ohjeesta](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix).

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Muuta `--brand`-arvoa, niin jokainen vaalennus, tummennus ja harmaasekoitus päivittyy sen mukana.

## Vaalennukset ja tummennukset liukuväreissä

Puhtaimmat liukuvärit ovat usein vain yksi värisävy, joka etenee vaalennuksesta tummennukseen. Koska väri ei kulje väriympyrän poikki, keskelle ei synny harmaata kaistaa. Tulos näyttää yhdelle materiaalille lankeavalta valolta. [Yksiväriset värijärjestelmät](https://gradiently.design/fi/guide/monochromatic-color-scheme) soveltavat samaa ajatusta kokonaisiin paletteihin.

- Violetti vaaleasta tummaan: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violetti ylhäältä valaistuna: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terrakotta vaaleasta tummaan: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Vaaleasta liilasta harmaaviolettiin: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Yhden värisävyn liukuja. Jokainen lainaa vain omasta asteikostaan.

Gradientlyn Mark toimii samalla tavoin: toisiinsa liittyvien värien reseptinä, jonka läpi valo kulkee. Kun suunnittelet sillä, värit sanojen lähellä tummenevat tai vaalenevat, jotta teksti pysyy luettavana ilman laatikkoa takanaan.

## FAQ

### Mitä eroa on vaalennuksella, harmaasekoituksella ja tummennuksella?

Vaalennuksessa väriin sekoitetaan valkoista, harmaasekoituksessa harmaata ja tummennuksessa mustaa.

### Onko pastelli vaalennus?

Kyllä. Pastellit ovat värejä, joihin lisätty runsas valkoinen tekee niistä pehmeitä ja heikosti kylläisiä.

### Kuinka monta askelta väriasteikossa pitäisi olla?

Useimmat designjärjestelmät käyttävät yhdeksästä yhteentoista askelta numeroituna 50:stä tai 100:sta 900:aan. Pienissä projekteissa vähempikin riittää, kunhan jokaisella on selkeä tehtävä.

### Miten teen väristä tummemman CSS:llä?

Käytä `color-mix(in oklch, yourcolour 70%, black)` ja säädä prosenttia. Pienempi prosentti tuottaa tummemman värin.

### Miksi tummennukseni näyttävät mutaisilta?

Puhdas musta vähentää myös kylläisyyttä. Sekoita OKLCH:ssa ja kokeile siirtää tummimpia askelia hieman siniseen tai violettiin, jotta ne pysyvät täyteläisinä.