# Limenvihreä liukuväri: raikkautta hallitusti

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

Lime on vihreän voimakkaimpia sävyjä. Harkitusti se näyttää terävältä ja modernilta, ilman suunnitelmaa korostuskynältä. Näillä koodeilla ja säännöillä pidät värin hallinnassa.

## The short version

- Limenvihreä liukuväri yhdistää keltaiseen taittuvia vihreitä kuten #bef264, #a3e635 ja #84cc16 yleensä tummaan oliiviin, lähes mustaan tai viereiseen keltaiseen tai sinivihreään.
- Lime on kylläisyyteensä nähden hyvin vaalea, joten valkoinen teksti ei sillä juuri koskaan täytä kontrastivaatimuksia. Syvä vihreä tai lähes musta teksti erottuu paljon paremmin.
- Lime hehkuu voimakkaimmin lähes mustalla pohjalla, jossa pieni määrä riittää koko suunnitelman tehosteeksi.
- Limen suora sekoittaminen violettiin tai vaaleanpunaiseen tuottaa usein harmaan keskikohdan. Pidä värit erillisinä alueina tai käytä välisävyä.
- Lime sopii urheiluun, musiikkiin, teknologialanseerauksiin ja tuoreeseen ruokaan. Se toimii parhaiten tehosteena koko pinnan sijaan.

**Limenvihreä liukuväri** sekoittaa vihreän kellertäviä sävyjä: vaaleaa sitrusta kuten `#d9f99d`, kirkasta limeä kuten `#a3e635` ja syvempiä lehtisävyjä kuten `#65a30d`. Se häipyy usein lähes mustaan, oliiviin, sitruunankeltaiseen tai sinivihreään. Hallinta syntyy kolmesta valinnasta: kuinka suuri osa pinnasta on limeä, millaisella pohjalla se on ja minkä väristä teksti on. Kun valitset ne oikein, lime näyttää harkitulta ja ajankohtaiselta. Alta löydät limeliukuvärien koodit eri tunnelmiin, niillä erottuvat tekstivärit ja puhtaina pysyvät yhdistelmät.

## Miksi lime käyttäytyy eri tavalla kuin muut vihreät

