Lyhyesti
- 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.
Tällä sivulla
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.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)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 |
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.
Hallitseva alue, toissijainen teksti ja korostus säästettynä aikariville.
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 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ä.
: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; }Brändissä kirjoita osuudet brändin tyyliohjeeseen 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.
Milloin sääntöä kannattaa taivuttaa tai rikkoa
Riko sääntöä, kun
- Työskentelet yhdellä sävyllä: yksivärinen väriskeema 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 ja väriteorian perusteet.
Usein kysyttyä
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.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
