# Väriharmonia: miksi jotkin värit kuuluvat yhteen

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

Väriympyrä antaa kuusi klassista yhdistelmää. Ne auttavat, mutta ovat vain puolet harmoniasta. Toinen puoli on vaaleus, kylläisyys ja kunkin värin määrä.

## The short version

- Väriharmonia on värijoukon ominaisuus, joka saa värit näyttämään yhteen kuuluvilta.
- Kuusi klassista harmoniaa ovat yksivärinen, lähiväri-, vastaväri-, jaettu vastaväri-, kolmisointu- ja nelisointuharmonia, kukin väriympyrän sijainteihin perustuva.
- Sävysuhteet eivät yksin takaa harmoniaa: tarvitaan järkevä vaaleusjakauma ja hallittu kylläisyys.
- Yksi hallitseva väri ja pienemmät määrät muita näyttävät lähes aina harmonisemmilta kuin kaikkien yhtä suuret osuudet.
- Yhteisen pohjasävyn, kuten lämpimyyden tai saman sävyn vivahteen, jakavat värit tuntuvat sukulaisilta myös kaukana toisistaan väriympyrällä.

**Väriharmonia** on tunne siitä, että värit kuuluvat yhteen. Suunnittelijat rakentavat sen yleensä kahdella tavalla: valitsemalla tunnetussa suhteessa olevat sävyt väriympyrältä, kuten naapurit tai vastakohdat, ja tasapainottamalla vaaleuden, kylläisyyden ja kunkin värin määrän. Jos ensimmäinen onnistuu ja toinen epäonnistuu, tulos riitelee edelleen. Kun molemmat onnistuvat, epätavallinenkin yhdistelmä tuntuu rauhalliselta ja tarkoitukselliselta.

## Väriympyrä ja sen hyöty