Lime sijaitsee väriympyrässä keltaisen ja vihreän välissä. Keltaisen tapaan se on erittäin vaalea täydelläkin kylläisyydellä. Tästä syntyvät sekä sen energia että ongelmat. Se ponnahtaa tummalta näytöltä, mutta hukuttaa valkoisen tekstin ja väsyttää silmää suurena pintana. Metsän- ja smaragdinvihreä käyttäytyvät enemmän sinisen tavoin, lime korostuskynän tavoin. Laajemman väriperheen löydät [vihreistä liukuväreistä](https://gradiently.design/fi/guide/green-gradient).

- Sitrususva: #ecfccb
- Vaalea lime: #d9f99d
- Raikas lime: #bef264
- Lime: #a3e635
- Lehtilime: #84cc16
- Syvä lime: #65a30d
- Oliivi: #3f6212
- Limemuste: #1a2e05

Käyttökelpoinen limen sävyasteikko lähes valkoisesta lähes mustaan. Vierekkäisistä sävyistä rakennetut liukuvärit eivät muutu sameiksi.

## Limenvihreän liukuvärin koodit tummalla pohjalla

Tässä lime näyttää, mistä sen maine tulee. Lähes mustalla pohjalla pieni limehehku tuntuu sähköiseltä rasittamatta silmää, sillä katse voi levätä tummassa. Rajaa lime nurkkaan tai kaistaleeseen ja anna pohjan tehdä suurin osa työstä.

- Limen valo mustalla: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- Yöstä limeen: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Stadionin hehku: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- Syvästä sinivihreästä limeen: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Neljä tummaa limeliukuväriä. Jokaisessa kirkkain lime jää yhteen alueeseen, joten otsikot voivat olla tummalla puolella.

Tällaisissa tummissa sekoituksissa porrastuminen näkyy ensimmäisenä, etenkin alustan pakattua kuvan uudelleen. Hieno rakeisuus korjaa sitä. [Tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) tarjoavat lisää kokeiltavia pohjia.

## Pehmeät lime- ja sitruspastelliliukuvärit

Kermaan tai minttuun pehmennetty lime menettää räikeytensä ja muuttuu raikkaaksi, puhtaaksi ja hieman kasvimaiseksi. Nämä sopivat kahviloille, mehubaareille, ihonhoitoon ja kevätkampanjoihin. Lämmitä yhtä päätä hieman sitruunalla tai kermalla, jotta lopputulos tuntuu aurinkoiselta kliinisen sijaan.

- Sitruunasta limenkermaan: `linear-gradient(135deg, #fefce8 0%, #ecfccb 50%, #d9f99d 100%)`
- Limestä minttuun: `linear-gradient(180deg, #f7fee7 0%, #d1fae5 100%)`
- Sitrusaurinko: `radial-gradient(circle at 30% 30%, #fef9c3 0%, #d9f99d 45%, #bef264 100%)`

Vaaleita limeliukuvärejä rauhallisille, raikkaille brändeille. Tummanvihreä teksti erottuu kauniisti kaikilla kolmella.

Jos haluat viileämmän ja puhtaamman sävyn, [minttuliukuvärit](https://gradiently.design/fi/guide/mint-gradient) ovat aivan vieressä.

## Limen kanssa puhtaasti yhdistyvät värit

Lime sekoittuu puhtaasti naapureihinsa: yhdellä puolella keltaiseen, toisella vihreään ja sinivihreään. Siirtymät pysyvät kirkkaina koko matkan. Ongelmat alkavat väriympyrän vastapuolen väreistä. Violetti ja magenta ovat lähellä limen vastaväriä, ja suora sekoitus kulkee sameanharmaan keskikohdan kautta. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) näyttää tarkasti, miksi näin käy.

### Vältä

- Limen suoraa sekoittamista violettiin tai magentaan
- Valkoista tekstiä kirkkaalla limellä
- Limeä suuren julisteen jokaisessa pikselissä
- Limeä punaisen kanssa, sillä yhdistelmä muistuttaa varoitusmerkkiä

### Tee näin

- Sekoita limeä keltaiseen, sinivihreään tai syvään oliiviin
- Käytä limellä lähes mustaa tai syvänvihreää tekstiä
- Käytä limeä hehkuna tummalla tai kermanvärisellä pohjalla
- Sijoita violetti tai vaaleanpunainen limen viereen sekoittamatta niitä

Lime, sitruuna, mandariini: `linear-gradient(120deg, #a3e635 0%, #facc15 50%, #f97316 100%)`

Koko sitrusasteikko. Jokainen askel on edellisen läheinen naapuri, joten keskikohta pysyy kirkkaana eikä muutu ruskeaksi.

## Limellä erottuvat tekstivärit

Koska lime on hyvin vaalea, vaistomainen valkoisen tekstin valinta on lähes aina väärä. Ratkaisu on tumma tekstiväri, mieluiten erittäin syvä vihreä, jotta koko suunnitelma pysyy samassa väriperheessä. Alla olevat suhteet on mitattu WCAG:n kontrastikaavalla. Leipätekstin tavallinen vähimmäisarvo on 4,5:1. Lue menetelmästä lisää [värikontrastin ja saavutettavuuden](https://gradiently.design/fi/guide/color-contrast-accessibility) oppaasta.

| Tausta | Teksti | Kontrasti | Arvio |
| --- | --- | --- | --- |
| Lime `#a3e635` | Valkoinen `#ffffff` | 1,5:1 | Ei riitä edes otsikoihin |
| Lime `#a3e635` | Limemuste `#1a2e05` | 9,7:1 | Erinomainen |
| Lehtilime `#84cc16` | Valkoinen `#ffffff` | 2,0:1 | Ei riitä |
| Vaalea lime `#d9f99d` | Limemuste `#1a2e05` | 12,5:1 | Erinomainen |
| Oliivi `#3f6212` | Valkoinen `#ffffff` | 7,1:1 | Hyvä, sopii tummaan päähän |
| Lähes musta `#0b0f05` | Lime `#a3e635` | 12,8:1 | Erinomainen, lime tekstivärinä |

Tarkista liukuvärillä vaalein kohta jokaisen tekstirivin takana, älä keskimääräistä väriä.

Viimeinen rivi kannattaa huomata: lime on loistava tekstiväri mustalla. Limeotsikko lähes mustalla liukuvärillä on yksi luettavimmista yhdistelmistä. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) kertoo, mitä tehdä, kun sanat ylittävät sekoituksen molemmat päät.

Pystysuuntainen uutuusjulkaisu limenvihreistä tenniskengistä, vaalea teksti tummanvihreällä liukuvärillä ja limevaloa yhdessä nurkassa

Urheiluvaatteita tummalla pohjalla, jossa on limen valoa. Sanat ovat tummalla puolella.

Mehubaarin pystyjulkaisu, jossa tummanvihreä otsikko on vaalealla lime- ja sitruunaliukuvärillä

Mehubaarin julkaisu pehmeällä sitruspohjalla ja syvänvihreällä tekstillä.

## Limen CSS-liukuväri painikkeisiin ja pääosioihin

Verkossa lime toimii erinomaisesti toimintakehotteena tummalla sivulla ja huonosti koko sivun taustana. Alla oleva koodi luo tumman pääosion limehehkulla sekä limenvihreän painikkeen tummalla tekstillä. OKLCH-interpolointi pitää sekoituksen kirkkaana siellä, missä sRGB tummuisi. [OKLCH-liukuvärit CSS:ssä](https://gradiently.design/fi/guide/css-gradient-oklch) selittää syntaksin.

```css
.hero {
  min-height: 80vh;
  background-color: #0b0f05;
  background-image:
    radial-gradient(circle at 85% 15%, #a3e635 0%, transparent 40%),
    linear-gradient(160deg, #0b0f05 0%, #1a2e05 100%);
  color: #f7fee7;
}

.button {
  background: linear-gradient(135deg, #bef264, #84cc16);
  background: linear-gradient(135deg in oklch, #bef264, #84cc16);
  color: #1a2e05;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}
```

Tumma pääosio yhdellä limevalolla ja limepainike syvänvihreällä tekstillä. Selaimet, jotka eivät tue `in oklch` -syntaksia, ohittavat painikkeen toisen taustan ja käyttävät ensimmäistä.

## Missä limenvihreä liukuväri toimii parhaiten

- **Urheilu ja kuntoilu:** ottelupäivät, kilpailuilmoittautumiset, uudet varusteet. Lime mustalla viestii vauhtia.
- **Musiikki ja yöelämä:** klubi-illat ja julkaisugrafiikat, joissa lime sopii luontevasti [neonliukuvärien](https://gradiently.design/fi/guide/neon-gradients) rinnalle.
- **Teknologia ja tuotelanseeraukset:** yksi limetehoste saa tumman käyttöliittymän tuntumaan käynnissä olevalta.
- **Tuore ruoka ja juoma:** mehut, salaatit, cocktailit ja sitrukset pehmeämmillä pastellisävyillä.
- **Kevätkampanjat:** vaalea lime ja sitruuna viestivät uudesta kaudesta ilman tavallista pastellipinkkiä.

Lime on niin tunnistettava, että sillä on helppo näyttää samalta kuin muutkin siihen tänä vuonna tarttuneet. Gradientlyssä jokaista Markia verrataan kaikkiin muihin ja liian samankaltainen hylätään. Näin lunastamasi limeilme on sellainen, jota kukaan muu ei voi viedä. Myös luettavuus mukautuu jokaisen rivin takana, joten lime ei päädy vahingossa valkoisten sanojen alle.

## FAQ

### Mikä on limenvihreän heksakoodi?

Yleinen kirkas lime on `#a3e635`. Vaaleammat limet ovat lähellä sävyä `#d9f99d` ja syvemmät sävyä `#65a30d`. Verkon puhdas lime `#00ff00` on paljon rajumpi ja näyttää suunnittelussa harvoin hyvältä.

### Minkä värinen teksti sopii limenvihreälle liukuvärille?

Käytä hyvin tummaa vihreää kuten `#1a2e05` tai lähes mustaa. Valkoinen teksti kirkkaalla limellä jää kauas kontrastivaatimuksista, noin arvoon 1,5:1.

### Mitkä värit sopivat limeen liukuvärissä?

Keltainen, sitruuna, sinivihreä, minttu ja syvä oliivi sekoittuvat limeen puhtaasti. Violetti ja vaaleanpunainen näyttävät näyttäviltä sen vieressä, mutta suora sekoitus muuttuu harmaaksi.

### Miten teen neonvihreän liukuvärin CSS:llä?

Aseta limehehku lähes mustalle pohjalle, esimerkiksi `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`. Juuri tumma pohja saa limen näyttämään neonilta.

### Onko limenvihreä hyvä brändiväri?

Se voi olla energiselle urheilu-, musiikki-, teknologia- tai ruokabrändille. Käytä sitä tehosteena tummalla tai kermanvärisellä pohjalla koko pinnan sijaan ja yhdistä tummaan tekstiin.