# Laventelin liukuväri: pehmeän violetin värikoodit

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

Laventeli on hillittyä violettia: rauhallista, hieman unenomaista, ei koskaan räikeää. Vaikeinta on säilyttää pehmeys ilman harmautta tai imelää sävyä. Näillä koodeilla onnistut.

## The short version

- Laventelin liukuväri yhdistää vaaleita, hieman sinertäviä violetteja usein valkoiseen, puuteriroosaan, persikkaan tai pehmeään siniseen.
- Laventeli muuttuu harmaaksi, kun väripisteet ovat liian haaleita, ja imeläksi, kun jokainen piste on pastellipinkkiä ja violettia.
- Lämmin kumppani, kuten persikka tai voinkeltainen, tai viileä vihreä, kuten salvia, antaa laventelille luonnetta.
- Valkoinen teksti ei erotu vaalealla laventelilla; syvä luumunsävy, kuten #2e1065, erottuu.
- Laventeli sopii hyvinvointiin, uneen, häihin, kauneuteen ja rauhallisiin digitaalisiin tuotteisiin.

**Laventelin liukuväri** yhdistää vaaleita, pehmeän sinertäviä violetteja, yleensä lähes valkoisesta hentoon lilaan tai sinililaan. Se tuntuu rauhalliselta, kevyeltä ja hieman unenomaiselta, minkä vuoksi hyvinvointi-, uni-, kauneus- ja hääbrändit pitävät siitä. Kaksi asiaa menee helposti pieleen: liikaa väriä poistamalla syntyy pölyistä harmaata, liikaa pinkkiä lisäämällä imelää. Pidä yksi väripiste selvästi värillisenä, yhdistä mukaan lämmin tai vihreä kumppani ja kirjoita teksti syvällä luumunsävyllä.

## Laventeli, lila, sinilila ja malva

Pehmeillä violeteilla on useita nimiä, ja kukin taittuu eri suuntaan. Kun tiedät, mitä haluat, värien yhdistäminen helpottuu: laventeli ja sinilila taittuvat siniseen, lila ja malva pinkkiin.

- Laventeliusva: #f5f3ff
- Laventeli: #e6e0f8
- Pehmeä violetti: #ddd6fe
- Lila: #c4b5fd
- Sinilila: #c7d2fe
- Orkidea: #d8b4e2
- Malva: #b497bd
- Luumumuste: #2e1065

Pehmeiden violettien perhe ja syvä luumunsävy tekstille. Laventeli ja sinilila ovat viileämpiä, orkidea ja malva lämpimämpiä.

## Vaaleat laventelin liukuvärit

Nämä ovat hillityimpiä, lähimpänä valkoista. Ne sopivat paljon tekstiä sisältäviin taustoihin: teehuoneen ruokalistaan, uutiskirjeeseen tai sovelluksen aloitusnäkymiin. Ne ovat lähes huomaamattomia, joten käytä niitä, kun sisältö on pääasia.