Ympyrä järjestää sävyt niin, että suhteista tulee geometriaa. Naapurit jakavat paljon samaa valoa ja sekoittuvat pehmeästi; vastakohdat eivät jaa sitä ja vahvistavat toistensa voimakkuutta. Jokainen klassinen harmonia on ympyrälle asetettu muoto. Jos ympyrä on uusi asia, aloita artikkelista [väriympyrä](https://gradiently.design/fi/guide/color-wheel).

Väriympyrä: `conic-gradient(from 0deg, #e64545, #e6a645, #c8e645, #45e66a, #45e6d4, #4596e6, #6a45e6, #d445e6, #e64545)`

Kohtalaisen voimakkaat sävyt ympyrässä. Jokainen alla oleva harmonia on pistekuvio tällä kehällä.

## Kuusi klassista väriharmoniaa

Jokainen yhdistelmä alkaa samasta petroolipohjasta `#30a69c`, jotta näet suhteen muuttavan tunnelmaa lähtövärin pysyessä samana.

- Yksivärinen: `linear-gradient(90deg, #d7f4f1 0% 25%, #88ddd6 25% 50%, #30a69c 50% 75%, #1d635d 75% 100%)`
- Lähivärit: `linear-gradient(90deg, #30a661 0% 33.3%, #30a69c 33.3% 66.6%, #3075a6 66.6% 100%)`
- Vastavärit: `linear-gradient(90deg, #30a69c 0% 50%, #a6303a 50% 100%)`
- Jaetut vastavärit: `linear-gradient(90deg, #30a69c 0% 33.3%, #a63075 33.3% 66.6%, #a66130 66.6% 100%)`
- Kolmisointu: `linear-gradient(90deg, #30a69c 0% 33.3%, #9c30a6 33.3% 66.6%, #a69c30 66.6% 100%)`
- Nelisointu: `linear-gradient(90deg, #30a69c 0% 25%, #6130a6 25% 50%, #a6303a 50% 75%, #75a630 75% 100%)`

Jokainen kaista näyttää yhdistelmän sävyt yhtä kylläisinä. Huomaa, miten äänekkäämmäksi ilme käy sävyjen etääntyessä.

| Harmonia | Sävyt ympyrällä | Tunnelma | Vaikein osa |
| --- | --- | --- | --- |
| Yksivärinen | Yksi sävy, monta vaaleusaskelta | Rauhallinen, hienostunut, yhtenäinen | Litteyden välttäminen |
| [Lähivärit](https://gradiently.design/fi/guide/analogous-colors) | Kolme naapuria noin 30 asteen välein | Luonnollinen, lämmin tai viileä, helppo | Riittävä kontrasti |
| [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) | Kaksi vastakohtaa 180 asteen päässä | Rohkea, energinen | Värien kilpailun hillitseminen |
| Jaetut vastavärit | Pohja ja sen vastakohdan kaksi naapuria | Eloisa, mutta vastavärejä pehmeämpi | Johtavan värin valinta |
| [Kolmisointu](https://gradiently.design/fi/guide/triadic-colors) | Kolme sävyä 120 asteen välein | Leikkisä, tasapainoinen | Täysvoimaisena lapsellinen |
| [Nelisointu](https://gradiently.design/fi/guide/tetradic-colors) | Kaksi vastaväriparia | Rikas, monimutkainen | Neljän värin pitäminen yhdessä |

Jokaisesta yhdistelmästä on oma artikkeli koodeilla ja esimerkeillä.

Karkea valintaohje: mitä vähemmän ja mitä lähempänä sävyt ovat, sitä helpompi harmonia syntyy. Yksiväriset ja lähiväriyhdistelmät huolehtivat lähes itsestään. Vasta-, kolmisointu- ja nelisointuvärit antavat energiaa mutta vaativat kurinalaisuutta seuraavilla kolmella alueella.

## Harmonia on myös vaaleutta ja kylläisyyttä

Katso yllä olevaa kolmisointukaistaa. Sävyt ovat oppikirjan mukaiset, mutta yhtä voimakkaina ne näyttävät lelulaatikolta. Ympyrä kuvaa vain sävyä. Kaksi muuta ominaisuutta ratkaisee, sopivatko värit oikeasti yhteen.

- **Vaaleus:** harmoninen joukko ulottuu yleensä vaaleasta keskitummaan ja tummaan. Viisi saman vaaleuden väriä sulautuu toisiinsa; vaihtelu antaa katseelle lepoa ja luettavaa.
- **Kylläisyys:** pidä useimmat värit rauhallisina ja yksi kirkkaana. Täysvoimaiset värit kilpailevat, ja yhdistelmä tuntuu melulta.
- **Yhteinen pohjasävy:** hieman lämpimät tai samaa sävyä sisältävät värit näyttävät sukulaisilta kaukanakin toisistaan ympyrällä. Päävärin lisääminen neutraaleihin on nopein keino.

- Petroolivalkoinen #edf3f2: #edf3f2
- Vaalea petrooli #88ddd6: #88ddd6
- Petrooli #30a69c: #30a69c
- Petroolimuste #122b29: #122b29
- Korallikorostus #e0525d: #e0525d

Hillitty vastaväriyhdistelmä: petrooli johtaa neljällä vaaleusasteella, neutraaleissa on petroolivivahde ja punainen vastakohta on yksi korallikorostus.

Kun teet säädöt numeroilla, käytä muotoa, joka erottaa vaaleuden sävystä. HSL on tuttu vaihtoehto; [OKLCH](https://gradiently.design/fi/guide/oklch-explained) pitää vaaleuden tasaisempana sävyn vaihtuessa ja helpottaa tasapainoisten yhdistelmien rakentamista.

## Osuudet: anna yhden värin johtaa

Suurin ero harmonisen ja kaoottisen suunnitelman välillä on yleensä osuus, ei sävy. Kahden tai kolmen värin yhtäläiset määrät saavat katseen pomppimaan. Yksi hallitseva väri, tukiväri ja pieni korostus antavat seurattavan hierarkian. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) on hyödyllinen lähtöjako.

### Riitelee

- Jokaisella värillä yhtä suuri alue
- Kaikki värit täydessä kylläisyydessä
- Kaikki samassa vaaleudessa
- Puhtaanharmaat neutraalit lämpimien värien vieressä
- Vastavärit koskettavat pitkiltä reunoilta

### Harmonisoi

- Yksi selvästi hallitseva väri
- Yksi kirkas korostus, muut rauhallisempia
- Jakauma vaaleasta tummaan
- Neutraalit sävytetty päävärillä
- Vastavärit erotettu tilalla tai neutraalilla

Instagram-pystyjulkaisu ilmoittaa keramiikkastudion avoimesta lauantaista liukuväritaustalla

Yksi Mark: huomaa johtava väri, sen osuus kehyksestä ja sanojen lepopaikka.

Sama avoimen studion julkaisu toisella liukuväritaustalla, jossa on eri väriperhe

Toinen Mark samoilla sanoilla. Värisuhde muuttaa tunnelmaa; viesti pysyy samana.

## Harmonisen paletin rakentaminen käytännössä

1. **Aloita yhdestä merkityksellisestä väristä** Brändiväri, tuote tai paikka. Harmonia on helpompi rakentaa kiintopisteen ympärille kuin tyhjästä.
2. **Valitse tunnelmaan sopiva suhde** Lähivärit rauhaan, vastavärit tai jaetut vastavärit energiaan, yksivärinen hillittyyn ilmeeseen.
3. **Laajenna vaaleutta ja hillitse kylläisyyttä** Tee vaalea, keskisävyinen ja tumma versio, ja vähennä kylläisyyttä kaikesta paitsi korostuksesta.
4. **Päätä osuudet** Nimeä eniten tilaa kattava väri, tukiväri ja vain pienissä kohdissa näkyvä korostus.
5. **Testaa oikeilla sanoilla** Aseta paletti oikeaan asetteluun ja tarkista tekstikontrasti. Harmonia, joka ei kanna otsikkoa, ei ole valmis.

Jos haluat aloittaa valmiiksi tasapainotetusta paletista, jokainen Gradientlyn Mark on valmis elävä tausta, jonka värit, materiaalit ja valo on sommiteltu yhdessä. Studio asettaa sanat sen päälle, ja Automaattinen muste valitsee vaalean tai tumman tekstin riveittäin. Oman paletin luontiin alusta katso [väripalettigeneraattorit](https://gradiently.design/fi/guide/color-palette-generator).

## FAQ

### Mitä väriharmonia on?

Värien yhteenkuuluvuuden tunne, joka syntyy yleensä väriympyrän sävysuhteista ja tasapainoisesta vaaleudesta, kylläisyydestä ja osuuksista.

### Mitä väriharmonian tyyppejä on?

Klassiset kuusi ovat yksivärinen, lähiväri-, vastaväri-, jaettu vastaväri-, kolmisointu- ja nelisointuharmonia.

### Mikä väriharmonia on helpoin käyttää?

Yksivärinen ja lähiväriyhdistelmä, koska sävyt ovat lähellä toisiaan ja riitelevät harvoin. Hyvä vaaleusjakauma ehkäisee litteyttä.

### Miksi vastavärini riitelevät?

Yleensä molemmat ovat täydessä kylläisyydessä ja yhtä suurina osuuksina. Anna yhden johtaa, hillitse toinen korostukseksi ja erota ne neutraalilla.