# Värikylläisyys suunnittelussa: lisää tai vähennä voimaa

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

Kylläisyys on kirkkaan ja harmaan välinen säädin. Se muuttaa suunnitelman äänekkääksi, halvaksi, rauhalliseksi tai kalliiksi. Näin valitset suunnan ja saat koodit molempiin.

## The short version

- Värikylläisyys suunnittelussa on värin voimakkuus täysin kirkkaasta kokonaan harmaaseen, sävystä riippumatta.
- Suuri kylläisyys vetää huomiota ja tuntuu energiseltä, joten se toimii parhaiten pienissä painikkeissa, korostuksissa ja kohokohdissa.
- Pienempi kylläisyys tuntuu rauhallisemmalta ja usein laadukkaammalta ja sopii suuriin taustoihin sekä pitkän lukemisen pinnoille.
- Kaksi hyvin kylläistä vastaväriä rinnakkain voi näyttää värisevältä ja väsyttää tekstin lukijaa.
- Kylläisiä värejä pitää yleensä hillitä tummassa tilassa, eikä niitä usein voi toistaa tarkasti CMYK-painossa.

**Värikylläisyys suunnittelussa** tarkoittaa värin voimakkuutta: täysin kylläinen on kirkas ja puhdas, kokonaan kylläisyytensä menettänyt harmaa. Lisää sitä huomioon ja energiaan painikkeessa, tarjoushinnassa tai yhdessä korostuksessa. Vähennä sitä suurilla alueilla, pitkässä lukemisessa, laadukkaissa brändeissä ja tummissa käyttöliittymissä, joissa kirkkaus väsyttää nopeasti. Useimmat hyvät paletit yhdistävät tarkoituksella rauhallisen pohjan yhteen tai kahteen kylläiseen sävyyn.

## Mitä kylläisyys on

