# Väriteorian perusteet ihmisille, jotka eivät suunnittele

[Canonical HTML page](https://gradiently.design/fi/guide/color-theory-basics)

Värien hyvään valintaan ei tarvita taidekoulua. Kuusi ajatusta selittää lähes jokaisen värivalinnan, ja jokaisen oppii muutamassa minuutissa.

## The short version

- 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.

**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.

- Sävy: värin perhe: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Kylläisyys: harmaasta violettiin: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Vaaleus: tummasta vaaleaan violettiin: `linear-gradient(90deg, #1e0a3c 0%, #7c3aed 50%, #ede9fe 100%)`

Kolme ominaisuutta, kolme liukua. Toinen ja kolmas pitävät saman sävyn ja muuttavat vain yhtä asiaa.

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ä](https://gradiently.design/fi/guide/color-codes-explained) 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ä.

- Tiili: #b91c1c
- Mandariini: #ea580c
- Aurinko: #facc15
- Petrooli: #0d9488
- Koboltti: #2563eb
- Violetti: #6d28d9

Kolme lämmintä väriä ja kolme viileää. Paletissa, joka sekoittaa molempia, yksi lämpötila yleensä johtaa.

[Lämpimät ja viileät värit](https://gradiently.design/fi/guide/warm-and-cool-colors) 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ä](https://gradiently.design/fi/guide/color-wheel) -opas selittää, miten ne luetaan.

| Harmonia | Missä värit ovat | Miltä se tuntuu |
| --- | --- | --- |
| [Yksivärinen](https://gradiently.design/fi/guide/monochromatic-color-scheme) | Yksi sävy useissa vaaleuksissa | Rauhallinen, yhtenäinen, hienostunut |
| [Analogiset](https://gradiently.design/fi/guide/analogous-colors) | Naapurit väriympyrällä | Sopusointuinen, luonnollinen, helppo |
| [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) | 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](https://gradiently.design/fi/guide/triadic-colors) | Kolme tasavälein sijaitsevaa sävyä | Leikkisä, tasapainoinen, rohkea |

Viisi harmoniaa, joihin törmäät useimmin.

- Yksivärinen sininen: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Analoginen: sininen, petrooli, vihreä: `linear-gradient(135deg, #1d4ed8 0%, #0891b2 50%, #059669 100%)`
- Vastavärit: sininen ja meripihka: `linear-gradient(135deg, #1d4ed8 0%, #db2777 50%, #f59e0b 100%)`
- Triadinen: vihreä, violetti, oranssi: `linear-gradient(135deg, #16a34a 0%, #7c3aed 50%, #ea580c 100%)`

Jokainen harmonia liukuvärinä. Vastaväripari tarvitsee keskipisteen värin, tai häivytys muuttuu harmaaksi.

## 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](https://gradiently.design/fi/guide/color-contrast-accessibility) 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ö](https://gradiently.design/fi/guide/60-30-10-rule) on tämän ajatuksen tavallinen versio.

- Hallitseva: tumma sininen: #0f172a
- Tuki: liuske: #334155
- Tuki: usva: #e2e8f0
- Korostus: oranssi: #f97316

Hallitseva tumma, kaksi hiljaista tukea ja yksi lämmin korostus. Korostus toimii, koska se on harvinainen.

## 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](https://gradiently.design/fi/guide/color-psychology) erottaa sen, mikä pitää, siitä, mikä ei, ja [värien merkitykset maailmalla](https://gradiently.design/fi/guide/color-meanings-around-the-world) 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](https://gradiently.design/fi/guide/color-palette-from-image) 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](https://gradiently.design/fi/guide/how-to-choose-brand-colors) muuttaa nämä vaiheet täydeksi menetelmäksi.

## FAQ

### 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.