# Tetradinen väripaletti: neljä väriä tasapainossa

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

Neljä väriä on klassisista harmonioista rikkain ja helpoin saada epätasapainoon. Salaisuus ei ole neljän sävyn laskennallisessa valinnassa vaan siinä, mikä niistä saa johtaa.

## The short version

- Tetradinen väripaletti käyttää neljää sävyä, jotka muodostavat väriympyrässä kaksi vastaväriparia.
- Suorakulmiossa kaksi sävyä on 60 asteen päässä toisistaan ja niiden vastavärit täydentävät paletin. Neliössä kaikki neljä ovat 90 asteen välein.
- Tetradiset paletit ovat rikkaita ja monipuolisia mutta vaikeita tasapainottaa, sillä neljä sävyä kilpailee huomiosta.
- Harmonia toimii, kun yksi väri hallitsee, toinen tukee ja kaksi muuta ovat pieniä tehosteita.
- Osan sävyistä hillitseminen tai tummentaminen tekee tetradisesta paletista hienostuneen räikeän sijasta.

**Tetradinen väripaletti** sisältää neljä sävyä, jotka muodostavat väriympyrässä kaksi vastaväriparia. Kun yhdistät ne viivoilla, syntyy suorakulmio tai neliö. Siksi versioita kutsutaan suorakulmaiseksi ja neliömäiseksi harmoniaksi. Koska paletissa on lämpimiä ja viileitä värejä ympyrän molemmilta puolilta, se on klassisista harmonioista runsain. Se näyttää myös helpoimmin kaoottiselta, ellet anna yhden värin johtaa ja pidä muita kolmea omilla paikoillaan.

## Suorakulmainen ja neliömäinen tetradinen harmonia

Molemmat versiot alkavat perussävystä ja sen vastaväristä 180 asteen päässä. Ero on toisen parin sijainnissa.

| Versio | Sävyt perusväristä | Luonne |
| --- | --- | --- |
| Suorakulmio eli kaksoisvastavärit | 0, 60, 180 ja 240 astetta | Kaksi lähekkäistä sävyä ja niiden vastavärit; helpompi tasapainottaa |
| Neliö | 0, 90, 180 ja 270 astetta | Täysin tasaiset välit; monipuolisin ja rohkein |

Suorakulmiossa kummallakin puolella on luonteva liittolaispari, joten suunnittelijat aloittavat yleensä siitä.

- Koboltti: #1b3c7e
- Ametisti: #9d59c0
- Kehäkukka: #f0b642
- Saniainen: #7dba5e

Suorakulmioharmonia: koboltti ja ametisti 60 asteen välein, vastapäätä kehäkukka ja saniainen.

- Syvä violetti: #452277
- Korallinpunainen: #e25a66
- Limenvihreä lehti: #95c059
- Meren sinivihreä: #2e9e95

Neliöharmonia: neljä sävyä 90 asteen välein. Violettia on syvennetty, jotta se voi toimia pohjana.

## Näin rakennat tetradisen väripaletin

1. **Valitse perussävy** Valitse väri, johon brändisi tai suunnitelmasi perustuu. Kirjaa sen sävykulma asteina. Sen saat mistä tahansa HSL-arvot näyttävästä värivalitsimesta.
2. **Lisää vastaväri** Lisää 180 astetta. Tämä pari on harmonian selkäranka. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) selittää, miksi vastakohdat toimivat.
3. **Valitse suorakulmio tai neliö** Suorakulmiossa lisää 60 astetta perussävyyn ja vastaväriin. Neliössä lisää kumpaankin 90 astetta.
4. **Anna jokaiselle värille tehtävä** Yksi hallitseva väri, yksi tukiväri ja kaksi tehostetta. Kirjaa tehtävät, jotta ne pysyvät samoina kaikissa suunnitelmissa.
5. **Säädä vaaleutta ja kylläisyyttä** Tummenna pääväriä, pehmennä tukiväriä ja pidä tehosteet kirkkaimpina. Sävy määrää harmonian, vaaleus hierarkian.

```css
:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}
```

Yllä oleva suorakulmiopaletti tuotettuna yhdestä numerosta. HSL-sävykulma kiertyy itsestään 360 asteen jälkeen, joten sinun ei tarvitse vähentää mitään.

## Miksi neljä väriä on vaikea tasapainottaa

Kahdella värillä kontrasti on yksinkertainen. Neljän voimakkaan sävyn kanssa silmä ei tiedä, mihin katsoa ensin, ja jokainen väri tuntuu huutavan muiden yli. Useimmat epäonnistuneet tetradiset suunnitelmat antavat kaikille neljälle lähes saman pinta-alan ja kylläisyyden. Ratkaisu on hierarkia, ei värien vähentäminen.

Pystysuuntainen tapahtumajulkaisu avoimesta studioviikonlopusta, jossa yksi taustaväri hallitsee ja tehosteet ovat pieniä

Yksi väri johtaa taustaa ja muut näkyvät pienissä kohdissa: runsas sisältö, rauhallinen suunnitelma.

Saman sarjan pystysuuntainen listajulkaisu, jota johtaa neljän värin paletin toinen väri

Rinnakkaisjulkaisu, jossa paletin toinen väri johtaa. Sarja tuntuu yhtenäiseltä mutta ei toistavalta.

