# Mintunvihreä liukuväri: raikkaat ja vaaleat värikoodit

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

Minttu on väriympyrän raikkain sävy ja helppo saada vääräksi: hieman liian viileänä se muistuttaa hammastahnaa tai sairaalakäytävää. Nämä vaaleat koodit pysyvät herkullisina.

## The short version

- Mintunvihreä liukuväri yhdistää vaaleita, hieman sinertäviä vihreitä yleensä valkoiseen tai kermaan vaaleassa päässä.
- Minttu tuntuu kliiniseltä viileän harmaan ja puhtaan valkoisen rinnalla mutta raikkaalta kerman, persikan tai hennon roosan kanssa.
- Vaalea minttu ja persikka ovat vastavärejä, mutta pastellisina ne sulautuvat siististi ilman sameutta.
- Minttu on aivan liian vaalea valkoiselle tekstille. Syvä metsänvihreä, kuten #064e3b, erottuu siitä hyvin.
- Minttu sopii kahviloihin, ihonhoitoon, lastenbrändeihin, kestävyyttä korostaviin brändeihin ja kevätkampanjoihin.

**Mintunvihreä liukuväri** yhdistää vaaleita, hieman sinertäviä vihreitä lähes valkoisesta pehmeään viherminttuun. Harva vihreä tuntuu yhtä raikkaalta. Kerman tai persikan lämmittämänä se tuo mieleen kahvilan, puutarhan tai kevätaamun. Harmaan ja puhtaan valkoisen kanssa se alkaa muistuttaa hammaslääkärin odotushuonetta. Tässä ovat raikkaina pysyvät minttukoodit, niitä lämmittävät kumppanit ja luettavuuden säilyttävä tekstiväri.

## Mintunvihreä liukuväri yhdellä CSS-rivillä

Jos tarvitset vain yhden, aloita tästä. Se kulkee lämpimästä kermanvalkoisesta selkeään minttuun eikä tunnu kylmältä. Yläosaan jää runsaasti rauhallista tilaa sanoille.

Raikas minttu: `linear-gradient(160deg, #fbfdf7 0%, #d1fae5 45%, #a7f3d0 100%)`

Kermanvalkoisesta minttuun. Aseta otsikot yläpuoliskolle syvällä metsänvihreällä `#064e3b`.

## Vaaleat minttuliukuvärit

