Lyhyesti
- Väriteoria on joukko käytännön ajatuksia siitä, miten värit liittyvät toisiinsa, yhdistyvät ja vaikuttavat siihen, mitä ihmiset näkevät ensin.
- Jokaisen värin voi kuvata kolmella ominaisuudella: sävy on värin perhe, kylläisyys kertoo sen voimakkuuden ja vaaleus sen, kuinka lähellä se on valkoista tai mustaa.
- Vaaleuskontrasti on tärkeämpi luettavuudelle kuin sävykontrasti, minkä vuoksi suunnitelman pitäisi toimia myös harmaasävyillä.
- Väriharmoniat kuten vastavärit, analogiset, triadiset ja yksivärinen ovat väriympyrän kohtia, jotka näyttävät luotettavasti tasapainoisilta.
- Useimmissa hyvissä paleteissa on yksi hallitseva väri, yksi tai kaksi tukevaa väriä ja yksi pieni korostus.
Tällä sivulla
Väriteoria on joukko käytännön ajatuksia, joilla suunnittelijat valitsevat värejä, jotka toimivat yhdessä ja tekevät sen, mitä niiden pitää tehdä. Se tiivistyy kuuteen asiaan: sävy, kylläisyys, vaaleus, lämpötila, harmonia ja kontrasti. Ymmärrä ne, ja voit selittää, miksi paletti tuntuu rauhalliselta tai äänekkäältä, miksi jokin teksti on vaikea lukea ja miksi kaksi väriä on ristiriidassa.
Tämä sivu on lähtökohta jokaiselle oppaan väriartikkelille. Jokainen osio linkittää syvempään, kun tarvitset sitä.
Sävy, kylläisyys ja vaaleus
Minkä tahansa värin voi kuvata kolmella ominaisuudella. Sävy on värin perhe: punainen, oranssi, vihreä, sininen. Kylläisyys (myös kroma) kertoo, kuinka voimakas väri on, harmaasta eloisaan. Vaaleus kertoo, kuinka lähellä väri on mustaa tai valkoista. Muuta yhtä pitäen muut samoina, niin näet, mitä kukin tekee.
Nämä kolme ovat tapa, jolla värikoodit kuten HSL ja OKLCH kuvaavat väriä, mikä tekee niistä helppoja säätää koodissa. Värikoodit selitettynä kattaa heksan, RGB:n, HSL:n ja OKLCH:n.
Lämpimät ja viileät värit
Väreillä on myös lämpötila. Punaiset, oranssit ja keltaiset tuntuvat lämpimiltä. Siniset, vihreät ja violetit tuntuvat viileiltä. Lämpimät värit tuntuvat yleensä lähempänä ja energisempinä, viileät kauempana ja rauhallisempina. Lämpötila on kuitenkin suhteellinen: violetti, jossa on paljon punaista, voi tuntua lämpimältä puhtaan sinisen vieressä.
Lämpimät ja viileät värit menee pidemmälle, mukaan lukien lämpötilojen sekoittaminen yhdessä liukuvärissä.
Väriharmonia ja väriympyrä
Aseta sävyt ympyrään, ja jotkin suhteet näyttävät luotettavasti tasapainoisilta. Nämä ovat väriharmonioita. Ne eivät ole sääntöjä, mutta ne ovat hyviä lähtökohtia, kun olet epävarma. Väriympyrä -opas selittää, miten ne luetaan.
| Harmonia | Missä värit ovat | Miltä se tuntuu |
|---|---|---|
| Yksivärinen | Yksi sävy useissa vaaleuksissa | Rauhallinen, yhtenäinen, hienostunut |
| Analogiset | Naapurit väriympyrällä | Sopusointuinen, luonnollinen, helppo |
| Vastavärit | Vastakkain toisiaan | Korkea kontrasti, energinen |
| Jaetut vastavärit | Yksi sävy ja kaksi sen vastakohdan vieressä olevaa | Elävä mutta vähemmän jännittynyt |
| Triadiset | Kolme tasavälein sijaitsevaa sävyä | Leikkisä, tasapainoinen, rohkea |
Kontrasti: miksi jotkin värit ovat vaikeita lukea
Kontrasti on ero kahden värin välillä. Lukemisessa tärkein ero on vaaleus, ei sävy. Punainen teksti vihreällä taustalla voi olla kaksi hyvin erilaista sävyä ja silti vaikea lukea, koska molemmat voivat olla vaaleudeltaan samanlaisia. Monet värinäön poikkeamaa sairastavat eivät erota niitä lainkaan.
Vain sävykontrasti
- Punainen vihreällä, samanlaisella vaaleudella
- Sininen violetilla
- Oranssi pinkillä
- Katoaa muunnettaessa harmaasävyiksi
Vaaleuskontrasti
- Lähes valkoinen syvällä laivastonsinisellä
- Lähes musta vaaleankeltaisella
- Tumma muste vaalealla pastellilla
- Luetaan yhä harmaasävyillä
Harmaasävytesti on nopein tarkistus: muuta suunnitelmasi harmaaksi ja katso, erottuvatko sanat yhä. Tekstille Web Content Accessibility Guidelines asettaa kontrastisuhteiden vähimmäisarvot: 4,5:1 leipätekstille ja 3:1 suurelle tekstille. Värikontrasti selittää, miten ne mitataan.
Suhteet: kuinka paljon kutakin väriä
Samat viisi väriä voivat näyttää rauhallisilta tai kaoottisilta sen mukaan, kuinka paljon kutakin käytät. Hyödyllinen oletus on yksi hallitseva väri, joka kattaa suurimman osan tilasta, yksi tai kaksi tukevaa väriä ja pieni korostus asialle, jonka haluat huomattavan. 60-30-10-sääntö on tämän ajatuksen tavallinen versio.
Mitä värit tarkoittavat
Väreillä on mielleyhtymiä, mutta ne ovat opittuja, eivät sisäänrakennettuja, ja ne vaihtelevat kulttuurin ja asiayhteyden mukaan. Vihreä voi tarkoittaa luontoa, rahaa tai lähtöä, punainen vaaraa, onnea tai alennusmyyntiä. Kohtele merkitystä kysymyksenä yleisöstäsi ja kategoriastasi kiinteän sanakirjan sijaan. Värien psykologia erottaa sen, mikä pitää, siitä, mikä ei, ja värien merkitykset maailmalla näyttää, kuinka paljon ne eroavat.
Väriteorian ottaminen käyttöön
- 1
Aloita yhdestä väristä
Valitse väri, jolla on eniten merkitystä: brändivärisi tai valokuvasta poimittu. Paletin poimiminen kuvasta auttaa.
- 2
Valitse harmonia
Päätä, pitäisikö paletin olla rauhallinen (yksivärinen tai analoginen) vai energinen (vastavärit tai triadinen).
- 3
Rakenna vaaleusalue
Lisää hyvin tumma ja hyvin vaalea versio tekstille ja taustoille. Useimmat paletit epäonnistuvat niiden puutteessa.
- 4
Määritä suhteet
Päätä, mikä väri hallitsee, mikä tukee ja mikä on korostus.
- 5
Testaa kontrasti ja asiayhteys
Tarkista tekstin kontrasti, tee harmaasävytesti ja katso palettia oikeassa asettelussa, ei vain värinäytteinä.
Brändityössä miten valitset brändivärit muuttaa nämä vaiheet täydeksi menetelmäksi.
Usein kysyttyä
Mitä väriteoria on?
Väriteoria on joukko käytännön ajatuksia siitä, miten värit liittyvät toisiinsa, yhdistyvät sopusointuisiksi paleteiksi ja miten kontrasti vaikuttaa siihen, mitä ihmiset näkevät ja lukevat.
Mitkä ovat värin kolme ominaisuutta?
Sävy eli värin perhe, kylläisyys eli kuinka voimakas tai harmaa se on ja vaaleus eli kuinka lähellä se on mustaa tai valkoista.
Mitkä ovat tärkeimmät väriharmoniat?
Yksivärinen, analoginen, vastavärit, jaetut vastavärit ja triadinen. Jokainen kuvaa, missä värit ovat väriympyrällä toisiinsa nähden.
Kumpi on tärkeämpi luettavuudelle, sävy vai vaaleus?
Vaaleus. Teksti tarvitsee selvän vaaleuseron taustaansa nähden, minkä vuoksi luettava suunnitelma toimii yhä muunnettuna harmaasävyiksi.
Onko väreillä yleismaailmallisia merkityksiä?
Ei. Värimielleyhtymät ovat opittuja ja eroavat kulttuurien, kategorioiden ja asiayhteyksien välillä, joten tarkista ne yleisösi suhteen.
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
