# Pastelliväripaletit: pehmeät värikoodit lempeille brändeille

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

Pastelleihin on helppo ihastua, mutta niitä on vaikea käyttää: yksinään ne eivät kanna tekstiä. Jokaisessa paletissa on mukana kaksi lisäväriä, jotka tekevät siitä toimivan.

## The short version

- Pastelliväripaletti koostuu vaaleista, maltillisesti kylläisistä väreistä, joiden HSL-vaaleus on tyypillisesti yli 85 %.
- Pastellit ovat liian vaaleita tekstiksi valkoiselle pohjalle. Siksi pastellipaletti tarvitsee tumman tekstivärin.
- Useimmat pastellibrändit tarvitsevat myös syvemmän tukivärin, jonka päällä painikkeiden ja tunnisteiden valkoinen teksti erottuu.
- Pastellit näyttävät yhtenäisimmiltä, kun ne ovat yhtä vaaleita ja eroavat lähinnä sävyltään.
- Lämmin luonnonvalkoinen sopii pastellien pohjaksi paremmin kuin puhdas valkoinen, joka voi saada ne näyttämään haalistuneilta.

**Pastelliväripaletti** on joukko vaaleita, pehmeän kylläisiä värejä: persikkaa, voinkeltaista, salviaa, puuterinsinistä ja lilaa. Ne tuntuvat lempeiltä, raikkailta ja ystävällisiltä, minkä vuoksi leipomot, ihonhoito- ja vauvabrändit sekä hääpaperituotteiden tekijät suosivat niitä. Ongelma on, ettei yksikään pastelli ole riittävän tumma tekstille. Siksi jokainen alla oleva paletti yhdistää kolme pastellia kahteen käyttöväriin: tummaan **tekstiväriin** ja syvempään **tukiväriin** painikkeille ja korostuksille. Koodit ovat valmiita kopioitaviksi ja kontrasti on tarkistettu.

## Viisi pastelliväripalettia hex-koodeineen

**Persikka ja salvia** on lämmin, luonnollinen ja rauhallinen yhdistelmä, joka sopii ruokaan, keramiikkaan ja hitaasta elämästä kertoville brändeille. Terrakottainen tukiväri estää liian sokerisen vaikutelman.

- Persikka #f9d5c7: #f9d5c7
- Voinkeltainen #fbe7b5: #fbe7b5
- Salvia #cfe3d1: #cfe3d1
- Terrakotta #ad5a45: #ad5a45
- Kaakaonruskea teksti #3a2e2a: #3a2e2a

Kaakaonruskean kontrasti persikkaan on 9,6:1. Valkoisen kontrasti terrakottaan on 4,9:1, mikä riittää painiketeksteille.

**Merilasi** on viileä ja puhdas paletti hyvinvointiin, ihonhoitoon ja kaikkeen, minkä halutaan tuntuvan raikkaalta ilmalta.

- Merilasi #c9e9e4: #c9e9e4
- Puuterinsininen #c9dff2: #c9dff2
- Sumu #e3f1ec: #e3f1ec
- Syvä laguuni #3f7f86: #3f7f86
- Liuskeenharmaa teksti #2f3a4a: #2f3a4a

Liuskeenharmaan kontrasti merilasiin on 8,9:1. Valkoisen kontrasti syvään laguuniin on 4,6:1.

**Laventeli ja sitruuna** yhdistää kaksi lähes vastakkaista sävyä yhtä pehmeän vaaleina. Tulos on iloinen ilman riitasointua. Se sopii paperituotteisiin, kukkakauppoihin ja lastenkirjoihin.

- Laventeli #ddd3f2: #ddd3f2
- Sitruuna #fbf0b5: #fbf0b5
- Poskipuna #f6cfdc: #f6cfdc
- Violetti #7a5ba8: #7a5ba8
- Luumunvärinen teksti #3b2f48: #3b2f48

Luumunvärin kontrasti laventeliin on 8,7:1 ja sitruunaan 10,8:1. Valkoisen kontrasti violettiin on 5,4:1.

**Sorbetti** on viidestä makein: lämpimiä vaaleanpunaisia ja aprikoosinsävyjä leipomoille, kynsistudioille ja kesäkampanjoihin.

- Mansikka #f6cfdc: #f6cfdc
- Aprikoosi #fcd9b8: #fcd9b8
- Vanilja #fbe7b5: #fbe7b5
- Vadelma #b54f6e: #b54f6e
- Marjanvärinen teksti #4a2e37: #4a2e37

