# Jaetut vastavärit: kontrastia ilman ristiriitaa

[Canonical HTML page](https://gradiently.design/fi/guide/split-complementary-colors)

Vastaväripari on voimakas ja vaikea tasapainottaa. Jaa vastaväri kahtia, niin säilytät lähes kaiken kontrastin ilman värien riitaa. Näin se toimii, mukana kopioitavat paletit.

## The short version

- Jaetut vastavärit muodostuvat pohjaväristä ja sen vastavärin kummallakin puolella olevista väreistä väriympyrässä.
- 360 asteen ympyrässä kaksi kumppanisävyä ovat noin 150 ja 210 asteen päässä pohjasta eli noin 30 astetta tarkan vastavärin kummallakin puolella.
- Yhdistelmä säilyttää vahvan kontrastin mutta riitelee vähemmän kuin suora vastaväripari, koska mikään kaksi väriä ei ole täsmälleen vastakkain.
- Se toimii parhaiten, kun pohjaväri hallitsee ja kahta jaettua vastaväriä käytetään pienempinä korostuksina.
- Maalarin ja näytön väriympyrät sijoittavat vastavärit eri tavoin, joten sama pohja voi antaa hieman erilaiset jaetut paletit.

**Jaetut vastavärit** ovat kolme väriä: pohja ja sen vastavärin kummallakin puolella olevat värit. Sinisen suoran vastavärin oranssin sijaan yhdistät sinisen punaoranssiin ja keltaoranssiin. Säilytät lämpimän ja viileän välisen kontrastin, joka tekee vastaväriyhdistelmistä eläviä. Koska mikään väri ei kuitenkaan ole täsmälleen toisen vastakohta, tulos on silmälle lempeämpi ja paljon helpompi tasapainottaa oikeassa suunnitelmassa.

## Miten jaetut vastavärit toimivat

Kuvittele [väriympyrä](https://gradiently.design/fi/guide/color-wheel) kelloksi. Pohjavärisi on kahdessatoista. Sen vastaväri on kuudessa. Jaettu vastaväriharmonia ohittaa kuuden ja valitsee sen sijaan viiden ja seitsemän. Asteina se tarkoittaa sävyjä noin 150 ja 210 asteen päässä pohjaväristä.

1. **Valitse pohjasävy** Aloita väristä, joka on suunnitelmasi ydin: brändiväri, tuote tai tunnelma. Esimerkiksi sinivihreä sävyarvolla 175 astetta.
2. **Etsi sen vastaväri** Lisää 180 astetta. Sinivihreän vastaväri on korallinpunainen noin 355 asteessa.
3. **Siirry 30 astetta kummallekin puolelle** Kulje vastaväristä 30 astetta kumpaankin suuntaan: noin 325 asteeseen eli pinkkiin ja 25 asteeseen eli oranssiin.
4. **Säädä vaaleutta ja kylläisyyttä** Sävyt määrittävät harmonian, mutta sinä valitset kunkin värin vaaleuden, syvyyden ja murrettuuden. Siinä paletti alkaa näyttää omaltasi.

- Sinivihreä pohja: #188b81
- Orkideanpinkki: #e052a5
- Aprikoosi: #f58a3d
- Syvä sinivihreä: #173633
- Lämmin paperi: #f6f0ea

Läpikäyty esimerkki: sinivihreä, pinkki ja aprikoosi sekä tummempi sinivihreä ja neutraali sävy tekstille ja tilalle.

## Miksi jaetut vastavärit riitelevät vähemmän

Tarkat vastavärit, kuten punainen ja syaani tai sininen ja oranssi, kilpailevat huomiosta yhtä voimakkaasti. Täydessä kylläisyydessä vierekkäin ne voivat näyttää värisevän, ja sekoitettuina ne muuttuvat harmaiksi. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) ovat siksi tehokkaita, mutta virheille jää vähän tilaa.

Jaetussa harmoniassa kaksi kumppania ovat 60 asteen päässä toisistaan, joten ne ovat läheistä sukua. Ne tukevat toisiaan riitelyn sijaan ja tasapainottavat pohjaa yhdessä. Saat kontrastia ja luontaisen liittolaisen lämpimälle tai viileälle puolelle sen mukaan, mistä aloitat.

| Harmonia | Värit | Kontrasti | Tasapainottaminen |
| --- | --- | --- | --- |
| Vastavärit | 2, täsmälleen vastakkain | Suurin | Vaikeaa |
| Jaetut vastavärit | 3, pohja ja kaksi lähes vastakkaista | Suuri | Kohtalaista |
| [Kolmisointu](https://gradiently.design/fi/guide/triadic-colors) | 3, tasavälein 120 asteen päässä | Suuri | Kohtalaista tai vaikeaa |
| [Lähivärit](https://gradiently.design/fi/guide/analogous-colors) | 3, vierekkäin | Pieni | Helppoa |

Jaetut vastavärit asettuvat lähivärien rauhan ja vastavärien draaman väliin.

## Esimerkkejä jaettujen vastavärien paleteista

Viisi yllä olevilla vaiheilla rakennettua palettia. Jokaisen rivin ensimmäinen väri on pohja, muut kaksi sen jaetut kumppanit. Vaaleus ja kylläisyys on säädetty niin, että sarjat sopivat oikeaan käyttöön eivätkä ole vain teoriassa oikein.

| Pohja | Pohjan heksakoodi | Jaetut kumppanit | Tunnelma |
| --- | --- | --- | --- |
| Sinivihreä | `#188b81` | `#e052a5` orkidea, `#f58a3d` aprikoosi | Trooppinen, moderni, elävä |
| Violetti | `#6629a3` | `#f5e63d` sitruuna, `#3fa648` lehti | Leikkisä, luova, rohkea |
| Koboltinsininen | `#1b4f98` | `#e45e44` sinooperi, `#f5d63d` auringonkukka | Itsevarma, urheilullinen, klassinen |
| Karmiininpunainen | `#c32230` | `#318160` jade, `#2970a3` taivaansininen | Juhlava, vakaa, runsas |
| Metsänvihreä | `#2a6f41` | `#ab5eba` orkidea, `#e4677c` ruusu | Kasvimaailman henkinen, romanttinen, raikas |

Kopioi koodit suoraan työkaluusi. Käytä pohjaa suurimmalla osalla pinta-alasta.

- Sinivihreä harmonia: kaksi kumppania: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Kobolttiharmonia: kaksi kumppania: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Sinivihreä pohjana: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Koboltti pohjana: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

Kaksi jaettua kumppania ovat naapureita, joten ne sekoittuvat puhtaasti toisiinsa. Pohjan sekoittaminen suoraan kumppaniin kulkee ympyrän poikki ja samentaa värit. Pidä pohja siksi omana pintanaan.

## Jaetun vastaväriharmonian käyttö suunnitelmassa

Kolme yhtä voimakasta väriä saa suunnitelman näyttämään lipulta. Anna niille sen sijaan erikokoiset tehtävät. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) on hyvä lähtökohta: pohja peittää suurimman osan alueesta, yksi kumppani toimii tukena ja toinen näkyy vain kohdissa, joihin haluat katseen osuvan ensin.

Murrettuus on toinen säätökeinosi. Tummenna tai harmaanna pohjaa, kunnes se toimii lähes neutraalina. Kumppanit alkavat näyttää harkituilta eivätkä räikeiltä. Näin jaettu harmonia saa hienostuneen tunnelman: syvä sinivihreä, pölyinen pinkki ja pehmeä aprikoosi käyttävät samoja sävyjä kuin kirkas versio mutta tuovat mieleen boutique-hotellin rantapallon sijaan.

Pystysuuntainen kesämenujulkaisu syvällä sinivihreällä taustalla sekä pinkeillä ja aprikoosisilla korostuksilla

Syvä sinivihreä pohja tekee suurimman työn. Pinkki ja aprikoosi on varattu sanoille ja yhdelle korostukselle.

### Vältä

- Kaikki kolme sävyä täysin kylläisinä yhtä suurella alueella
- Leipäteksti yhdellä kumppanivärillä toisen päällä
- Yksi liukuväri pohjasta kumppaniin ympyrän poikki
- Neljännen kirkkaan sävyn lisääminen

### Tee näin

- Yksi hallitseva pohja, usein syvennettynä tai murrettuna
- Kumppanit eri vaaleuksilla, jotta toinen johtaa
- Neutraali väri tekstille ja hengähdystilalle
- Tarkista kontrasti kaikkialla, missä on sanoja

## Maalarin vai näytön väriympyrä

Yleisiä väriympyröitä on kaksi. Perinteisen maalarin ympyrän päävärit ovat punainen, keltainen ja sininen, joten punaisen vastaväri on vihreä. Näytöt käyttävät punaista, vihreää ja sinistä valoa, joten HSL-ympyrässä punaisen vastaväri on syaani. Molemmat antavat kelvollisia harmonioita. Käytä vain samaa ympyrää johdonmukaisesti. CSS:n `hsl()` käyttää näytön ympyrää, joten voit luoda harmonian pienellä laskutoimituksella.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Muuta arvoa `--h`, niin koko jaettu vastaväriharmonia liikkuu sen mukana. Lisää tästä mallista oppaassa [sävy, kylläisyys ja kirkkaus](https://gradiently.design/fi/guide/hue-saturation-brightness).

Kun haluat nähdä paletin oikeissa formaateissa, Gradientlyn Designer voi asetella julkaisun, tarinan ja bannerin kerralla. Näin arvioit suhteet jokaisessa koossa pelkän värikortin sijaan.

## FAQ

### Mitä jaetut vastavärit ovat?

Pohjaväri ja sen vastavärin kummallakin puolella olevat kaksi väriä väriympyrässä. Siniselle ne ovat punaoranssi ja keltaoranssi.

### Miten löydät jaetut vastavärit?

Etsi pohjavärin vastaväri lisäämällä sävyyn 180 astetta. Valitse sitten sävyt noin 30 astetta sen kummaltakin puolelta.

### Onko jaettu vastaväriharmonia parempi kuin vastaväripari?

Se on helpompi tasapainottaa. Säilytät suurimman osan kontrastista, mutta värit riitelevät vähemmän, koska mikään niistä ei ole tarkka vastaväri toiselle.

### Mitkä ovat punaisen jaetut vastavärit?

Maalarin ympyrässä keltavihreä ja sinivihreä. Näytön HSL-ympyrässä punaisen kumppanit ovat vihertävä syaani ja sinertävä syaani noin 150 ja 210 asteessa.

### Montako väriä jaetussa vastaväriharmoniassa on?

Kolme sävyä, mutta useimpiin käytännön paletteihin lisätään tumma ja vaalea neutraali väri tekstille ja tilalle.