# Limegrön gradient: friska koder med kontroll

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

Lime är ungefär så högljutt som grönt blir. Med en plan ser den skarp och modern ut, utan plan ser den ut som en överstrykningspenna. Här är koderna och reglerna som håller den på din sida.

## The short version

- En limegrön gradient blandar gulaktiga gröna toner som #bef264, #a3e635 och #84cc16, oftast mot en mörkare oliv, en nästan svart färg eller en granngul eller blågrön ton.
- Lime är mycket ljus för hur mättad den är, så vit text på den klarar nästan alltid inte kontrasten och mörkgrönt eller nästan svart bläck läses mycket bättre.
- Lime glöder mest på en nästan svart botten, där en liten mängd räcker för att bära en hel design.
- Att blanda lime rakt in i lila eller rosa ger ofta en grå mitt, så håll de kombinationerna i skilda ytor eller gå via en brofärg.
- Lime passar sport, musik, tekniklanseringar och färsk mat, och fungerar bäst som accent snarare än som hela ytan.

En **limegrön gradient** blandar den gula sidan av grönt: blek citrus som `#d9f99d`, klar lime som `#a3e635` och djupare bladtoner som `#65a30d`, ofta gradient mot nästan svart, oliv, citron eller blågrönt. Kontrollen kommer av tre val: hur stor del av ytan som är lime, vilken botten den ligger på och vilken färg orden har. Får du dem rätt ser lime genomtänkt och aktuell ut. Nedan finns koder för limegradienter i varje stämning, bläcken som läses på dem och kombinationerna som håller sig rena.

## Varför lime beter sig annorlunda än andra gröna toner