- Laventeliusva: `linear-gradient(180deg, #faf9ff 0%, #e6e0f8 100%)`
- Pehmeä violetti: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%)`
- Sinilila laveeraus: `linear-gradient(135deg, #eef2ff 0%, #e6e0f8 50%, #f5f3ff 100%)`
- Lilan valo: `radial-gradient(circle at 70% 25%, #ddd6fe 0%, #f5f3ff 55%, #ffffff 100%)`

Lähes valkoisia laventeleita. Jokaisessa on yksi aidosti värillinen piste, jotta lopputulos ei näytä harmaalta.

## Lilan ja sinililan liukuvärit

Astetta syvempänä laventeli muuttuu selväksi väriksi hennon vivahteen sijaan. Lila ja sinilila muodostavat viileän, modernin yhdistelmän, joka näyttää hyvältä puhelimen näytöllä. Lila ja orkidea ovat lämpimämpiä ja romanttisempia. Pidä päiden vaaleus samankaltaisena, niin siirtymä säilyy tasaisena.

- Lilasta sinililaan: `linear-gradient(135deg, #c4b5fd 0%, #a5b4fc 100%)`
- Lilasta orkideaan: `linear-gradient(135deg, #ddd6fe 0%, #d8b4e2 100%)`
- Iltahämärän lila: `linear-gradient(160deg, #e0e7ff 0%, #c4b5fd 50%, #a78bfa 100%)`
- Vaaleansinisestä lilaan: `linear-gradient(90deg, #bfdbfe 0%, #c4b5fd 100%)`

Keskivahvat laventelit. Siniseen taittuvat tuntuvat digitaalisilta ja rauhallisilta, pinkkiin taittuvat romanttisilta.

## Laventeli persikan, voinkeltaisen tai salvian kanssa

Yksinään laventeli voi tuntua liian makealta. Violetin väriperheen ulkopuolinen kumppani korjaa asian. Persikka ja voinkeltainen tuovat lämpöä ja saavat laventelin muistuttamaan alkuillan valoa. Salvia tuo kypsyyttä ja kasvimaisuutta, minkä vuoksi laventeli ja salvia ovat suosittu hääpari. Näin vaaleissa sävyissä vastakkaiset värit sekoittuvat samentumatta, koska kylläisyyttä on vähän menetettäväksi. [Pastelliliukuvärit](https://gradiently.design/fi/guide/pastel-gradients) käsittelee tätä periaatetta koko väriympyrässä.

- Laventeli ja persikka: `linear-gradient(135deg, #ddd6fe 0%, #fde2cf 100%)`
- Laventeli ja voinkeltainen: `linear-gradient(135deg, #e6e0f8 0%, #fef3c7 100%)`
- Laventeli ja salvia: `linear-gradient(135deg, #e6e0f8 0%, #dbe5d4 100%)`
- Iltataivas: `linear-gradient(180deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%)`

Laventeli kumppanin kanssa. Jokainen tuntuu vähemmän imelältä ja enemmän todelliselta paikalta tai vuorokaudenajalta.

## Hämärät laventelin liukuvärit

Kun laventeli syvenee violetiksi tai luumuksi, syntyy iltahämärä: ylhäällä yhä pehmeä, alhaalla täyteläinen. Nämä sopivat unisovelluksiin, kynttiläbrändeille, iltajoogaan, hajuvesiin ja kirjakauppoihin. Syvä pää tarjoaa myös paikan valkoiselle tekstille. Rohkeampien violettien koko valikoima löytyy artikkelista [violetit liukuvärit](https://gradiently.design/fi/guide/purple-gradient).

- Iltahämärä: `linear-gradient(180deg, #e6e0f8 0%, #a78bfa 50%, #4c1d95 100%)`
- Nukkumaanmenoaika: `linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 55%, #2e1065 100%)`
- Malvan hämärä: `radial-gradient(circle at 50% 20%, #ede9fe 0%, #b497bd 40%, #4a2e5c 100%)`

Laventeli ylhäällä, luumu alhaalla. Kirjoita otsikot alapuoliskoon valkoisella tai yläpuoliskoon luumunsävyllä.

## Laventelin liukuväri-ideoita tämän viikon julkaisuihin

Laventeli valitaan usein siksi, että se tuntuu mukavalta, ja sitä käytetään sitten ilman suunnitelmaa. Näissä konkreettisissa töissä siitä on oikeasti hyötyä:

- **Uni- tai meditaatiosovellus:** ”Nukkumaanmenoaika” aloitusnäkymän taustaksi, luumunvärinen teksti ylös ja painike syvän violetille alueelle.
- **Kukkakaupan äitienpäiväjulkaisu koossa 1080×1350:** ”Laventeli ja persikka” sekä yksi rivi: ”Tilaukset päättyvät torstaina.”
- **Ihonhoitotuotteen julkistus:** ”Laventeliusva” tuotekuvien taustalle, jotta pakkaus tuo värin.
- **Terapeutin tai valmentajan LinkedIn-banneri koossa 1584×396:** ”Sinilila laveeraus” tuntuu rauhalliselta ja ammattimaiselta ilman yrityssinisen kylmyyttä.
- **Kylpylän hinnasto A4-julisteena:** ”Laventeli ja salvia” sekä munakoisonvärinen teksti, joka erottuu vastaanottotiskin toiselta puolelta.

## Vältä harmaata ja imelää laventelia

### Muuttuu harmaaksi tai imeläksi

- Jokainen väripiste haalea, kuten `#e2e0e6`
- Laventeli viileän harmaan vieressä
- Laventeli, vaaleanpinkki ja violetti yhtä aikaa
- Valkoinen teksti vaalealla lilalla

### Pysyy pehmeänä ja selkeänä

- Vähintään yksi selvästi värillinen piste, kuten `#c4b5fd`
- Laventeli lämpimän valkoisen tai kerman vieressä
- Yksi kumppani: persikka, voinkeltainen tai salvia
- Syvä luumunvärinen teksti vaaleilla alueilla

Hyödyllinen tarkistus: aseta puhdas harmaa värinäyte laventelisi viereen. Jos niitä on vaikea erottaa yhdellä silmäyksellä, lisää hieman värikylläisyyttä. Tarkista myös puhelimella pienellä kirkkaudella, jolla hyvin vaaleat sävyt katoavat helposti.

## Teksti laventelin liukuvärillä

Laventeli on hyvin vaalea, joten valkoinen teksti ei toimi juuri missään sen kohdassa: valkoisen kontrasti lilalla `#c4b5fd` jää alle 2:1. Syvä luumunsävy `#2e1065` samalla lilalla ylittää 8:1 ja pitää tekstin violetissa väriperheessä mustan kovuuden sijaan. Pehmeämpään ilmeeseen kaikkein vaaleimmilla laventeleilla hillitty munakoiso, kuten `#3b2f4a`, täyttää vaatimukset silti helposti. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo tarkemmin.

Hääkutsun ennakkoilmoitus, jossa on syvän luumunvärinen teksti vaalealla laventelin ja persikan liukuvärillä

5×7 tuuman kutsu tarkkuudella 300 dpi, vaaleaa laventelia ja luumunväristä tekstiä.

Sama hääkutsun ennakkoilmoitus korkeana puhelintarinana laventelin liukuvärillä

Sama suunnitelma uutisen jakamiseen tarinana, renderöitynä omaan kokoonsa.

Prolla Gradiently siirtää saman suunnitelman painosta kaikkiin somekokoihin yhdellä kertaa: Mark renderöityy uudelleen jokaisessa muodossa, ja Automaattinen muste valitsee Markin omasta paletista vaalean tai tumman tekstivärin rivi kerrallaan. Kutsujen ja muiden paperituotteiden väreistä kertoo lisää [häiden väripaletit](https://gradiently.design/fi/guide/wedding-color-palettes).

## Laventelin liukuväri CSS:llä

Selaimet sekoittavat liukuvärien värit oletuksena sRGB:ssä, mikä voi himmentää kahden sävyn välisen siirtymän keskikohtaa. OKLCH-interpolointi pitää keskikohdan puhtaana, ja hex-varavaihtoehto kattaa selaimet, jotka eivät tue sitä. Tukitiedot löytyvät artikkelista [CSS-liukuvärit OKLCH:ssa](https://gradiently.design/fi/guide/css-gradient-oklch).

```css
.card-lavender {
  background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fde2cf);
  color: #2e1065;
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .card-lavender {
    background: linear-gradient(in oklch 135deg, #f5f3ff, #ddd6fe, #fde2cf);
  }
}
```

Laventeliusvasta pehmeän violetin kautta persikkaan, luumunvärisellä tekstillä. OKLCH-versio pitää siirtymän kirkkaana keskeltäkin.

## FAQ

### Mikä on laventelin hex-koodi?

CSS:n nimetty väri `lavender` on `#e6e6fa`, hyvin vaalea sinivioletti. Moni suunnittelija käyttää hieman täyteläisempiä versioita, kuten `#e6e0f8` tai `#ddd6fe`.

### Mitkä värit sopivat laventelin liukuväriin?

Persikka, voinkeltainen, salvianvihreä, kerma ja pehmeä sininen. Syvä luumunsävy sopii hyvin tekstille.

### Miksi laventelin liukuvärini näyttää harmaalta?

Väripisteet ovat liian haaleita tai viileän harmaan vieressä. Anna vähintään yhdelle pisteelle selvä väri ja yhdistä mukaan lämmin valkoinen harmaan sijaan.

### Mitä eroa on laventelilla ja lilalla?

Laventeli taittuu hieman siniseen ja on yleensä vaaleampi; lila taittuu hieman pinkkiin ja on hiukan voimakkaampi.

### Mikä tekstiväri sopii laventelin päälle?

Syvä luumu tai munakoiso, kuten `#2e1065`. Valkoisen tekstin kontrasti ei riitä vaalealla laventelilla.