Nämä ovat lähellä valkoista. Ne sopivat taustoiksi paljon luettavaa sisältäviin töihin, kuten ruokalistoihin ja hinnastoihin, sekä tuotekuviin, joissa pakkauksen halutaan olevan pääosassa. [Pastelliliukuvärit](https://gradiently.design/fi/guide/pastel-gradients) käyttää samaa lähestymistapaa kaikkiin väreihin.

- Minttumaito: `linear-gradient(180deg, #f7fef9 0%, #d1fae5 100%)`
- Viherminttu: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)`
- Uusi lehti: `linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%)`
- Aamukaste: `radial-gradient(circle at 30% 25%, #ffffff 0%, #d1fae5 45%, #a7f3d0 100%)`
- Jääminttu: `linear-gradient(135deg, #ecfeff 0%, #bdf5dc 100%)`

Viisi vaaleaa minttua. Jääminttu taittaa siniseen ja tuntuu viileämmältä ja puhtaammalta. Uusi lehti taittaa keltaiseen ja tuntuu lämpimämmältä ja kasvimaisemmalta.

Päätä ajoissa, mihin suuntaan minttusi taittaa. Sinertävät mintut tuntuvat viileiltä, puhtailta ja moderneilta, mikä sopii teknologiaan, uimapukuihin ja ihonhoitoon. Kellertävät mintut tuntuvat lämpimiltä ja syötäviltä, mikä sopii ruokaan, kasveihin ja lasten tuotteisiin. Voit sekoittaa ne samaan liukuväriin, mutta anna toisen hallita, jotta brändillä on selkeä värilämpötila.

## Minttu persikan, kerman tai roosan kanssa

Mintun vastaväri väriympyrässä on pehmeä korallinpunainen. Täysin kylläisinä vastavärit sekoittuvat harmaaksi. Pastelleissa kylläisyyttä on niin vähän, että ne sulautuvat siististi. Siksi minttu ja persikka tai minttu ja roosa ovat kauneimpia yhdistelmiä. Lämpö myös estää minttua tuntumasta lääketieteelliseltä. Lisää yhdistelmiä löydät artikkelista [liukuvärien väriyhdistelmät](https://gradiently.design/fi/guide/gradient-color-combinations).

- Minttu ja persikka: `linear-gradient(135deg, #d1fae5 0%, #fde2cf 100%)`
- Minttu ja roosa: `linear-gradient(135deg, #ccfbf1 0%, #fce7f3 100%)`
- Kerma ja minttu: `linear-gradient(180deg, #fef9ec 0%, #d1fae5 100%)`
- Pistaasisorbetti: `linear-gradient(135deg, #a7f3d0 0%, #fef3c7 50%, #fed7aa 100%)`

Minttu lämpimän kumppanin kanssa. Nämä tuovat mieleen jäätelön, kukat ja leipomot klinikoiden sijaan.

- Kermanvalkoinen: #fbfdf7
- Minttumaito: #d1fae5
- Viherminttu: #a7f3d0
- Persikka: #fde2cf
- Roosa: #fce7f3
- Metsänvihreä muste: #064e3b

Lämmin minttupaletti: kermaa, kaksi minttua, kaksi lämmintä pastellia ja metsänvihreä tekstiin ja logoihin.

## Minttu, joka ei muistuta hammastahnaa

Moni yhdistää mintun hammastahnaan, klinikoihin ja sairaala-asuihin. Jos et toimi näillä aloilla, vältä niistä viestiviä yhdistelmiä.

### Kliininen vaikutelma

- Minttu puhtaan valkoisen ja viileän harmaan kanssa
- Kylläinen minttu kuten `#98ff98` tai `#3eb489` tasaisena täyttönä
- Ohut harmaa päätteetön teksti
- Kova, täysin puhdas digitaalinen pinta

### Raikas vaikutelma

- Minttu kerman, persikan tai roosan kanssa
- Pehmeät mintut kuten `#d1fae5` ja `#a7f3d0`
- Hieman vahvempi metsänvihreä teksti
- Ripaus rakeisuutta kuin painetussa paperissa

Rakeisuus vaikuttaa tässä enemmän kuin luulisi. Vaalea digitaalinen liukuväri ilman tekstuuria näyttää oletusasetukselta. Pieni kohina tekee siitä painetun ruokalistakortin. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää miten.

## Syvemmät minttuliukuvärit: smaragdiin ja metsään

Mintun vieminen smaragdin- tai metsänvihreään antaa liukuvärille sekä raikkautta että syvyyttä. Se sopii kestävyyttä korostaviin brändeihin, kasvikauppoihin, matchaan ja terveysruokaan. Tumma pää kantaa valkoisen tekstin. Koko vihreän valikoiman näet artikkelissa [vihreät liukuvärit](https://gradiently.design/fi/guide/green-gradient).

- Mintusta smaragdiin: `linear-gradient(180deg, #d1fae5 0%, #34d399 50%, #047857 100%)`
- Kasvihuone: `linear-gradient(160deg, #a7f3d0 0%, #059669 55%, #064e3b 100%)`
- Matcha: `linear-gradient(135deg, #d9f99d 0%, #86efac 45%, #15803d 100%)`
- Minttuvalo metsässä: `radial-gradient(circle at 80% 15%, #a7f3d0 0%, #10b981 25%, #064e3b 70%, #022c22 100%)`

Minttu vaaleassa päässä ja metsä tummassa. Otsikot alas valkoisina tai ylös metsänvihreällä musteella.

## Teksti mintunvihreällä liukuvärillä

Minttu on yksi vaaleimmista väreistä, joten valkoinen teksti katoaa siihen. Valkoisen kontrasti vihermintulla `#a7f3d0` jää selvästi alle 2:1. Metsänvihreä `#064e3b` samalla mintulla antaa noin 7,6:1 ja pitää koko työn samassa väriperheessä. Vaihda valkoiseen vasta, kun liukuväri syvenee smaragdiin `#047857` tai tummemmaksi. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää raja-arvot.

| Tausta | Valkoinen teksti | Metsänvihreä teksti #064e3b |
| --- | --- | --- |
| Minttumaito `#d1fae5` | Ei läpäise | Läpäisee helposti |
| Viherminttu `#a7f3d0` | Alle 2:1, ei läpäise | Noin 7,6:1 |
| Minttu `#6ee7b7` | Noin 1,5:1, ei läpäise | Noin 6,4:1 |
| Smaragdi `#047857` | Noin 5,5:1, läpäisee | Ei läpäise |

Tasaisen värin mittaukset. Tarkista liukuväristä vaalein kohta kunkin rivin takana.

Kahvilan tuotejulkaisu, jossa on metsänvihreä otsikko vaalealla mintun ja kerman liukuvärillä

Kahvilajulkaisu raikkaalla mintulla ja metsänvihreällä tekstillä. Ilme on viileä, makea ja kutsuva.

Sama kahvilasuunnitelma korkeana tarinana minttuliukuvärillä

Sama julkaisu tarinana, jossa minttu renderöidään korkeaan kehykseen.

Gradientlyn Pro muuttaa yhden suunnitelman kaikkiin tarvitsemiisi kokoihin yhdellä kertaa. Automaattinen muste valitsee vaalean tai tumman tekstin kullekin riville Markin omista väreistä. Vaalean mintun päälle ei siis jää lukukelvotonta valkoista tekstiä koon muuttamisen jälkeen. Pienet kahvilat ja kaupat saavat lisää ideoita artikkeleista [kahvilan brändäys](https://gradiently.design/fi/guide/coffee-shop-branding) ja [kevään väripaletit](https://gradiently.design/fi/guide/spring-color-palettes).

## Mintunvihreän liukuvärin CSS verkkosivulle

Verkkosivulla minttu toimii parhaiten yhden osion taustana koko sivun sijaan. Se tuntuu raikkaalta hetkeltä valkoisten osioiden välissä. Hento lämmin valo yhdessä nurkassa estää suurta minttualuetta näyttämästä lattealta. Metsänvihreä leipäteksti mustan sijaan pitää sivun pehmeänä.

```css
.section-mint {
  background-color: #ecfdf5; /* fallback */
  background-image:
    radial-gradient(circle at 85% 20%, #fde2cf 0%, transparent 35%),
    linear-gradient(160deg, #fbfdf7 0%, #d1fae5 50%, #a7f3d0 100%);
  color: #064e3b;
}

.section-mint a { color: #065f46; }
```

Raikas minttu ja pehmeä persikkavalo oikeassa ylänurkassa. Metsänvihreä teksti ja syvän smaragdin väriset linkit läpäisevät kontrastivaatimukset kaikkialla.

## FAQ

### Mikä on mintunvihreän heksakoodi?

Yhtä standardia ei ole. `#98ff98` on tavallinen kirkas minttu ja `#3eb489` syvempi sävy. Liukuväreissä pehmeämmät mintut kuten `#d1fae5` ja `#a7f3d0` näyttävät yleensä paremmilta.

### Mitkä värit sopivat mintunvihreään liukuväriin?

Kerma, persikka, hento roosa, voinkeltainen ja metsänvihreä. Lämpimät kumppanit estävät minttua tuntumasta kliiniseltä.

### Mikä tekstiväri näyttää parhaalta mintunvihreällä?

Syvä metsänvihreä tai hiilenharmaa. Valkoinen teksti ei täytä kontrastivaatimuksia lähes millään minttusävyllä.

### Miksi minttuliukuvärini näyttää kliiniseltä?

Sen rinnalla on luultavasti puhdasta valkoista ja viileää harmaata. Vaihda ne kermaan ja lämpimään korostusväriin sekä lisää kevyttä rakeisuutta.

### Sopivatko minttu ja vaaleanpunainen yhteen liukuvärissä?

Kyllä, pastellisina. Vaalea minttu ja roosa sulautuvat siististi, koska kylläisyyttä on vähän eikä sekoitus muutu harmaaksi.