Jokaisella värillä on kolme ominaisuutta: sävy eli mikä väri, vaaleus eli etäisyys valkoiseen tai mustaan ja kylläisyys eli puhtaus tai harmaus. Pelkän kylläisyyden muutos siirtää kirsikanpunaisen pölyiseksi roosaksi ja sitten harmaaksi ilman vaalenemista tai tummenemista. [Sävy, kylläisyys ja kirkkaus](https://gradiently.design/fi/guide/hue-saturation-brightness) selittää suhteet.

- Punainen, kylläisyys 85 %:sta 0 %:iin: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Sininen, kylläisyys 85 %:sta 0 %:iin: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Vihreä, kylläisyys 70 %:sta 0 %:iin: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Kolme sävyä vakiona pysyvällä vaaleudella ja laskevalla kylläisyydellä. Moni hienostunut brändiväri elää kaistan keskellä.

HSL:ssä kylläisyys on toinen luku. Uudemmassa oklch-väriavaruudessa vastaava on chroma, joka käyttäytyy tasaisemmin eri sävyissä. Sama chroma saa keltaisen ja sinisen näyttämään yhtä voimakkailta. [HSL-värit](https://gradiently.design/fi/guide/hsl-colors) käsittelee vanhemman mallin ja lukujen lukemisen.

## Milloin kylläisyyttä kannattaa lisätä

- **Yksi painettava asia.** Kylläinen painike rauhallisella sivulla ei tarvitse osoittavaa nuolta. Tämä on [korostusvärin](https://gradiently.design/fi/guide/accent-color) tehtävä.
- **Lyhyet, äänekkäät hetket.** Tarjousilmoitukset, lanseerausjulkaisut ja tapahtumien lähtölaskennat keskeyttävät selauksen.
- **Nuoret, leikkisät tai urheilulliset brändit.** Lastentuotteet, energiajuomat ja festivaalit käyttävät suurta kylläisyyttä persoonassaan.
- **Erottuva data.** Kyllästä kaavion tärkeä sarja ja harmaanna muut.
- **Pienet alueet tummalla.** Kirkas väri pienellä alueella lähes mustalla näyttää valolta. Siksi neon toimii yöllä.

## Milloin kylläisyyttä kannattaa vähentää

- **Suuret alueet.** Täysin kylläinen koko näyttö väsyttää. Taustat toimivat yleensä hieman harmaannettuina.
- **Laadukas asemointi.** Hillityt, monisyiset oliivin, häränveren ja liuskeen sävyt tuntuvat usein harkitummilta ja kalliimmilta kuin päävärit.
- **Pitkä lukeminen.** Artikkelit, asiakirjat ja koontinäytöt tarvitsevat pinnan, jota voi katsoa tunnin.
- **Tumma tila.** Kylläiset värit hohtavat ja leviävät tummalla. Vähennä kylläisyyttä ja lisää hieman vaaleutta; [tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) selittää tarkemmin.
- **Kuvien ja tekstin takana.** Rauhallisempi tausta antaa kuvan ja sanojen johtaa.

Pystyjulkaisu Viikonlopun tarjous, vain 48 tuntia

Lyhyt, äänekäs viikonlopputarjous ansaitsee suuren kylläisyyden. Pystyjulkaisu koossa 1080×1350.

Pystysuuntainen Journal-julkaisu otsikolla Muistiinpanoja studiosta

Journal-julkaisun kaltaiseen viipyvään lukemiseen kuuluu rauhallisempi, vähemmän kylläinen väri.

## Värinän ongelma

Aseta kaksi hyvin kylläistä vastaväriä vierekkäin, kuten punainen vihreälle tai sininen oranssille, ja raja näyttää väreilevän. Optinen vaikutus tekee lukemisesta epämukavaa, vaikka kontrastisuhde vaikuttaisi riittävältä. Vähennä toisen kylläisyyttä tai erota värit neutraalilla.

### Värisee

- Puhdas punainen teksti puhtaalla vihreällä
- Kylläinen sininen kylläisellä oranssilla
- Magenta täysvoimaisen limen vieressä
- Kirkkaat värit rinnakkain koko julisteessa

### Rauhallinen lukea

- Syvänpunainen teksti hillityllä salvialla
- Laivastonsininen pehmeällä aprikoosilla
- Magentakorostus harmahtavalla limepohjalla
- Yksi kirkas väri hillitymmällä pohjalla

## Kylläisyyden säätö CSS:llä

Hex-koodit piilottavat kylläisyyden, joten sen silmämääräinen säätö hexinä on hidasta. Käytä HSL:ää tai oklch:ta tai sekoita väriä harmaaseen `color-mix()`-funktiolla.

```css
:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}
```

Kolme tapaa vähentää kylläisyyttä säilyttäen sävyn: HSL-kylläisyys, oklch-chroma ja harmaaseen sekoitus.

Määritä jokainen brändiväri alusta asti kahdessa kylläisyydessä: täysi korostuksiin ja hillitty suurille täytöille. Näin pehmeämpää sävyä ei tarvitse keksiä myöhemmin.

Valokuvat seuraavat samaa logiikkaa. Levoton, kylläinen kuva otsikon takana kilpailee sen kanssa. Vähennä kuvan kylläisyyttä noin kolmanneksen verran, niin sanat johtavat ilman laatikkoa tai varjoa. Toiseen suuntaan yksittäinen kylläinen kohde hillityssä kuvassa, kuten punainen takki harmaalla kadulla, on vanha katseenohjauskeino.

## Kylläisyys painossa

Näytöt toistavat kylläisempiä värejä kuin CMYK-muste, etenkin kirkkaat siniset, vihreät, oranssit ja purppurat. Kirkas näyttöväri painuu usein selvästi himmeämpänä. Jos kylläisyys on brändillesi keskeistä, harkitse Pantone-spottimustetta ja tarkista vedos ennen suurta painosta. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää eron.

- Täysi punainen: #e8173a
- Hillitty punainen: #b8505f
- Täysi sininen: #1c7ae0
- Hillitty sininen: #4f6f93
- Täysi vihreä: #14a85a
- Hillitty vihreä: #5b8a6f

Jokainen brändiväri kahdessa kylläisyydessä. Täydet versiot pieniin, äänekkäisiin hetkiin; hillityt kantavat suuria alueita ja kestävät painoa paremmin.

Kylläisyys toimii myös [värilämpötilan](https://gradiently.design/fi/guide/color-temperature) kanssa: lämmin hillitty paletti tuntuu vintagelta, viileä hillitty skandinaaviselta. Valmiit ääripäät löydät [hillityistä väripaleteista](https://gradiently.design/fi/guide/muted-color-palettes) ja [kirkkaista väripaleteista](https://gradiently.design/fi/guide/bright-color-palettes).

Gradientlyn Markit soveltavat samaa elävään taustaan: rauhallisin, parhaan kontrastin alue siirtyy tekstin taakse ja levottomat yksityiskohdat rauhoittuvat siinä. Sanat ovat hiljaisemmalla alueella muun Markin säilyttäessä värinsä.

## FAQ

### Mitä värikylläisyys tarkoittaa suunnittelussa?

Värin voimakkuutta tai puhtautta täysin kirkkaasta kokonaan harmaaseen. Se on eri asia kuin sävy ja vaaleus.

### Onko suuri kylläisyys huono asia?

Ei, mutta se sopii parhaiten pieniin alueisiin ja lyhyisiin hetkiin. Suuret kylläiset alueet väsyttävät ja voivat näyttää halvoilta.

### Mitä eroa kylläisyydellä ja kirkkaudella on?

Kylläisyys kuvaa väriin sekoitettua harmautta; kirkkaus tai vaaleus läheisyyttä valkoiseen tai mustaan. Voit muuttaa yhtä muuttamatta toista.

### Miksi kylläiset värit näyttävät huonommilta tummassa tilassa?

Tummalla pohjalla kirkkaat värit näyttävät hohtavan ja sumentuvan reunoista. Pieni kylläisyyden vähennys ja vaaleuden lisäys pitää ne terävinä.

### Miten vähennän värin kylläisyyttä CSS:llä?

Pienennä `hsl()`- tai `oklch()`-funktion toista arvoa tai sekoita harmaaseen näin: `color-mix(in oklch, yourcolour 60%, #808080)`.