Toinen kuva näyttää harmonian todellisen vahvuuden. Neljä väriä antaa riittävästi vaihtelua koko sarjaan: jokaisessa julkaisussa voi johtaa paletin eri jäsen ja kokonaisuus kuuluu silti selvästi yhteen. Tämä sopii karuselleihin, ruokalistoihin ja tapahtumaohjelmiin, joissa [brändin yhtenäisyys](https://gradiently.design/fi/guide/brand-consistency) merkitsee mutta samanlaisuus kyllästyttää.

## Missä tetradinen väripaletti toimii parhaiten

Neljä sävyä ansaitsee paikkansa, kun projektissa pitää erottaa useita asioita selkeästi keksimättä uusia värejä joka kerta. Yksittäinen juliste tarvitsee sitä harvoin. Järjestelmä tarvitsee yleensä.

- **Kategorioiden värikoodaus:** kahvilan ruokalista, jossa juomilla, aamiaisella, lounaalla ja kakuilla on oma väri.
- **Tapahtumaohjelmat:** neljä lavaa, ohjelmalinjaa tai päivää, jotka kävijän on erotettava yhdellä silmäyksellä.
- **Kaaviot ja koontinäkymät:** neljä erottuvana pysyvää datasarjaa, mieluiten myös [värinäön puutteiden varalta tarkistettuina](https://gradiently.design/fi/guide/color-blindness-design).
- **Lasten ja leikin brändit:** kun paletin kirkas täysversio on juuri tarkoitus.
- **Kausikampanjat:** yksi johtava sävy vuoden kullekin neljännekselle, muut tukena.

Aloita mittasuhteet [60 30 10 -säännöstä](https://gradiently.design/fi/guide/60-30-10-rule) ja jaa viimeinen kymmenen prosenttia kahden tehosteen kesken. Ruokalistassa pääväri voi esimerkiksi täyttää sivun, tukiväri merkitä otsikot ja kaksi tehostetta osoittaa kasvisruoat ja uutuusannokset.

## Näin tetradinen paletti näyttää hienostuneelta

Täysin kylläiset tetradiset paletit näyttävät lasten lelulaatikolta. Se sopii lelukaupalle ja huonosti useimmille muille. Vie kahta tai kolmea väriä kohti harmaata tai tummaa, niin samat sävyt näyttävät harkituilta ja aikuisilta.

- Liuskeensininen: #24324c
- Kanerva: #a085ad
- Vehnä: #dfc590
- Salvia: #85a375
- Pellava: #f6f2ea

Koboltin suorakulmioharmonia hillittynä: samat sävyt, nyt riittävän rauhallisina hotelliin, kirjakauppaan tai häihin.

- Koboltista ametistiin: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Kehäkukasta saniaiseen: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Kanerva liuskeella: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

Suorakulmiossa sekoita kunkin 60 asteen parin sävyt keskenään. Vastaväriin kulkeva liuku käy harmaan kautta. Lue [sameista liukuväreistä](https://gradiently.design/fi/guide/muddy-gradients).

### Vältä

- Neljä sävyä samalla pinta-alalla ja kirkkaudella
- Kirkkaanvärinen teksti toisella kirkkaalla sävyllä
- Kaikkien neljän värin läpi kulkeva liuku
- Viidennen sävyn lisääminen tasapainon korjaamiseksi

### Tee näin

- Yksi hallitseva väri, noin 60 prosenttia pinta-alasta
- Neutraali sävy tekstille ja tyhjälle tilalle
- Kaksi hillittyä sävyä ja kaksi kirkkaampaa
- Vaihtele sarjan johtavaa väriä

Jos neljä väriä tuntuu liialta, palaa kolmeen [triadisilla väreillä](https://gradiently.design/fi/guide/triadic-colors) tai [jaetuilla vastaväreillä](https://gradiently.design/fi/guide/split-complementary-colors). Molemmat säilyttävät vahvan kontrastin yhdellä hallittavalla sävyllä vähemmän. Kokeile palettia sitten oikeissa suunnitelmissa. Gradientlyssä brändipakettiin tallennetut värit (Pro-ominaisuus) näkyvät ensimmäisinä jokaisessa Studion värivalitsimessa. Näin sarjan jokainen julkaisu voi saada eri päävärin.

## FAQ

### Mikä on tetradinen väripaletti?

Neljän sävyn paletti, joka koostuu kahdesta vastaväriparista väriympyrässä ja muodostaa suorakulmion tai neliön.

### Mitä eroa on suorakulmaisella ja neliömäisellä väripaletilla?

Suorakulmiossa sävyt ovat 0, 60, 180 ja 240 asteessa. Neliössä ne ovat tasaisesti 90 asteen välein. Suorakulmiot on yleensä helpompi tasapainottaa.

### Onko tetradinen sama kuin kaksoisvastavärit?

Suorakulmaista tetradista harmoniaa kutsutaan usein kaksoisvastaväreiksi, koska siinä on kaksi lähekkäistä vastaväriparia.

### Mikä on esimerkki tetradisesta väripaletista?

Koboltti `#1B3C7E`, ametisti `#9D59C0`, kehäkukka `#F0B642` ja saniainen `#7DBA5E` muodostavat suorakulmion. Koboltti ja ametisti ovat 60 asteen välein, vastapäätä kehäkukkaa ja saniaista.

### Miten neljän värin paletti tasapainotetaan?

Anna yhden värin hallita, toisen tukea ja pidä muut kaksi pieninä tehosteina. Hillitse tai tummenna osaa sävyistä ja lisää neutraali väri tekstille.