# Hillityt väripaletit: pölyiset koodit rauhallisille brändeille

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

Salvia, pölyinen roosa, liuskekivi ja savi tuntuvat rauhallisilta, koska harmaa pehmentää niitä. Saat seitsemän palettia sekä keinon estää hillittyä värimaailmaa muuttumasta sumuksi.

## The short version

- Hillitty väripaletti koostuu väreistä, joiden kylläisyyttä on vähennetty yleensä harmaalla tai pienellä määrällä vastaväriä.
- Salvian, pölyisen roosan, liuskekivensinisen, malvan ja saven kaltaiset hillityt värit tuntuvat rauhallisilta, luonnollisilta ja aikuisilta.
- Hillityt värit ovat usein yhtä vaaleita, joten paletti tarvitsee yhden paljon tummemman värin tekstiin ja reunoihin.
- Salvianvihreä ja pölyinen roosa eroavat sävyltään mutta ovat lähes yhtä vaaleita. Siksi toisen värinen teksti toisen päällä ei ole luettavaa.
- CSS:n color-mix() oklch-väriavaruudessa hillitsee brändiväriä luotettavasti sekoittamalla siihen harmaata.

**Hillitty väripaletti** on värejä, joiden kylläisyyttä on vähennetty. Ne näyttävät pölyisiltä, pehmeiltä ja hieman harmailta puhtaiden sijaan. Tavallisia ovat salvia `#9CAF88`, pölyinen roosa `#C9A9A6`, liuskekivensininen `#6B7F99`, malva `#B48A9B` ja savi `#B5826B`. Ne sopivat rauhallisuutta ja harkintaa tavoitteleville brändeille: keramiikkaan, hyvinvointiin, paperituotteisiin, arkkitehtuuriin ja hitaaseen muotiin. Hillityt värit kuitenkin ajautuvat samaan vaaleuteen. Siksi hyvä paletti sisältää yhden jämäkän tumman värin pitämään sen koossa.

## Mikä tekee väristä hillityn