Marjanvärin kontrasti mansikkaan on 8,6:1. Valkoisen kontrasti vadelmaan on 4,9:1.

**Pistaasi** on raikas ja vihreä, luonnollinen ilman maanläheisyyttä. Se sopii kasvikaupoille, kahviloille ja ekologisille brändeille.

- Pistaasi #d9e8c4: #d9e8c4
- Selleri #eef3d9: #eef3d9
- Persikka #f9d5c7: #f9d5c7
- Lehti #4f7a3f: #4f7a3f
- Sammalenvärinen teksti #2e3b33: #2e3b33

Sammalenvärin kontrasti pistaasiin on 9,1:1. Valkoisen kontrasti lehtiväriin on 5:1. Persikka on pieni lämmin korostus.

Aloita paletin valinta värilämpötilasta. Lämpimät pastellit, kuten persikka, aprikoosi ja voinkeltainen, tuntuvat kodikkailta ja syötäviltä. Viileät pastellit, kuten merilasi, puuterinsininen ja laventeli, tuntuvat puhtailta ja ilmavilta. Katso seuraavaksi tukiväriä: se näkyy kaikissa painikkeissa ja hintalapuissa, ja ihmiset muistavat juuri sen. Jos mikään tukiväri ei sovi sinulle, säilytä pastellit ja vaihda tilalle oma brändivärisi. Tummenna sitä, kunnes valkoisen tekstin kontrasti siihen yltää arvoon 4,5:1. Kaipaatko pastelleja hillitympää ilmettä? [Murretut väripaletit](https://gradiently.design/fi/guide/muted-color-palettes) ovat askeleen harmaampia.

## Miksi pastellit tarvitsevat teksti- ja tukivärin

Jokaisen yllä olevan pastellin kontrasti valkoiseen on noin 1,1:1-1,4:1. Se jää kauas leipätekstin tarvitsemasta 4,5:1-suhteesta. Pastelliväriset sanat valkoisella sivulla ovat siksi monille lukukelvottomia. Pastellipainikkeet valkoisine teksteineen epäonnistuvat yhtä pahasti. Tekstiväri ja tukiväri korjaavat molemmat ongelmat ja säilyttävät paletin kokonaisuutena pehmeänä.

| Käyttö | Valittava väri | Miksi |
| --- | --- | --- |
| Sivun ja osioiden taustat | Pastelli tai lämmin luonnonvalkoinen | Suuret pehmeät pinnat luovat tunnelman |
| Otsikot ja leipäteksti | Tekstiväri | Riittävän tumma vähintään 8:1-kontrastiin jokaisella pastellilla |
| Painikkeet ja tunnisteet | Tukiväri valkoisella tekstillä | Yltää 4,5:1-kontrastiin ja antaa katseelle kiintopisteen |
| Kuvitukset ja muodot | Mikä tahansa pastelli, tukiväriä säästeliäästi | Vaihtelua ilman hälyä |
| Teksti valokuvissa | Tekstiväri pastellipinnalla tai valkoinen kuvan tummassa kohdassa | Pastellit katoavat levottomien kuvien päällä |

Yksinkertainen tehtäväjako jokaiselle pastellipaletille. Tarkista omat väriparisi kontrastityökalulla ennen julkaisua.

Valitse tasaisen harmaan sijaan tekstiväri, joka lähestyy yhtä pastelleistasi: lämpimiin paletteihin kaakaota, viileisiin liuskeenharmaata tai luumua. Sävytetty tekstiväri tekee koko paletista harkitun näköisen. Lukujen taustalla olevat säännöt löytyvät [värikontrastin ja saavutettavuuden oppaasta](https://gradiently.design/fi/guide/color-contrast-accessibility).

## Näin teet mistä tahansa väristä pastellin

Pastelli on mikä tahansa sävy, jonka vaaleus on korkea ja kylläisyys maltillinen. [HSL:ssä](https://gradiently.design/fi/guide/hsl-colors) tavoittele 85-92 prosentin vaaleutta ja 40-80 prosentin kylläisyyttä. HSL:n ongelma on, että samoilla arvoilla keltainen ja sininen näyttävät hyvin eri kirkkauksisilta. [OKLCH](https://gradiently.design/fi/guide/oklch-explained) korjaa tämän, joten sama kaava tuottaa tasaisen pastellin jokaisesta sävystä.

```css
:root {
  /* lightness 90%, gentle chroma, any hue */
  --pastel-peach: oklch(90% 0.06 60);
  --pastel-lemon: oklch(90% 0.06 100);
  --pastel-mint:  oklch(90% 0.06 150);
  --pastel-aqua:  oklch(90% 0.06 200);
  --pastel-pink:  oklch(90% 0.06 340);

  /* the ink: same idea, very dark */
  --ink: oklch(30% 0.03 40);
}
```

Muuta vain sävyä, niin kaikki pastellit säilyttävät saman visuaalisen painon. Pidä kroma noin välillä 0,04 ja 0,07. Suurempi arvo alkaa näyttää karkilta.

Sama tapa muuttaa brändivärisi omaksi pastellikseen: säilytä sävy, nosta vaaleutta ja vähennä kylläisyyttä. Saat pehmeän taustavärin, joka tunnistetaan omaksesi. Sävytysten teoria löytyy [vaalennettujen, murrettujen ja tummennettujen värien oppaasta](https://gradiently.design/fi/guide/tints-tones-shades).

## Virheet, jotka tekevät pastelleista halvan näköisiä

### Vältä

- Pastelliteksti valkoisella tai toisella pastellilla
- Kuusi pastellia kerralla ilman tummaa väriä
- Eri vaaleusasteiden pastellit, joista yksi näyttää likaiselta
- Puhtaan valkoiset pohjat, jotka haalistavat pastellit
- Ohuet käsialafontit vaaleissa väreissä

### Tee näin

- Tumma, sävytetty tekstiväri joka sanalle
- Kolme pastellia sekä tuki- ja tekstiväri
- Yhtä vaaleat pastellit
- Lämmin luonnonvalkoinen, kuten #fdf8f2
- Vahvat leikkaukset ja selkeät kirjainmuodot

## Pastellipaletti oikeassa julkaisussa

Näin idea toimii: pehmeä tausta, tumma teksti ja yksi tukiväri kerran käytettynä. Jos haluat pastellit virtaaviksi taustoiksi tasaisten värilohkojen sijaan, [pastelliliukuvärit](https://gradiently.design/fi/guide/pastel-gradients) tarjoaa koodit. [Pehmeä estetiikka](https://gradiently.design/fi/guide/soft-aesthetic) näyttää, miten ilme jatkuu koko syötteessä.

Leipomon pehmeä pastellinen Instagram-julkaisu, joka kertoo sitruunakakun palaavan viikonlopuksi

Pehmeä tausta ja tumma, varma typografia. Pastelli luo tunnelman, tekstiväri kertoo asian.

Luettavuus horjuu usein vaaleilla taustoilla, ja Gradiently hoitaa sen puolestasi. Markin Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin omasta paletistaan. Pehmeän pastelli-Markinkin sanat pysyvät riittävän tummina ilman jokaisen väriparin tarkistamista.

## FAQ

### Mitä värejä pastelliväripaletissa on?

Minkä tahansa sävyn vaaleita, pehmeän kylläisiä versioita. Yleisimpiä ovat persikka, voinkeltainen, salvia, minttu, puuterinsininen, laventeli ja poskipuna.

### Mikä on pastellipinkin hex-koodi?

Yhtä ainoaa koodia ei ole, mutta #f6cfdc on tasapainoinen pastellipinkki. Käytä tekstissä tummaa väriä, kuten #4a2e37.

### Mikä tekstiväri sopii pastelleihin?

Tumma, hieman sävytetty väri, kuten kaakao #3a2e2a, liuskeenharmaa #2f3a4a tai luumu #3b2f48. Ne antavat tavallisilla pastelleilla noin 8:1-10:1-kontrastin.

### Ovatko pastellivärit saavutettavia?

Taustoina kyllä. Tekstinä tai valkoisen painiketekstin pohjana eivät, koska ne ovat liian vaaleita. Käytä sanoissa tummaa tekstiväriä ja painikkeissa syvempää tukiväriä.

### Miten teen väristä pastellin?

Nosta vaaleus noin 85-92 prosenttiin ja pidä kylläisyys maltillisena. CSS:ssä `oklch(90% 0.06 H)` tuottaa tasaisen pastellin mille tahansa sävylle H.