Lime ligger mellan gult och grönt på färghjulet och är liksom gult extremt ljus även vid full mättnad. Det är källan till både dess energi och dess problem. Den hoppar fram mot en mörk skärm, men den dränker också vit text och tröttar ögat när den fyller en stor yta. Ett skogsgrönt eller smaragdgrönt beter sig mer som blått, lime beter sig mer som en överstrykningspenna. Hela familjen tas upp i [gröna gradienter](https://gradiently.design/sv/guide/green-gradient).

- Citrusdimma: #ecfccb
- Blek lime: #d9f99d
- Färsk lime: #bef264
- Lime: #a3e635
- Bladlime: #84cc16
- Djup lime: #65a30d
- Oliv: #3f6212
- Limebläck: #1a2e05

En fungerande limeskala, från nästan vit till nästan svart. Gradienter byggda av grannar på skalan blir aldrig sörjiga.

## Limegröna gradienter på mörk botten

Här förtjänar lime sitt rykte. På en nästan svart botten läses en liten limeglöd som elektrisk utan att vara tröttsam, eftersom ögat har någonstans mörkt att vila. Håll limen till ett hörn eller ett band och låt botten göra det mesta av jobbet.

- Limeljus på svart: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- Natt till lime: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Arenaglöd: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- Djup blågrön till lime: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Fyra mörka limegradienter. Var och en håller den ljusaste limen i ett område, så att rubriker kan ligga på den mörka sidan.

Mörka blandningar som dessa är där bandning syns först, särskilt när en plattform komprimerar om dem. Ett fint lager korn löser det, och [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) har fler bottnar att prova.

## Mjuka lime- och citruspasteller

Lime som mjukats mot grädde eller mynta förlorar sitt skrik och blir fräsch, ren och lite botanisk. De passar caféer, juicebarer, hudvård och vårkampanjer. Värm ena änden något med citron eller grädde så att resultatet känns solbelyst snarare än kliniskt.

- Citron till limegrädde: `linear-gradient(135deg, #fefce8 0%, #ecfccb 50%, #d9f99d 100%)`
- Lime till mynta: `linear-gradient(180deg, #f7fee7 0%, #d1fae5 100%)`
- Citrussol: `radial-gradient(circle at 30% 30%, #fef9c3 0%, #d9f99d 45%, #bef264 100%)`

Bleka limegradienter för lugna, friska varumärken. Mörkgrönt bläck läses vackert på alla tre.

Vill du att färgen ska luta mer åt kallt och rent ligger [myntagradienter](https://gradiently.design/sv/guide/mint-gradient) alldeles intill.

## Färger som paras rent med lime

Lime blandas rent med sina grannar: gult på ena sidan, grönt och blågrönt på den andra. De övergångarna håller sig ljusa hela vägen. Problemen börjar med färger på andra sidan hjulet. Lila och magenta ligger nära limens komplementfärg, och en rak blandning mellan dem passerar en trist grå mitt. [Sörjiga gradienter](https://gradiently.design/sv/guide/muddy-gradients) visar exakt varför det händer.

### Undvik

- Lime blandad rakt in i violett eller magenta
- Vit text på klar lime
- Lime som fyller varje pixel på en stor affisch
- Lime med rött, som läses som en varningsskylt

### Gör så här

- Lime mot gult, blågrönt eller djup oliv
- Nästan svart eller djupgrönt bläck på lime
- Lime som glöd på mörk eller gräddfärgad botten
- Lila eller rosa placerat bredvid lime, inte blandat in i den

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

Ett helt citruslopp. Varje steg är en nära granne till det förra, så mitten förblir ljus i stället för att bli brun.

## Textfärger som läses på lime

Eftersom lime är så ljus är instinkten att lägga vit text på den nästan alltid fel. Mörkt bläck är svaret, helst ett mycket djupt grönt så att hela designen stannar i samma familj. Förhållandena nedan är mätta med WCAG:s kontrastformel, och 4,5:1 är det vanliga minimumet för brödtext. Mer om metoden finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility).

| Bakgrund | Text | Kontrast | Omdöme |
| --- | --- | --- | --- |
| Lime `#a3e635` | Vit `#ffffff` | 1,5:1 | Underkänd, även för rubriker |
| Lime `#a3e635` | Limebläck `#1a2e05` | 9,7:1 | Utmärkt |
| Bladlime `#84cc16` | Vit `#ffffff` | 2,0:1 | Underkänd |
| Blek lime `#d9f99d` | Limebläck `#1a2e05` | 12,5:1 | Utmärkt |
| Oliv `#3f6212` | Vit `#ffffff` | 7,1:1 | Bra, använd för den mörka änden |
| Nästan svart `#0b0f05` | Lime `#a3e635` | 12,8:1 | Utmärkt, lime som bläck |

På en gradient ska du kontrollera den ljusaste punkten bakom varje textrad, inte medelfärgen.

Lägg märke till sista raden: lime är en suverän textfärg på svart. En limerubrik över en nästan svart gradient är en av de mest läsbara kombinationerna som finns. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) tar upp vad du gör när orden korsar båda ändar av en blandning.

Ett stående produktsläpp som presenterar court-skor i lime, med ljus text på en mörkgrön gradient som lyses upp av lime i ett hörn

Sportkläder på mörk botten med ett limeljus. Orden ligger på den mörka sidan.

Ett stående inlägg för en juicebar med rubrik i mörkgrönt på en blek lime- och citrongradient

Ett inlägg för en juicebar på mjuk citrusbotten, med mörkgrönt bläck.

## CSS för limegradient till knappar och hero

På webben fungerar lime briljant som uppmaning på en mörk sida och dåligt som bakgrund över hela sidan. Kodexemplet nedan ger en mörk hero med limeglöd och en limeknapp med mörk text. Interpolering i OKLCH håller blandningen ljus där sRGB skulle sjunka, och [OKLCH-gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar syntaxen.

```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;
}
```

En mörk hero med ett enda limeljus och en limeknapp med djupgrön text. Webbläsare som inte stöder `in oklch` hoppar över den andra knappbakgrunden och behåller den första.

## Där en limegrön gradient fungerar bäst

- **Sport och träning:** matchdagar, loppanmälningar, ny utrustning. Lime på svart läses som fart.
- **Musik och nattliv:** klubbkvällar och släppomslag, där den sitter naturligt bredvid [neongradienter](https://gradiently.design/sv/guide/neon-gradients).
- **Teknik och produktlanseringar:** en enda limeaccent får ett mörkt gränssnitt att kännas påslaget.
- **Färsk mat och dryck:** juice, sallader, cocktails och allt med citrus, i det mjukare pastellspannet.
- **Vårkampanjer:** blek lime och citron säger ny säsong utan den vanliga rosa pastellen.

Eftersom lime är så lätt att känna igen är den också lätt att se ut som alla andra som grep efter den i år. I Gradiently jämförs varje Mark med alla andra och nekas om den ligger för nära, så en limelook du säkrar är en som ingen annan kan exportera. Läsbarheten justeras också bakom varje rad, så lime hamnar aldrig under vita ord av misstag.

## FAQ

### Vilken hexkod har limegrön?

En vanlig klar lime är `#a3e635`. Blekare limetoner ligger kring `#d9f99d` och djupare kring `#65a30d`. Ren webblime, `#00ff00`, är mycket hårdare och ser sällan bra ut i design.

### Vilken textfärg passar på en limegrön gradient?

Använd ett mycket mörkt grönt som `#1a2e05` eller nästan svart. Vit text på klar lime underkänns rejält i kontrast, vid ungefär 1,5:1.

### Vilka färger passar med limegrönt i en gradient?

Gult, citron, blågrönt, mynta och djup oliv blandas rent med lime. Lila och rosa ser slående ut bredvid den men blir grå om du blandar rakt in i dem.

### Hur gör jag en neongrön gradient i CSS?

Lägg en limeglöd på en nästan svart botten, till exempel `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`. Det är den mörka botten som får limen att se ut som neon.

### Är limegrönt en bra varumärkesfärg?

Det kan det vara, för energiska varumärken inom sport, musik, teknik eller färsk mat. Använd den som accent på mörk eller gräddfärgad botten snarare än som hela ytan och para ihop den med mörkt bläck.