Värillä on kolme asetusta: sävy, kylläisyys ja vaaleus. Katso [sävy, kylläisyys ja kirkkaus](https://gradiently.design/fi/guide/hue-saturation-brightness). Hillitseminen vähentää kylläisyyttä mutta säilyttää tunnistettavan sävyn. Klassisia keinoja on kaksi: harmaan sekoittaminen, jota suunnittelijat kutsuvat harmaannukseksi, tai pieni määrä vastaväriä, kuten maalarit ovat aina tehneet. Molemmat vievät väriä kohti neutraalia.

### Puhdas

- Vihreä `#2ECC71`
- Pinkki `#FF5C8A`
- Sininen `#2F6BFF`
- Oranssi `#FF7A1A`

### Hillitty

- Salvia `#9CAF88`
- Pölyinen roosa `#C9A9A6`
- Liuskekivensininen `#6B7F99`
- Savi `#B5826B`

Hillitty ei ole sama kuin pastelli. Pastelliin lisätään valkoista, joten se pysyy puhtaana ja vaaleana. Hillittyyn väriin lisätään harmaata, joten se voi olla vaalea, keskivaalea tai tumma ja tuntuu aina hieman pölyiseltä. [Pastelliväripaletit](https://gradiently.design/fi/guide/pastel-color-palettes) ja [vaalennukset, harmaannukset ja tummennukset](https://gradiently.design/fi/guide/tints-tones-shades) avaavat eroa tarkemmin.

## Seitsemän hillittyä väripalettia heksakoodeineen

- Liitu: #eef0e8
- Salvia: #9caf88
- Pölyinen roosa: #c9a9a6
- Savi: #b5826b
- Sammalmuste: #2e3a2c

Puutarhastudio on paletti, jonka moni kuvittelee kuullessaan sanan hillitty. Sammalmuste ankkuroi muut neljä käyttökelpoisiksi.

- **Satama:** sumu `#E6E9EA`, liuskekivensininen `#6B7F99`, merenharmaa `#93A3A6`, köysi `#C2AD8E`, syvä laivastonsininen `#22303C`.
- **Keramiikka:** posliini `#F1E8DD`, savi `#B5826B`, tuhkalasite `#A7A39A`, rauta `#5B4A42`, uuninmusta `#231D1A`.
- **Laventelipöly:** usva `#F1EBE6`, malva `#B48A9B`, kanerva `#8E8AA6`, salvia `#9CAF88`, munakoiso `#4A3F4F`.
- **Oliivilehto:** kerma `#F2EDE1`, oliivi `#8A8A5C`, kuivattu yrtti `#B1A87F`, terrakotta `#A9674E`, kaarna `#3A3328`.
- **Pohjola:** lumi `#F2F3F1`, koivu `#D8D1C4`, jäkälä `#A3AE9D`, vuono `#5F7A80`, mänty `#24302E`.
- **Pölyinen hämärä:** pergamentti `#EFE6DA`, persikkapöly `#D9A88F`, ruusunruskea `#A06F6B`, luumunharmaa `#6E5866`, yö `#2A2329`.

Jokainen päättyy tummaan väriin. Se ei ole koriste. Ilman sitä ei ole tekstiväriä tai reunaa piirtävää sävyä, ja paletti näyttää aurinkoon jätetyltä valokuvalta.

## Miksi hillityt paletit muuttuvat sumuksi

Hillitseminen poistaa värien vahvimmat erot, joten vain vaaleus jää erottamaan niitä. Salvia `#9CAF88` ja pölyinen roosa `#C9A9A6` näyttävät kauniilta vihreän ja vaaleanpunaisen kontrastilta, mutta kontrastisuhde on 1,09:1. Ne ovat lähes yhtä vaaleita. Toisen värinen teksti toisen päällä on lukukelvotonta. Jopa salvia puhtaalla valkoisella yltää vain suhteeseen 2,36:1.

| Pari | Kontrasti | Käyttö |
| --- | --- | --- |
| Salvia pölyisellä roosalla | 1,09:1 | Kaksi vierekkäistä muotoa, ei koskaan tekstiä |
| Salvia valkoisella | 2,36:1 | Suuret muodot ja kuvitus |
| Liuskekivensininen valkoisella | 4,10:1 | Vain suuret otsikot |
| Pölyinen roosa ja teksti `#3A2A2A` | 6,29:1 | Leipäteksti, läpäisee AA:n |
| Sammalmuste `#2E3A2C` liidulla | 10,39:1 | Leipäteksti, läpäisee AAA:n |
| Munakoiso `#4A3F4F` usvalla | 8,40:1 | Leipäteksti, läpäisee AAA:n |

WCAG vaatii leipätekstille 4,5:1 ja suurelle tekstille 3:1. Hillityssä paletissa tumma ankkuri hoitaa kaiken luettavuuden.

Tarkista omat parisi [värikontrastin](https://gradiently.design/fi/guide/color-contrast-accessibility) ohjeilla. Hyvä tapa on muuttaa paletti hetkeksi harmaasävyiseksi: jos kahdesta väristä tulee sama harmaa, älä koskaan aseta toista toisen päälle.

## Minkä tahansa värin hillitseminen CSS:llä

Jos sinulla on kirkas brändiväri ja haluat rauhallisemman kumppanin, sekoita siihen harmaata uuden värin silmämääräisen valinnan sijaan. `color-mix()` oklch-väriavaruudessa pitää sävyn vakaana kylläisyyden laskiessa. Kaikki nykyiset suuret selaimet tukevat sitä.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Sekoittaminen keskiharmaaseen hillitsee muuttamatta sävyä. Oklch-muodossa noin 0,03-0,07 kroma tuntuu hillityltä ja 0,15 tai suurempi kirkkaalta.

[OKLCH selitettynä](https://gradiently.design/fi/guide/oklch-explained) kertoo, miksi tämä avaruus käyttäytyy HSL:ää tasaisemmin. [Kylläisyys suunnittelussa](https://gradiently.design/fi/guide/color-saturation) kertoo, milloin sitä kannattaa taas lisätä.

## Hillityt liukuvärit ja taustat

Hillityistä väreistä syntyy pehmeitä, rauhallisia liukuvärejä etenkin lähekkäisillä sävyillä ja yhdeltä puolelta tulevalla valolla. Lisää hieman rakeisuutta: vähäkontrastiset häivytykset raidoittuvat helposti, ja tekstuuri saa ne näyttämään pinnalta näyttöasetuksen sijaan.

- Salvia-aamu: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Persikkapöly: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Satamautu: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Malvailta: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Neljä hillittyä liukuväriä. Kukin käyttää naapurisävyjä, joten keskikohta ei muutu ruskeaksi.

Hillittyyn värimaailmaan voi lisätä yhden hieman vahvemman korostuksen, kuten terrakotan salvioiden joukkoon tai syvemmän petroolin harmaiden keskelle. Käytä sitä vain yhdessä osassa: hinnassa, painikkeessa tai päivämäärässä. Katse saa kiintopisteen rikkomatta rauhaa. Näin toimivat yleensä [maanläheiset väripaletit](https://gradiently.design/fi/guide/earth-tone-colors), joista hillityt värimaailmat lainaavat.

Keramiikkamalliston pystyjulkaisu tummalla tekstillä pehmeällä, pölyisellä taustalla

Keramiikkajulkaisu 1080×1350. Hillityt värit kantavat tunnelman, tumma teksti viestin.

Jos brändisi elää hillityissä väreissä, omalla rakeisuudella ja valolla varustettu tausta tekee paljon työtä. Gradientlyn Mark antaa pehmeän, erottuvan pinnan, joka pitää tekstin itse luettavana. Hillityssä värimaailmassa se merkitsee enemmän kuin missään muussa.

## FAQ

### Mikä on hillitty väripaletti?

Paletti, jonka värien kylläisyyttä on vähennetty. Värit näyttävät pehmeiltä, pölyisiltä ja hieman harmailta. Salvia, pölyinen roosa, liuskekivensininen ja savi ovat tavallisia esimerkkejä.

### Miten hillityt ja pastellivärit eroavat?

Pastellit tehdään valkoista lisäämällä, joten ne pysyvät vaaleina ja puhtaina. Hillittyihin väreihin lisätään harmaata, joten vaaleus voi vaihdella ja ilme tuntuu aina hieman pölyiseltä.

### Miten teen väristä hillitymmän?

Vähennä kylläisyyttä, sekoita harmaata tai lisää hieman vastaväriä. CSS:n `color-mix(in oklch, yourcolour 50%, #8c8c8c)` tekee sen luotettavasti.

### Mitkä värit sopivat salvianvihreään?

Pölyinen roosa, savi, kerma, lämmin harmaa sekä syvä sammal tai hiilenharmaa tekstiin. Vältä salvianväristä tekstiä pölyisen roosan päällä: ne ovat lähes yhtä vaaleita.

### Sopivatko hillityt värit brändäykseen?

Ne sopivat hyvin rauhallisiin käsityö- ja hyvinvointibrändeihin. Lisää yksi vahva tumma väri tekstiin ja reunoihin, jotta paletti pysyy luettavana.