Väritiede kuulostaa akateemiselta. Käytännössä se on pieni sääntöjen työkalulaatikko, johon hyvä suunnittelija tarttuu ajattelematta. Seitsemän klassista harmoniaa kattaa 95 % palettityöstä — kunkin tunteminen ja sen käyttökohteiden tietäminen on ero tarkoituksellisen ja sattumalta syntyneen palettien välillä.

Väriympyrä on Kompassi

Jokainen harmoniasääntö määrittää positiot 12-osaisella väriympyrällä. Valitset perusvärin, ja sääntö kertoo, mistä ympyrän kohdasta otat loput värit. Säännöt eivät määritä kylläisyyttä tai kirkkautta — nämä dimensiot voit säätää itse.

Komplementaari (Vastakkaiset Värit)

Kaksi väriä suoraan vastakkain ympyrällä: punainen ja syaani, oranssi ja sininen, violetti ja keltainen. Maksimaalinen kontrasti. Käytetään silloin, kun haluat jotain erottuvan taustasta — CTA-painike putkisivulla, korostus tietokaavioissa.

Ansa: täydellä kylläisyydellä komplementaariparit värähtelevät epämiellyttävästi. Heikennä toista (poista kylläisyyttä, vaalenna tai tummenra) ja käytä toista aksenttina.

Triadinen (Kolme Tasavälillä)

Kolme väriä 120° välein: punainen-keltainen-sininen, oranssi-vihreä-violetti. Tasapainoinen ja energinen. Suosittu kuvituksissa, lasten tuotteissa ja brändeissä, jotka haluavat tuntua vilkkaalta ilman ylivoimaisuutta.

Ansa: kaikki kolme yhtä suurella kylläisyydellä kilpailevat huomiosta. Valitse yksi dominoimaan (60 % suunnittelusta), yksi tueksi (30 %), yksi aksenteiksi (10 %).

Analoginen (Naapurit Ympyrällä)

Kolme viidestä vierekkäisestä väristä: keltainen-keltainen-vihreä-vihreä tai sininen-sininen-violetti-violetti. Rauhallisimpa harmonia — ei konfliktia, koska mikään väri ei taistele toista vastaan. Luonnolliset näkymät (auringonlaskut, metsät) ovat melkein aina analogisia.

Ansa: analogiset palettit voivat tuntua tasaisilta. Lisää komplementaarinen akssentti (pieni annos keskimmäisen värin vastakkaisesta väristä) kontrastipisteiden luomiseksi.

Jaettu Komplementaari (Kaksi Lähes-Vastakkaista)

Valitse perusväri, sitten ota kaksi väriä sen komplementaarin vierestä sen sijaan, että ottaisit komplementaarin itsensä. Pehmeämpi kuin tiukka komplementaari mutta silti napakka. Hyvä oletusarvo suunnittelijoille, jotka pitävät suoraa komplementaaria liian aggressiivisena.

Tetraadinen (Kaksi Komplementaarista Paria)

Neljä väriä muodostaen nelikulmion ympyrällä: esim. punainen + vihreä + oranssi + sininen. Rikkain harmonia — paljon vaihtelua — mutta vaikeimmin tasapainoitettava. Parhaiten silloin, kun yksi väri dominoi ja muut kolme tukevat.

Ansa: tetraidiset palettit näyttävät helposti kaoottiseilta. Päätä, mikä väri kantaa identiteettiä ja sijoita muut kolme pienempiin rooleihin.

Monokromaattinen (Yksi Väri, Monet Arvot)

Yksi väri vaihtelevalla kylläisyydellä ja kirkkaudella. Suurin koherenssi, nolla värikontrasti. Täydellinen käyttöliittymille, joissa haluat sisällön (valokuvat, typografia) kantavan visuaalisen mielenkiinnon, ei käyttöliittymän ornamentiikka.

Useimmat minimalistiset SaaS-työkalut käyttävät monokromaattista mallia — brändi on yksi sininen, kaikki muu on harmaa.

Trending (Sääntöjen Rikkominen Hyvin)

Seitsemäs tila, jonka sisällytämme väripalettien generaattoriin: 177 käsin kuratoitua yhteisöpalettia ColourLoversilta, Coolorsista ja alan suunnittelijoilta. Nämä palettit usein rikkovat klassisia sääntöjä tarkoituksella — ne toimivat, koska suunnittelijalla oli erityinen luova tarkoitus — ja ne ovat loistava inspiraation lähde, kun puhdas teoria tuottaa jotain liian turvallista.

Mikä Valita?

Toimituksellinen, rauhoittava, luonnollinen → analoginen.
Napakka, CTA, energia → komplementaari tai jaettu komplementaari.
Vilkas brändi, kuvitus → triadinen.
Rikas toimituksellinen, rohkeat kampanjat → tetraadinen.
Minimalistinen käyttöliittymä, valokuva-intensiivinen → monokromaattinen.
Jumissa oleva tunne → selaa Trendingiä.

Sääntöjen Ulkopuolella

Kaikki seitsemän harmoniaa jättävät huomiotta kaksi kriittistä dimensiota: kontrasti (voidaanko teksti lukea tällä taustalla?) ja semanttinen väri (punainen tarkoittaa vaaraa länsimaisessa käyttöliittymässä teoriasta riippumatta). Aja lopullinen palettiisi aina WCAG-kontrastintarkastuksen läpi — väripalettien generaattori näyttää jokaisen parin AA/AAA-suhteet yhdellä napsautuksella — ja älä valitse vaaranväriä vain koska ympyrä sanoo, että se näyttää hyvältä.

Säännöt ovat lähtökohtia, eivät päätepisteitä. Luo viisi palettia, arvioi ne, säädä. Hyvät palettit syntyvät iteraatiosta, ei yhdestä nopsan heitosta.

Väriharmonian säännöt: Komplementaari, Triadinen, Tetraadinen ja milloin kutakin käytetään