60-30-10-sääntö
Tämä on hyödyllisin sääntö värien jakamiseen. Se tulee sisustuksesta, mutta toimii kaikissa projekteissa.
- 60 %: hallitseva väri. Yleensä neutraali tai pehmeä sävy. Se peittää taustat ja suuret pinnat.
- 30 %: toissijainen väri. Se tuo persoonallisuutta. Käytä sitä lohkoihin, valikoihin tai huonekaluihin.
- 10 %: korosteväri. Voimakkain. Käytä sitä painikkeisiin, kuvakkeisiin tai yksityiskohtiin.
Esimerkiksi: luunvalkoinen 60 %, laivastonsininen 30 % ja oranssi 10 %.
Tarkkaan mittaamiseen ei ole tarvetta. Ajatus: yksi väri johtaa, yksi tukee ja yksi erottuu.
Neutraalien värien rooli
Neutraaleja värejä ovat valkoinen, musta, harmaa, beige, kerma ja vaaleat ruskeat sävyt. Ne sopivat lähes kaiken kanssa.
Ne lepuuttavat silmiä ja antavat voimakkaiden värien päästä oikeuksiinsa. Väripaletti ilman neutraaleja värejä tuntuu yleensä raskaalta.
- Valkoinen ja luunvalkoinen: puhtaus ja tila.
- Harmaa: moderni ja hillitty. Valitse lämpimiä tai kylmiä harmaita, jotka sopivat muuhun väripalettiin.
- Beige ja hiekka: lämpöä ja luonnollisuutta.
- Musta tai lähes musta: tyylikkyyttä ja kontrastia. Tekstissä hyvin tumma harmaa on yleensä miellyttävämpi kuin täysin musta.
Yhdistä lämpötilan mukaan
Värit ovat lämpimiä (punainen, oranssi, keltainen) tai kylmiä (sininen, vihreä, violetti). Niitä voi yhdistää kolmella helpolla tavalla:
- Vain lämpimiä värejä: kodikas ja energinen. Täydellinen ravintoloille tai ystävällisille brändeille.
- Vain kylmiä värejä: rauhallinen ja ammattimainen. Täydellinen terveydenhuoltoon, teknologiaan tai rahoitukseen.
- Kylmä pohja ja lämmin korostus: monipuolisin vaihtoehto. Lämmin korostus vetää katseen rauhallista taustaa vasten.
Mikä useimmiten menee pieleen: monta voimakasta lämmintä ja kylmää väriä yhtä aikaa ilman hallitsevaa väriä.
Tekstin kontrasti
Kaunis väri on hyödytön, jos tekstiä ei pysty lukemaan. Tekstin ja taustan välinen kontrasti on ratkaiseva luettavuuden ja saavutettavuuden kannalta.
- Käytä tummaa tekstiä vaalealla taustalla tai vaaleaa tekstiä tummalla taustalla.
- Vältä keltaista, vaaleanvihreää tai vaaleanharmaata tekstiä valkoisella.
- Älä laita kylläisiä vastavärejä päällekkäin, kuten punaista vihreälle. Se välkkyy ja väsyttää silmiä.
- WCAG-ohjeet edellyttävät vähintään kontrastisuhdetta 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille.
Voit testata minkä tahansa väriparin kontrastin tarkistus -työkalullamme.
15 väriyhdistelmää, jotka toimivat aina
Nämä parit ovat turvallinen lähtökohta. Käytä niitä pohjana ja lisää tarvittaessa neutraali väri tai korostus.
- Laivastonsininen ja kerma: klassinen, asiallinen ja helppolukuinen.
- Musta ja kulta: ylellisyyttä ja tyylikkyyttä.
- Sininen ja oranssi: vastavärit täynnä energiaa.
- Männynvihreä ja beige: luonnollinen ja rauhallinen.
- Vaaleanpunainen ja antrasiitti: moderni ja tasapainoinen.
- Keltainen ja musta: maksimaalinen kontrasti, täydellinen varoituksiin.
- Viininpunainen ja hiekka: lämmin ja hienostunut.
- Turkoosi ja koralli: raikas ja kesäinen.
- Violetti ja liila: monokromaattinen ja luova.
- Ruskea ja salvianvihreä: maanläheinen, täydellinen luontobrändeille.
- Harmaa ja persikka: pehmeä ja ystävällinen.
- Petrolinsininen ja vaaleankeltainen: rauhallinen ja ripaus valoa.
- Terrakotta ja luunvalkoinen: lämmin ja välimerellinen.
- Tumma petroli ja sinapinkeltainen: retro ja luonteikas.
- Valkoinen ja punainen: suora, energinen ja hyvin näkyvä.
Paljon lisää ideoita HEX-koodeineen löydät väriyhdistelmät-sivultamme.
Mitkä värit sopivat mihinkin väriin
Jos sinulla on jo pääväri, tämä lista auttaa alkuun nopeasti:
- Punainen: valkoinen, musta, harmaa, laivastonsininen ja beige. Rohkeampaan tyyliin: vaaleanpunainen tai oranssi.
- Oranssi: laivastonsininen, turkoosi, valkoinen, kerma ja ruskea.
- Keltainen: harmaa, musta, laivastonsininen ja valkoinen. Sinapinkeltainen sopii hyvin tummanvihreän kanssa.
- Vihreä: beige, valkoinen, ruskea, kulta ja pehmeä vaaleanpunainen.
- Sininen: valkoinen, oranssi, harmaa, keltainen ja koralli. Laivastonsininen toimii lähes neutraalina värinä.
- Violetti: harmaa, liila, kulta, salvianvihreä ja valkoinen.
- Vaaleanpunainen: harmaa, laivastonsininen, oliivinvihreä, valkoinen ja kulta.
- Ruskea: kerma, vihreä, petrolinsininen, oranssi ja luunvalkoinen.
Huomaat varmasti, että neutraalit värit ovat mukana lähes jokaisessa listassa. Ne ovat voimakkaan värin varmin pari.
Näin luot oman yhdistelmän
- Valitse pääväri sen mukaan, mitä haluat ilmaista.
- Etsi toissijainen väri väriympyrästä: naapuri rauhalliseen tyyliin, vastaväri erottuvaan.
- Lisää yksi tai kaksi neutraalia väriä.
- Valitse korosteväri tärkeimmälle asialle.
- Testaa väripalettia oikeassa esimerkissä: verkkosivulla, esityksen dialla tai valokuvassa huoneesta.
Jos epäröit, käytä vähemmän värejä. Kolmesta viiteen väriä riittää lähes kaikkiin projekteihin.
Yleisiä virheitä värien kanssa
- Liikaa värejä. Tulos näyttää sekavalta, eikä mikään erotu.
- Kaikki värit yhtä tärkeinä. Ilman hallitsevaa väriä silmä ei tiedä, mihin katsoa.
- Kontrastin unohtaminen. Tekstiä, jota ei pysty lukemaan, tai painikkeita, joita kukaan ei huomaa.
- Kaikki kylläisenä. Hyvin voimakkaat värit väsyttävät. Yhdistä ne pehmeämpiin sävyihin.
- Asiayhteyden sivuuttaminen. Väri näyttää erilaiselta päivänvalossa, näytöllä ja paperilla.
- Kopioiminen soveltamatta. Väripaletti, joka toimii yhdelle brändille, ei välttämättä sovi sinun kohderyhmällesi.
- Eri lämpöisten neutraalien sekoittaminen. Kylmä harmaa lämpimän beigen vieressä voi näyttää likaiselta. Valitse neutraalit värit samasta perheestä.
- Testaamatta jättäminen useilla näytöillä. Väri voi olla kaunis tietokoneella ja haalea puhelimessa. Tarkista se aina useammalla kuin yhdellä laitteella.