# 60 30 10 -sääntö: värisuhde suunnitelmiin ja brändeihin

[Canonical HTML page](https://gradiently.design/fi/guide/60-30-10-rule)

Useimmat paletit epäonnistuvat mittasuhteissa, eivät värivalinnoissa. Kolme lukua kertoo, kuinka paljon kutakin väriä kannattaa käyttää, ja ne toimivat puhelimen näytöllä yhtä hyvin kuin olohuoneissa, joista ne ovat peräisin.

## The short version

- 60 30 10 -säännön mukaan tasapainoinen suunnitelma käyttää hallitsevaa väriä noin 60 %:lla tilasta, toissijaista väriä noin 30 %:lla ja korostusväriä noin 10 %:lla.
- Sääntö tulee sisustussuunnittelusta, jossa seinät, kalusteet ja somisteet asettuvat luontevasti näihin kolmeen rooliin.
- Näytöllä 60 % on yleensä tausta, 30 % on paneeleita, muotoja tai tekstiä ja 10 % menee siihen yhteen asiaan, jonka haluat ihmisten huomaavan tai painavan.
- Liukuvärissä sääntö ratkaisee, kuinka suuren osan alueesta kukin väri saa, minkä vuoksi korostusvärin kuuluu näkyä pienellä alalla eikä kokonaisena vyöhykkeenä.
- Luvut ovat lähtökohta: neutraalit voivat olla se 60 %, ja monet vahvat suunnitelmat ovat lähempänä suhdetta 70-25-5 tai 90-10.

**60 30 10 -sääntö**, jonka kirjoitusasu on yleensä 60-30-10, on yksinkertainen ohje värien mittasuhteisiin: käytä **hallitsevaa** väriä noin 60 %:ssa suunnitelmaa, **toissijaista** väriä noin 30 %:ssa ja **korostusväriä** viimeisessä 10 %:ssa. Sääntö tulee sisustussuunnittelusta, jossa seinät, huonekalut ja somisteet asettuvat näihin rooleihin itsestään. Se toimii yhtä hyvin somejulkaisuissa, dioissa, verkkosivuilla ja brändipaleteissa, koska se estää kaikkia värejä kilpailemasta samasta huomiosta.

60 hiekka, 30 laivastonsininen, 10 koralli: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

Sääntö palkkina. Korostusväri on pieni, ja juuri siksi se huomataan ensimmäisenä.

## Mitä kukin osuus tekee

Kolmella osuudella on eri tehtävät. 60 % luo tunnelman ja on yleensä rauhallinen: tausta, pohja, seinä. 30 % antaa rakennetta ja kontrastia, ja siinä ovat paneelit, muodot tai iso teksti. Silmä hakeutuu ensimmäisenä 10 %:iin, joten se kuuluu yhdelle tärkeimmälle asialle: painikkeelle, hinnalle, päivämäärälle tai logolle.

| Osuus | Rooli | Tyypillinen väri | Mihin se sijoitetaan |
| --- | --- | --- | --- |
| 60 % | Hallitseva | Hiljainen: neutraali, vaalea sävy tai syvä tumma | Taustat, isot alueet, sivun pohja |
| 30 % | Toissijainen | Kontrastia luova mutta ei äänekäs | Paneelit, kortit, iso teksti, kuva-alueet |
| 10 % | Korostus | Kylläisin väri, joka sinulla on | Painikkeet, hinnat, avainsanat, pienet muodot |

Korostus toimii, koska se on harvinainen. Tuplaa se, niin se lakkaa olemasta korostus.

- 60 Hiekka: #f3efe6
- 30 Satamansininen: #1f3a5f
- 10 Koralli: #e76f51

Paletti kirjoitettuna mittasuhteineen. Kun osuus on merkitty värin viereen, tiimi ei ala käyttää korallia joka paikassa.

## 60-30-10-sääntö somejulkaisussa

Julkaisussa hallitseva väri on tausta, toissijainen on otsikko tai sen takana oleva muoto, ja korostus on yksi pieni yksityiskohta, kuten päivämäärä, hinta tai yksi alleviivattu sana. Yleinen virhe on antaa korostusväri koko otsikolle. Silloin 30 % julkaisusta huutaa, eikä mikään erotu, koska kaikki erottuu.

Pystysuuntainen tapahtumajulkaisu painomessuista: rauhallinen tausta, vahva otsikko ja pieni korostus kellonajassa

Hallitseva alue, toissijainen teksti ja korostus säästettynä aikariville.

Sama painomessujen suunnitelma leveänä 16:9-diana, värien tasapaino ennallaan

Samat mittasuhteet leveässä diassa. Osuudet pitävät, vaikka muoto muuttuu.

## Säännön käyttö dioissa ja verkkosivuilla

Dioissa aseta se 60 % kerran, jokaisen dian taustaksi, ja pidä se. Käytä 30 %:a otsikoihin, kaavioihin ja kuvakehyksiin. Varaa 10 % yhdelle luvulle tai sanalle per dia, jonka yleisön on muistettava. [Esitystaustat](https://gradiently.design/fi/guide/presentation-backgrounds) käsittelee tarkemmin pohjia, jotka eivät kilpaile sisällön kanssa.

Verkkosivulla sivun tausta ja isot osiot ovat se 60 %, navigaatio, kortit, alatunniste ja leipäteksti ovat se 30 %, ja 10 % menee toimintakutsuille ja linkeille. Jos ensisijainen painikkeesi on samaa väriä kuin otsikkosi, sivulla ei ole enää korostusta ohjaamassa ihmisiä.

```css
:root {
  --dominant: #f3efe6;  /* 60%: page and section backgrounds */
  --secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
  --accent: #e76f51;    /* 10%: buttons, links, key numbers */
}

body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }
```

Kun värit nimetään roolin eikä sävyn mukaan, mittasuhteita on vaikea rikkoa. Tumma teksti korallinpunaisella painikkeella mittaa noin 6:1.

> **Siristystesti** Siristä silmiäsi valmiin suunnitelman edessä, kunnes yksityiskohdat sumenevat. Näkyviin pitäisi jäädä yksi iso väri, yksi selvä toinen väri ja pieni kirkas piste. Jos näet kolme yhtä suurta lohkoa tai korostus levittäytyy koko asettelulle, siirrä osuudet takaisin kohti lukuja 60, 30 ja 10.

Brändissä kirjoita osuudet [brändin tyyliohjeeseen](https://gradiently.design/fi/guide/brand-style-guide) heksakoodien viereen. Paletti ilman mittasuhteita houkuttelee jokaista suunnittelijaa valitsemaan lempivärinsä taustaksi, ja kuukaudessa brändi näyttää kolmelta eri brändiltä.

## 60 30 10 -sääntö liukuvärissä

Liukuvärit rikkovat mittasuhteita helposti, koska tasainen sekoitus antaa jokaiselle värille saman osuuden. Sovella sääntöä siirtämällä pysähdyskohtia: anna hallitsevan värin täyttää suurin osa alueesta, sulauta toissijainen väri noin kolmannekseen ja tuo korostus mukaan vain reunalle tai pieneen hehkuun.

- Tasan kolmasosat: ei hallitsevaa väriä: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: sininen vie, koralli välähtää: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Tumma: muste, liuskekivi, kulta: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Pehmeä: salvia, kerma, luumu: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

Ensimmäinen sekoitus antaa kolmelle värille saman painon ja näyttää levottomalta. Toinen pitää saman idean mittasuhteissa. Kaksi viimeistä ovat valmiita 60-30-10-yhdistelmiä.

## Milloin sääntöä kannattaa taivuttaa tai rikkoa

### Riko sääntöä, kun

- Työskentelet yhdellä sävyllä: [yksivärinen väriskeema](https://gradiently.design/fi/guide/monochromatic-color-scheme) on lähempänä suhdetta 60-30-10 vaaleudessa kuin sävyssä
- Suunnitelma on enimmäkseen tekstiä neutraalilla pohjalla, jolloin 90-10 on siistimpi
- Valokuva tuo omat värinsä ja palettisi vain kehystää sitä
- Brändivärin täytyy hallita, esimerkiksi juliste täysin brändin punaisella

### Pidä se, kun

- Värit alkavat kilpailla eikä mikään erotu
- Tiimi jakaa paletin ja tarvitsee noudatettavan säännön
- Tasapainotettavana on kolme tai useampi vahvaa väriä
- Painikkeet ja avainluvut hukkuvat

Luvut ovat likimääräisiä. Tyhjä tila lasketaan mukaan. Neutraalit, kuten murtovalkoinen, hiili ja hiekka, voivat olla se 60 %, ja kaksi varsinaista väriä jakaa loput. Tärkeintä on järjestys: yksi selvä johtaja, yksi tuki ja yksi harvinainen korostus. Värien valinnasta itsestään lisää artikkeleissa [brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors) ja [väriteorian perusteet](https://gradiently.design/fi/guide/color-theory-basics).

## FAQ

### Mikä on 60 30 10 -sääntö?

Se on värien mittasuhteiden ohje: noin 60 % suunnitelmasta hallitsevaa väriä, 30 % toissijaista väriä ja 10 % korostusväriä.

### Mistä 60-30-10-sääntö tulee?

Se on sisustussuunnittelun pitkäaikainen nyrkkisääntö, jossa seinät, kalusteet ja somisteet ottavat luontevasti kolme osuutta.

### Lasketaanko valkoinen mukaan 60 30 10 -säännössä?

Kyllä. Neutraalit, kuten valkoinen, murtovalkoinen, hiekka tai hiili, muodostavat usein hallitsevan 60 %:n, jolloin 30 % ja 10 % jäävät varsinaisille väreille.

### Minkä värinen 10 %:n korostuksen kannattaa olla?

Yleensä kylläisin väri, jota käytät sillä yhdellä asialla, jonka haluat huomattavan ensimmäisenä, kuten painikkeella, hinnalla tai päivämäärällä.

### Miten käytän 60-30-10-sääntöä liukuvärissä?

Siirrä värien pysähdyskohtia niin, että hallitseva väri täyttää suurimman osan alueesta, toissijainen sulautuu noin kolmannekseen ja korostus näkyy vain pienellä alalla tai reunalla.