# Neutraalit väripaletit, joissa on luonnetta

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

Beige, harmaa ja valkoinen voivat näyttää arvokkailta tai siltä, ettei kukaan tehnyt valintaa. Eron tekevät lämpötila, sävyjen vaihtelu ja pieni yllätys. Tässä kahdeksan neutraalia palettia koodeineen ja ohjeet elävään ilmeeseen.

## The short version

- Neutraali väripaletti koostuu vähäkylläisistä väreistä, kuten valkoisesta, norsunluusta, beigestä, taupesta, harmaasta, hiilenharmaasta ja lähes mustasta.
- Neutraaleillakin väreillä on lämpötila: lämpimät taittuvat keltaiseen, punaiseen tai ruskeaan, viileät siniseen tai vihreään.
- Neutraali paletti näyttää lattealta, jos kaikki värit ovat yhtä vaaleita, joten mukaan tarvitaan vähintään yksi hyvin vaalea, yksi keskisävy ja yksi hyvin tumma sävy.
- Useimmat neutraalit paletit tarvitsevat yhden pieninä määrinä käytettävän tehostevärin, johon katse voi pysähtyä.
- Taupen ja kiven kaltaiset keskisävyt eivät yleensä tarjoa leipätekstille riittävää kontrastia vaalealla pohjalla, joten käytä tekstissä tumminta sävyä.

Hyvä **neutraali väripaletti** käyttää hyvin vähäkylläisiä värejä, kuten norsunluuta, hiekkaa, taupea, kivenharmaata, hiilenharmaata ja lähes mustaa. Luonnetta se saa kolmesta asiasta: selkeästä lämpötilasta, koko vaaleasta tummaan ulottuvasta sävyasteikosta ja pienestä tehosteväristä. Ilman niitä beige näyttää oletusvalinnalta. Alla on kahdeksan palettia kopioitavine koodeineen sekä perustelut, joiden avulla voit soveltaa niitä pelkän kopioinnin sijaan.

## Lämpimät, viileät ja aidosti neutraalit sävyt

Harva neutraali sävy on täysin väritön, ja värittömätkin voivat tuntua kylmiltä. Useimmat taittuvat johonkin suuntaan, mikä määrittää tunnelman. Lämpimän beigen ja viileän siniharmaan tahaton yhdistelmä on yleisin syy neutraalin värimaailman hienoiseen ristiriitaan.

| Ryhmä | Sävy taittuu | Tunnelma | Esimerkkikoodit |
| --- | --- | --- | --- |
| Lämpimät neutraalit | Keltainen, punainen, ruskea | Pehmeä, eletty, vieraanvarainen | Norsunluu `#F3EEE6`, hiekka `#D9CBB4`, taupe `#8A8178` |
| Viileät neutraalit | Sininen, vihreä | Selkeä, tekninen, hiljainen | Sumu `#ECEEEF`, liuskekivi `#6B7075`, grafiitti `#1F2326` |
| Greige | Harmaan ja beigen tasapaino | Rauhallinen, mukautuva | Greige `#BDB6AC`, kivi `#A39A8F` |
| Puhdas harmaa | Lähes väritön | Neutraali, joskus kylmä | `#F2F2F2`, `#8C8C8C`, `#222222` |

Valitse pohjaksi yksi ryhmä. Vastakkaisen ryhmän yksittäinen väri voi toimia tarkoituksellisena tehosteena, mutta vältä vahingossa lähes sopivia sävyjä.

