# Analogiset värit: helpoin tie rauhalliseen palettiin

[Canonical HTML page](https://gradiently.design/fi/guide/analogous-colors)

Valitse kolme naapuria väriympyrältä, niin epäonnistuminen on melkein mahdotonta. Taito on siinä, että annat niille tarpeeksi kontrastia pysyäksesi mielenkiintoisena ja tiedät, milloin rauha kannattaa rikkoa.

## The short version

- Analogiset värit ovat sävyjä, jotka ovat väriympyrällä vierekkäin, kuten sininen, petrooli ja vihreä.
- Koska naapurisävyillä on niin paljon yhteistä, analogiset paletit tuntuvat rauhallisilta ja luonnollisilta, ja ne ovat helpoimmat paletit saada oikein.
- Analogiset värit tekevät sujuvimmat liukuvärit, koska naapurien välinen sävyvaihdos pysyy kylläisenä eikä muutu harmaaksi.
- Suurin riski on samanlaisuus, jonka vältät antamalla paletille laajan vaaleusalueen.
- Pieni korostus väriympyrän vastakkaiselta puolelta antaa analogiselle paletille kiintopisteen rikkomatta sen rauhaa.

**Analogiset värit** ovat sävyjä, jotka ovat vierekkäin väriympyrällä: sininen, petrooli ja vihreä tai punainen, oranssi ja keltainen. Koska jokainen jakaa jotain naapurinsa kanssa, ne näyttävät kuuluvan yhteen, kuten auringonlaskun tai matalan meren värit. Analoginen paletti on yleensä kolme tai viisi sävyä, jotka kattavat pienen kaaren ympyrästä, ja se on luotettavin tie rauhalliseen, yhtenäiseen ilmeeseen.

Tämä opas näyttää, miten rakennat sellaisen, miten estät sitä muuttumasta latteaksi ja miksi analogiset värit tekevät parhaat liukuvärit. Jos ympyrä on sinulle uusi, lue ensin [miten käytät väriympyrää](https://gradiently.design/fi/guide/color-wheel).

## Mikä tekee väreistä analogisia

Tiukkaa rajaa ei ole, mutta käytännöllinen ohje on, että analogiset sävyt mahtuvat noin neljännekseen ympyrää, karkeasti 90 asteeseen sävyä. Tiukka 30 asteen kaari tuntuu lähes yksiväriseltä. Yli 90 asteen laajuudella päät alkavat kontrastoida, ja paletti alkaa muistuttaa sateenkaarta.

| Kaari ympyrällä | Esimerkki | Tuntuu |
| --- | --- | --- |
| Noin 30 astetta | Sininen, sinertävä indigo | Lähes yksi väri, hyvin hiljainen |
| Noin 60 astetta | Sininen, taivas, petrooli | Sopusointuinen lempeällä vaihtelulla |
| Noin 90 astetta | Indigo, sininen, taivas, petrooli | Rikas, silti yhtenäinen |
| Yli 120 astetta | Violetista vihreään | Alkaa tuntua sateenkaarelta |

Miten kaaren leveys muuttaa analogisen paletin luonnetta.

- Indigo: #4f46e5
- Sininen: #2563eb
- Taivas: #0284c7
- Petrooli: #0d9488

Neljä naapuria, jotka kattavat noin 70 astetta indigosta petrooliin.

## Analogiset väripaletit koodeineen

Helpoin tapa nähdä analogiset värit on liukuvärinä, koska siinä ne loistavat. Jokainen näistä kulkee naapurisävyjen läpi ja vaalenee edetessään, mikä estää sitä tuntumasta latteelta.

- Kekäle: ruoste, oranssi, meripihka: `linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #fbbf24 100%)`
- Laguuni: sininen, petrooli, minttu: `linear-gradient(135deg, #1e3a8a 0%, #0e7490 50%, #34d399 100%)`
- Marja: violetti, magenta, pinkki: `linear-gradient(135deg, #4c1d95 0%, #a21caf 50%, #f472b6 100%)`
- Sananjalka: metsä, oliivi, lime: `linear-gradient(135deg, #14532d 0%, #3f6212 50%, #a3e635 100%)`
- Hämärä: muste, indigo, kanervansininen: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #818cf8 100%)`
- Sitrus: vihreä, kulta, oranssi: `linear-gradient(135deg, #4d7c0f 0%, #ca8a04 50%, #f97316 100%)`

Kuusi analogista liukuväriä. Jokainen kattaa lyhyen sävykaaren ja pitkän vaaleusalueen.

Huomaa, että lämpimät paletit (Kekäle, Marja, Sitrus) ja viileät (Laguuni, Sananjalka, Hämärä) pysyvät kukin yhdessä lämpötilassa. Se on suurin osa niiden rauhasta. Lämpimät analogiset paletit tuntuvat läheisiltä, eloisilta ja ruokahalua herättäviltä, mikä sopii ruokaan, majoitukseen ja tapahtumiin. Viileät tuntuvat avarilta ja tasaisilta, mikä sopii hyvinvointiin, rahoitukseen ja teknologiaan. [Lämpimät ja viileät värit](https://gradiently.design/fi/guide/warm-and-cool-colors) käsittelee lämpötilaa tarkemmin.

Monet parhaista analogisista paleteista tulevat suoraan luonnosta, koska ilman, veden tai lehtien läpi kulkeva valo siirtyy vähitellen naapurisävyjen kautta. Rantaviivan, metsänpohjan tai iltataivaan valokuva on valmis lähde. [Paletin poimiminen kuvasta](https://gradiently.design/fi/guide/color-palette-from-image) näyttää, miten sellaisen voi ottaa poimimatta mutaisia värejä.

## Miksi analogiset värit tekevät sujuvimmat liukuvärit

Kun liukuväri sekoittaa kaksi väriä, jokainen väliin jäävä piste on niiden sekoitus. Sekoita kaksi naapuria, ja sekoitus on yksinkertaisesti niiden välinen sävy, yhä kylläinen. Sekoita kaksi vastakohtaa, ja sekoitus kumoutuu kohti harmaata. Siksi [komplementtiväriliukuvärit](https://gradiently.design/fi/guide/complementary-colors) tarvitsevat auttavan pysähdyskohdan keskelle, ja analogiset eivät koskaan.

- Naapurit: sinisestä petroolin: `linear-gradient(90deg, #2563eb 0%, #0d9488 100%)`
- Vastakohdat: sinisestä oranssiin: `linear-gradient(90deg, #2563eb 0%, #ea580c 100%)`

Ensimmäinen pysyy puhtaana koko matkan. Toinen kulkee tylsän, harmahtavan keskikohdan kautta.

Tämä tekee analogisista sekoituksista turvallisen valinnan tekstin taustoiksi, brändialueiksi ja suuriksi pinnoiksi. Tylsästä keskikohdasta lisää artikkelissa [mutaiset liukuvärit](https://gradiently.design/fi/guide/muddy-gradients).

## Miten rakennat analogisen paletin

1. **Valitse hallitseva sävy** Aloita värillä, jolla on eniten merkitystä. Se peittää suurimman osan suunnitelmasta.
2. **Lisää yksi tai kaksi naapuria kummallekin puolelle** Pysy noin 60 ja 90 asteen välillä. Kallistuminen yhdelle puolelle antaa paletille suunnan: kohti lämmintä tai kohti viileää.
3. **Levitä vaaleus** Tee yhdestä väristä syvä ja yhdestä vaalea. Se estää analogista palettia näyttämästä yhdeltä tahriutuneelta väriltä.
4. **Vaihtele kylläisyyttä** Hillitse tukivärejä hieman, jotta hallitseva väri erottuu johtajana.
5. **Päätä korostuksesta** Jos suunnitelma tarvitsee kiintopisteen, lisää pieni määrä väriä ympyrän vastakkaiselta puolelta.

## Korostuksen lisääminen analogiseen palettiin

Analogisen paletin rauha on myös sen heikkous: mikään ei erotu. Kun painikkeen, hinnan tai avainsanan täytyy näkyä, lainaa väri ympyrän toiselta puolelta ja käytä sitä hyvin vähän. Suunnittelijat kutsuvat tätä joskus nimellä analoginen plus korostus. Korostus toimii juuri siksi, että kaikki muu on yhtä mieltä.

- Syvä laivastonsininen: #0c1a3a
- Sininen: #1d4ed8
- Petrooli: #0e7490
- Vaalea minttu: #99f6e4
- Korostus: aprikoosi: #fb923c

Viileä analoginen perhe laivastonsinisestä minttuun, ja yksi lämmin korostus vastakkaiselta puolelta.

Pystysuuntainen tuoteilmoitus, jossa otsikko on rauhallisella, sekoitetulla taustalla

Analogiset alueet kantavat tekstiä rauhallisesti, mikä sopii tuote- ja toimituksellisiin julkaisuihin.

## Yleisiä virheitä analogisissa paleteissa

### Vältä

- Kaikki värit samalla vaaleudella
- Niin leveä kaari, että siitä tulee sateenkaari
- Lämpimän ja viileän kallistuksen sekoittaminen ilman suunnitelmaa
- Teksti paletin keskisävyllä

### Tee näin

- Syvä, keskisävy ja vaalea väri
- Kolme tai viisi sävyä noin 90 asteen sisällä
- Yksi selvä lämpötila
- Teksti tummimmalla tai vaaleimmalla värillä

Jos haluat vielä enemmän yhtenäisyyttä, kavenna kaari yhteen sävyyn, niin sinulla on [yksivärinen paletti](https://gradiently.design/fi/guide/monochromatic-color-scheme). Jos haluat enemmän energiaa, siirry [triadipalettiin](https://gradiently.design/fi/guide/triadic-colors).

## FAQ

### Mitä ovat analogiset värit?

Analogiset värit ovat sävyjä, jotka ovat väriympyrällä vierekkäin, kuten sininen, petrooli ja vihreä tai punainen, oranssi ja keltainen.

### Kuinka monta väriä analogisessa skeemassa on?

Yleensä kolme tai viisi sävyä noin neljänneksen sisällä väriympyrästä, yksi hallitseva ja loput tukena.

### Miksi analogiset värit näyttävät hyviltä liukuväreissä?

Kahden naapurisävyn sekoitus on yksinkertaisesti niiden välinen sävy, joten sävyvaihdos pysyy kylläisenä eikä muutu keskeltä harmaaksi.

### Miten estän analogista palettia näyttämästä latteaa?

Anna sille laaja vaaleusalue, vaihtele kylläisyyttä hieman ja lisää tarvittaessa pieni korostus väriympyrän vastakkaiselta puolelta.