Lyhyesti
- Vastavärit ovat pareja, jotka sijaitsevat suoraan vastakkain väriympyrällä, kuten sininen ja oranssi.
- Rinnakkain täydellä voimalla ja samanlaisella vaaleudella asetettuina vastavärit näyttävät värähtelevän yhteisellä reunallaan.
- Luotettavin tapa käyttää vastavärejä on antaa toisen hallita ja käyttää toista pienenä korostuksena.
- Parin toisen värin vaaleuden tai kylläisyyden muuttaminen säilyttää kontrastin mutta poistaa törmäyksen.
- Suora liukuväri kahden vastavärin välillä muuttuu yleensä harmaaksi keskeltä, minkä keskipisteen väri tai OKLCH-interpolointi korjaa.
Tällä sivulla
Vastavärit ovat kaksi sävyä, jotka sijaitsevat suoraan vastakkain väriympyrällä, kuten sininen ja oranssi, punainen ja vihreä tai keltainen ja violetti. Kumpikin saa toisen näyttämään voimakkaammalta, minkä vuoksi vastaväriparit antavat vahvimman saatavilla olevan värikontrastin. Varovasti käytettynä tuo kontrasti tekee yksittäisestä elementistä mahdottoman ohittaa. Tasaisesti ja täydellä voimalla käytettynä se tekee suunnitelmasta epämukavan katsoa.
Se, mitkä parit lasketaan vastaväreiksi, riippuu ympyrästä. Maalarin ympyrä yhdistää sinisen oranssiin, näytön ympyrä sinisen keltaiseen. Väriympyrä -opas selittää eron. Alla olevat parit ovat niitä, joita suunnittelijat käyttävät eniten.
Vastaväriparit koodeineen
| Pari | Väri A | Väri B | Tuntuu |
|---|---|---|---|
| Sininen ja oranssi | #1d4ed8 | #f97316 | Energinen, urheilullinen, selkeä |
| Laivastonsininen ja kulta | #1e3a8a | #d4a017 | Klassinen, vakiintunut |
| Punainen ja vihreä | #b91c1c | #15803d | Juhlava, luonnollinen, äänekäs |
| Violetti ja keltainen | #6d28d9 | #facc15 | Leikkisä, sähköinen |
| Petrooli ja koralli | #0f766e | #fb7185 | Raikas, lämmin, moderni |
| Luumu ja salvia | #581c87 | #a3b18a | Vaimea, editoriaalinen |
Miksi vastavärit värähtelevät
Aseta kaksi samanlaisen vaaleuden ja täyden kylläisyyden vastaväriä vierekkäin, ja niiden välinen reuna näyttää välkkyvän. Silmäsi eivät löydä paikkaa, jossa toinen päättyy. Vaikutus on voimakkain punaisella ja vihreällä tai sinisellä ja oranssilla yhtä suurella voimakkuudella, ja se tekee toisella värillä toisen päällä olevasta tekstistä hyvin vaikeaa luettavaa.
Korjaus ei melkein koskaan ole sävyjen muuttaminen. Tee toisesta paljon tummempi tai vaaleampi tai paljon vähemmän kylläinen. Pari pysyy vastaväreinä, mutta reuna lakkaa taistelemasta. Tämä ratkaisee myös luettavuuden, koska teksti tarvitsee vaaleuskontrastia enemmän kuin sävykontrastia. Katso värikontrasti.
Miten käytät vastavärejä: yksi johtaa, yksi korostaa
Luotettavin lähestymistapa on antaa yhdelle värille suurin osa tilasta ja toiselle pieni, tärkeä tehtävä: painike, hinta, yksittäinen sana, tarra. Korostus vetää katseen, koska se on ainoa laatuaan. Puoliksi ja puoliksi jakaa sen sijaan huomion eikä näytä juuri koskaan suunnitellulta.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- Hallitseva väri: taustat, suuret muodot, suurin osa pinnasta. Yleensä parin tummempi tai hiljaisempi.
- Korostusväri: toimintakehotukset, korostukset, yksi avainluku. Yleensä kirkkaampi.
- Neutraalit: lähes valkoinen, lähes musta tai lämmin harmaa antamaan tilaa molemmille. Harva hyvä vastaväreihin perustuva suunnitelma on vain kaksivärinen.
- Suhdeohje: 60-30-10-sääntö on hyödyllinen lähtökohta, vastavärinä 10.
Vastavärien liukuvärit ilman harmaata keskikohtaa
Häivytä kaksi vastaväriä suoraan, ja puoliväli muuttuu harmaaksi tai ruskeaksi. Useimpien työkalujen käyttämässä sRGB-väriavaruudessa kahden vastavärin punaisen, vihreän ja sinisen arvot keskiarvoistuvat lähelle neutraalia. Se on yksi yleisimmistä liukuvärivirheistä.
Kaksi vahvinta korjausta ovat keskipisteen pysäytys parin välissä olevassa sävyssä ja interpolointi OKLCH:ssa, joka kulkee väriympyrää pitkin sen poikki leikkaamisen sijaan. Mutaiset liukuvärit ja OKLCH-liukuvärit CSS:ssä selittävät kummankin tarkemmin.
Missä vastaväripaletit toimivat parhaiten
Vastavärit sopivat työhön, joka pitää huomata nopeasti ja lukea kaukaa. Ne sopivat huonommin pitkään lukemiseen, rauhallisiin sisustuksiin tai kaikkeen, minkä pitäisi tuntua hiljaiselta, missä analogiset värit toimivat paremmin.
- Toimintakehotukset. Lämmin painike viileällä sivulla tai päinvastoin on klassinen käyttö. Se löytyy etsimättä.
- Urheilu ja tapahtumat. Joukkueasut, julisteet ja liput käyttävät vastakkaisia värejä, koska ne luetaan stadionin tai kadun toiselta puolelta.
- Ruoka ja vähittäiskauppa. Ruoan tyylittelyssä lämpimät annokset asetetaan usein viileitä lautasia tai taustoja vasten, jotta ne nousevat esiin. Pakkauksen vastavärinen alennustarra erottuu hyllyllä.
- Data ja kartat. Kaksi vastakkaista sävyä näyttää vertailun kaksi puolta selvästi, kunhan nimiöt tukevat niitä lukijoille, jotka näkevät värit eri tavalla.
- Muotokuvat ja tuotekuvat. Kohteen pääsävyn vastavärinen tausta erottaa sen ilman kovaa ääriviivaa.
Vältettävät vastavärivirheet
Vältä
- Yhtä suuret määrät molempia värejä
- Toisen vastavärin teksti toisen taustalla
- Molemmat värit täydessä kylläisyydessä ja samanlaisessa vaaleudessa
- Suora liukuväri parin välillä
Tee näin
- Yksi hallitseva väri ja yksi pieni korostus
- Teksti lähes valkoisella tai lähes mustalla neutraalilla
- Toinen väri syvempi, vaaleampi tai hiljaisempi kuin toinen
- Keskipisteen väri tai OKLCH-häivytys
Jos vastaväripari tuntuu liian jännittyneeltä tasapainotettunakin, kokeile jaettuja vastavärejä: yksi sävy sekä sen vastakohdan kummallakin puolella olevat kaksi. Se säilyttää energian ja pehmentää törmäystä. Triadiset ja jaetut vastaväripaletit näyttää miten.
Usein kysyttyä
Mitä vastavärit ovat?
Vastavärit ovat kaksi sävyä, jotka ovat vastakkain väriympyrällä, kuten sininen ja oranssi tai punainen ja vihreä. Yhdessä ne luovat vahvimman värikontrastin.
Mikä on sinisen vastaväri?
Perinteisellä maalarin ympyrällä se on oranssi. Digitaalisten työkalujen käyttämällä RGB-näytön ympyrällä se on keltainen.
Miksi vastavärit näyttävät värähtelevän?
Kun kaksi samanlaisen vaaleuden ja täyden kylläisyyden vastaväriä koskettaa toisiaan, silmä ei löydä paikkaa reunalle. Toisen värin tummentaminen, vaalentaminen tai kylläisyyden vähentäminen pysäyttää sen.
Miten teen liukuvärin vastavärien välille?
Lisää keskipysäytys kahden välissä olevaan sävyyn tai interpoloi OKLCH:ssa. Suora sRGB-häivytys vastavärien välillä muuttuu yleensä harmaaksi keskeltä.
Kuinka paljon kutakin vastaväriä pitäisi käyttää?
Anna toisen hallita ja käytä toista pienenä korostuksena, esimerkiksi noin 90 %:n ja 10 %:n suhteessa, neutraaleilla antaen tilaa molemmille.
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