[Lämpimät ja viileät värit](https://gradiently.design/fi/guide/warm-and-cool-colors) käsittelee lämpötilaa tarkemmin, ja [värilämpötila](https://gradiently.design/fi/guide/color-temperature) kertoo valaistuksen ja näyttöjen vaikutuksesta siihen.

## Kahdeksan neutraalia palettia hex-koodeineen

Jokaisessa paletissa on vaalea pohja, yksi tai kaksi keskisävyä, tumma tekstiväri ja useimmiten tehosteväri. Lue nimiä suunnitteluohjeina: ne kuvaavat ympäristöä, johon paletti sopisi.

- Pellava: #f3eee6
- Hiekka: #d9cbb4
- Taupe: #8a8178
- Espresso: #2b2724
- Terrakottatehoste: #b5543a

Galleriakahvila. Lämmin pohjasta tekstiin, terrakottaa yhdessä painikkeessa, hinnassa tai viivassa.

- Sumu: #eceeef
- Tina: #c3c8cc
- Liuskekivi: #6b7075
- Grafiitti: #1f2326
- Kirkas sininen tehoste: #3d6bff

Ohjelmistostudio. Viileitä harmaita ja yksi kylläinen sininen, klassinen käyttöliittymän väripaletti.

- **Kaura ja oliivi:** kaura `#E9E1D2`, pellava `#CDBF9F`, oliivi `#6E6B4A`, kaarna `#2F2A22`. Luonnollinen ilman vihreiden lehtien kliseetä.
- **Kivitalo:** liitu `#F5F3EF`, greige `#BDB6AC`, kivi `#A39A8F`, hiilenharmaa `#34312D`, messinki `#B08D57`. Sisustus, arkkitehtuuri, hillitty ylellisyys.
- **Paperi ja muste:** paperi `#FAF7F0`, sanomalehtipaperi `#E4DED2`, lyijykynä `#5C544C`, muste `#151515`, toimituksen punainen `#C8372D`. Toimituksellinen ja vakaa.
- **Merilasiharmaa:** usva `#EEF1EF`, merilasi `#B9C6C0`, satama `#5E6F6A`, syvyys `#1C2624`. Viileä, mutta vihreän pehmentämä.
- **Puuteriset neutraalit:** posliini `#F7F0EC`, punertava kivi `#DCC7BE`, mauvetaupe `#8C7470`, kaakao `#33221F`. Lämmin ja lempeä, sopii kauneus- ja hyvinvointialalle.
- **Yön neutraalit:** onyksi `#121212`, savu `#2A2826`, tuhka `#77716B`, luu `#E9E2D6`. Tumma pohja ja lämmin vaalea teksti.

Testaa palettia oikealla aineistolla ennen valintaa. Aseta logo, tuotekuva ja tekstikappale jokaiselle pohjavärille. Valokuvilla on usein oma lämmin tai viileä sävynsä. Kuviesi kanssa riitelevä paletti ei tunnu rauhalliselta, vaikka valitsisit sen kuinka huolellisesti.

## Näin annat neutraalille paletille luonnetta

1. **Valitse lämpötila** Valitse lämmin tai viileä linja ja vertaa jokaista väriä siihen. Aseta värinäytteet rinnakkain: lämpimän beigen vieressä hieman vihertävältä näyttävä sävy kuuluu väärään ryhmään.
2. **Laajenna sävyasteikkoa** Ota mukaan lähes valkoinen, keskisävy ja lähes musta. Pelkistä keskivaaleista beigeistä koostuvassa paletissa ei ole syvyyttä eikä luettavaa tekstiväriä.
3. **Lisää yksi tehoste** Yksi kylläinen väri pieninä annoksina antaa katseelle kohteen. [Tehosteväri](https://gradiently.design/fi/guide/accent-color) näyttää, mikä määrä riittää.
4. **Tuo mukaan tekstuuria** Neutraalit näyttävät rikkaimmilta rakeisuuden, paperipinnan tai pehmeän valovaihtelun kanssa. Tasainen beige suorakulmio näyttää keskeneräiseltä, mutta pieni pinnan karheus tekee siitä materiaalin.
5. **Muuta suhteita, älä lisää värejä** Suurin osa pinnasta pysyy vaaleana, keskisävyt täyttävät suuret muodot ja tumma kantaa sanat. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) on toimiva lähtöjako.

## Neutraalit liukuvärit, jotka eivät tylsistytä

Neutraali liukuväri toimii, kun vaihtelu tapahtuu valoisuudessa eikä värisävyssä. Ajattele rapatulle seinälle lankeavaa päivänvaloa: väri muuttuu tuskin lainkaan, kirkkaus muuttuu. Pidä väripisteet lähellä toisiaan ja lisää rakeisuutta häivyttämään porrastumista, joka näkyy helposti vaaleissa, vähäkontrastisissa liu’uissa.

- Valo rappauksella: `radial-gradient(circle at 25% 20%, #fbf8f3 0%, #eae1d3 50%, #cdbf9f 100%)`
- Pilvipäivä: `linear-gradient(170deg, #eceeef 0%, #c3c8cc 60%, #8f969b 100%)`
- Espressohämärä: `radial-gradient(circle at 70% 30%, #5c544c 0%, #2b2724 50%, #121212 100%)`
- Punertava kivi: `linear-gradient(160deg, #f7f0ec 0%, #dcc7be 55%, #b5948a 100%)`

Neljä neutraalia liukuväriä. Vaihtelu tapahtuu pääosin valoisuudessa, mikä pitää ne rauhallisina.

Lisää esimerkkejä: [hienovaraiset liukuvärit](https://gradiently.design/fi/guide/subtle-gradients), [beiget liukuvärit](https://gradiently.design/fi/guide/beige-gradient) ja [harmaat liukuvärit](https://gradiently.design/fi/guide/grey-gradient).

## Teksti ja kontrasti neutraalilla taustalla

Neutraalit paletit näyttävät lempeiltä, mikä houkuttelee lempeään tekstiväriin. Taupe `#8A8178` pellavalla `#F3EEE6` antaa kontrastiksi vain 3,31:1, alle WCAG:n leipätekstiltä vaatiman 4,5:1:n. Espresso `#2B2724` samalla pellavalla yltää 12,82:1:een. Käytä tumminta neutraalia kaikkeen, mikä pitää lukea. Säästä keskisävyt muotoihin, reunuksiin ja suuriin otsikoihin.

Pehmeän neutraali leipomon pystyjulkaisu, jonka pieni lisäteksti erottuu heikosti

Vaalealla neutraalilla pohjalla heikkokontrastisen tekstin pieni lisärivi katoaa ensimmäisenä.

Sama leipomon julkaisu, jossa selkeä teksti erottuu neutraalin taustan rauhallisemmalta alueelta

Kun tausta rauhoittuu sanojen takana, jokainen rivi erottuu ja paletti pysyy pehmeänä.

Gradiently hoitaa tämän automaattisesti: Mark rauhoittuu sanojesi taakse ja valitsee kullekin riville vaalean tai tumman tekstivärin omasta paletistaan. Hillitty neutraali tausta ei siis heikennä luettavuutta. Tarkista omat väriparisi [värikontrastin oppaasta](https://gradiently.design/fi/guide/color-contrast-accessibility).

## FAQ

### Mitä värejä neutraaliin väripalettiin kuuluu?

Valkoinen, norsunluu, kerma, beige, hiekka, taupe, greige, harmaa, hiilenharmaa ja lähes musta sekä niiden hieman sävytetyt versiot. Useimmissa neutraaleissa paleteissa on myös yksi tehosteväri.

### Mitä greige on?

Greige on harmaan ja beigen yhdistelmä, joka asettuu lämpimän ja viileän välille, esimerkiksi `#BDB6AC`. Se toimii siltana, kun paletin pitää sopia sekä lämpimiin että viileisiin ympäristöihin.

### Mikä tehosteväri sopii neutraaleihin?

Lämpimille neutraaleille sopivat terrakotta, ruoste, oliivi tai messinki. Viileille sopivat kylläinen sininen, selkeä vihreä tai syvä punainen. Käytä tehostetta säästeliäästi, jotta se säilyy erityisenä.

### Miten estän neutraalia palettia näyttämästä tylsältä?

Valitse yksi lämpötila, ulota asteikko vaaleasta tummaan, lisää yksi tehoste ja anna pinnoille tekstuuria. Tasaiset keskibeiget ilman sävyvaihtelua näyttävät tylsiltä.

### Sopivatko neutraalit värit brändiin?

Kyllä, erityisesti arvokkaisiin, toimituksellisiin ja sisustusalan brändeihin. Monet brändit käyttävät neutraaleja, joten anna omallesi tunnistettava tehoste, kirjasin tai taustamateriaali.