# Dégradé vert lime : codes acidulés sous contrôle

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

Le lime est aussi bruyant que le vert puisse l’être. Avec un plan, il paraît net et moderne ; sans plan, on dirait un surligneur. Voici les codes et les règles qui le gardent de votre côté.

## The short version

- Un dégradé vert lime fond des verts tirant sur le jaune comme #bef264, #a3e635 et #84cc16, en général vers un olive plus foncé, un presque noir ou un jaune ou une sarcelle voisine.
- Le lime est très clair pour sa saturation : le texte blanc dessus échoue presque toujours au contraste, et une encre vert profond ou presque noire se lit bien mieux.
- Le lime rayonne le plus sur un fond presque noir, où une petite quantité porte tout un design.
- Fondre le lime directement dans du violet ou du rose donne en général un milieu gris : gardez ces associations en zones séparées ou passez par une couleur-pont.
- Le lime convient au sport, à la musique, aux lancements tech et à la cuisine fraîche, et marche mieux en accent qu’en surface entière.

Un **dégradé vert lime** fond le côté jaune du vert : un agrume pâle comme `#d9f99d`, un lime vif comme `#a3e635` et des tons de feuille plus profonds comme `#65a30d`, s’effaçant souvent vers un presque noir, un olive, un citron ou une sarcelle. Le contrôle vient de trois choix : quelle part de la surface est lime, sur quel fond il se pose, et de quelle couleur sont les mots. Réussissez-les et le lime paraît délibéré et actuel. Voici des codes de dégradé lime pour chaque ambiance, les encres qui s’y lisent et les associations qui restent nettes.

## Pourquoi le lime se comporte autrement que les autres verts

Le lime se situe entre le jaune et le vert sur le cercle chromatique, et comme le jaune il est extrêmement clair même à pleine saturation. C’est la source de son énergie comme de ses problèmes. Il saute d’un écran sombre, mais il délave aussi le texte blanc et fatigue l’œil quand il remplit une grande zone. Un vert forêt ou émeraude se comporte plutôt comme du bleu ; le lime plutôt comme un surligneur. La famille plus large est traitée dans [les dégradés verts](https://gradiently.design/fr/guide/green-gradient).

- Brume d’agrumes: #ecfccb
- Lime pâle: #d9f99d
- Lime frais: #bef264
- Lime: #a3e635
- Lime feuille: #84cc16
- Lime profond: #65a30d
- Olive: #3f6212
- Encre lime: #1a2e05

Une rampe de lime de travail, du presque blanc au presque noir. Les dégradés bâtis sur des voisins de cette rampe ne virent jamais au boueux.

## Codes de dégradé vert lime sur fond sombre

C’est là que le lime gagne sa réputation. Sur un fond presque noir, une petite lueur lime se lit comme électrique sans fatiguer, car l’œil a un endroit sombre où se reposer. Gardez le lime dans un coin ou une bande, et laissez le fond faire l’essentiel.

- Lumière lime sur noir: `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`
- De la nuit au lime: `linear-gradient(160deg, #0b0f05 0%, #1a2e05 45%, #84cc16 100%)`
- Lueur de stade: `radial-gradient(ellipse at 50% 110%, #bef264 0%, #4d7c0f 35%, #0a0d06 75%)`
- Sarcelle profonde vers lime: `linear-gradient(135deg, #0b1a14 0%, #134e4a 45%, #a3e635 100%)`

Quatre dégradés lime sombres. Chacun garde le lime le plus vif dans une seule région : les titres peuvent donc se poser du côté sombre.

Les fondus sombres comme ceux-ci sont là où le banding apparaît d’abord, surtout après la recompression par une plateforme. Une fine couche de grain y remédie, et [les fonds dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) proposent d’autres fonds à essayer.

## Dégradés lime doux et pastels d’agrumes

Un lime adouci vers la crème ou la menthe perd son cri et devient frais, net et un peu botanique. Ils conviennent aux cafés, aux bars à jus, aux soins de la peau et aux campagnes de printemps. Réchauffez un peu une extrémité avec du citron ou de la crème pour que le résultat paraisse ensoleillé plutôt que clinique.

- Citron vers crème de lime: `linear-gradient(135deg, #fefce8 0%, #ecfccb 50%, #d9f99d 100%)`
- Lime vers menthe: `linear-gradient(180deg, #f7fee7 0%, #d1fae5 100%)`
- Soleil d’agrumes: `radial-gradient(circle at 30% 30%, #fef9c3 0%, #d9f99d 45%, #bef264 100%)`

Des dégradés lime pâles pour des marques calmes et fraîches. Une encre vert foncé se lit à merveille sur les trois.

Si vous voulez que la couleur penche davantage vers le frais et le net, [les dégradés menthe](https://gradiently.design/fr/guide/mint-gradient) sont juste à côté.

## Les couleurs qui s’associent nettement au lime

Le lime se fond nettement avec ses voisins : le jaune d’un côté, le vert et la sarcelle de l’autre. Ces transitions restent vives d’un bout à l’autre. Les ennuis commencent avec les couleurs de l’autre côté du cercle. Le violet et le magenta sont proches du complémentaire du lime, et un fondu direct entre eux traverse un milieu gris terne. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) montrent exactement pourquoi.

### À éviter

- Du lime fondu directement dans du violet ou du magenta
- Du texte blanc sur du lime vif
- Du lime remplissant chaque pixel d’une grande affiche
- Du lime avec du rouge, qui se lit comme un panneau d’avertissement

### À faire

- Du lime vers jaune, sarcelle ou olive profond
- Une encre presque noire ou vert profond sur le lime
- Du lime en lueur sur un fond sombre ou crème
- Du violet ou du rose posé à côté du lime, pas fondu dedans

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

Une gamme d’agrumes complète. Chaque étape est une proche voisine de la précédente : le milieu reste vif au lieu de virer au brun.

## Les couleurs de texte qui se lisent sur le lime

Le lime étant si clair, l’instinct de mettre du texte blanc dessus est presque toujours faux. La réponse est une encre foncée, idéalement un vert très profond pour garder tout le design dans une seule famille. Les rapports ci-dessous sont mesurés avec la formule de contraste WCAG ; 4,5:1 est le minimum habituel pour le corps de texte. Pour en savoir plus sur la méthode, voir [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Lime `#a3e635` | Blanc `#ffffff` | 1,5:1 | Échec, même pour les titres |
| Lime `#a3e635` | Encre lime `#1a2e05` | 9,7:1 | Excellent |
| Lime feuille `#84cc16` | Blanc `#ffffff` | 2,0:1 | Échec |
| Lime pâle `#d9f99d` | Encre lime `#1a2e05` | 12,5:1 | Excellent |
| Olive `#3f6212` | Blanc `#ffffff` | 7,1:1 | Bien, pour l’extrémité sombre |
| Presque noir `#0b0f05` | Lime `#a3e635` | 12,8:1 | Excellent, le lime comme encre |

Sur un dégradé, vérifiez le point le plus clair derrière chaque ligne de texte, pas la couleur moyenne.

La dernière ligne mérite l’attention : le lime est une superbe couleur de texte sur noir. Un titre lime sur un dégradé presque noir est l’une des associations les plus lisibles qui soient. [Le texte sur dégradé](https://gradiently.design/fr/guide/text-on-gradient) couvre ce qu’il faut faire quand les mots traversent les deux extrémités d’un fondu.

Un post portrait de sortie produit annonçant des chaussures de court en lime, avec un texte clair sur un dégradé vert sombre éclairé de lime dans un coin

Des vêtements de sport sur fond sombre avec une lumière lime. Les mots se posent du côté sombre.

Un post portrait pour un bar à jus avec un titre vert foncé sur un dégradé lime pâle et citron

Un post de bar à jus sur un fond d’agrumes doux, avec une encre vert profond.

## CSS de dégradé lime pour boutons et heroes

Sur le web, le lime marche brillamment comme appel à l’action sur une page sombre et mal comme fond de page entier. L’extrait ci-dessous donne un hero sombre avec une lueur lime et un bouton lime au texte foncé. Interpoler en OKLCH garde le fondu vif là où le sRGB s’affaisserait ; [les dégradés OKLCH en CSS](https://gradiently.design/fr/guide/css-gradient-oklch) explique la syntaxe.

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

Un hero sombre avec une seule lumière lime, et un bouton lime au texte vert profond. Les navigateurs qui ne gèrent pas `in oklch` ignorent le second arrière-plan du bouton et gardent le premier.

## Où un dégradé vert lime marche le mieux

- **Sport et fitness :** jours de match, inscriptions de course, nouvelles tenues. Le lime sur noir se lit comme de la vitesse.
- **Musique et vie nocturne :** soirées en club et visuels de sortie, où il se place naturellement près des [dégradés néon](https://gradiently.design/fr/guide/neon-gradients).
- **Tech et lancements de produits :** un seul accent lime fait paraître une interface sombre allumée.
- **Cuisine et boissons fraîches :** jus, salades, cocktails et tout ce qui est agrume, dans la gamme pastel plus douce.
- **Campagnes de printemps :** le lime pâle et le citron disent nouvelle saison sans le rose pastel habituel.

Le lime étant si reconnaissable, il est aussi facile de ressembler à tous ceux qui s’y sont mis cette année. Dans Gradiently, chaque Mark est comparé à tous les autres et refusé s’il en est trop proche : un look lime que vous réservez est donc un look que personne d’autre ne peut exporter. Sa lisibilité s’ajuste aussi derrière chaque ligne, si bien que le lime ne se retrouve jamais sous des mots blancs par accident.

## FAQ

### Quel est le code hex du vert lime ?

Un lime vif très employé est `#a3e635`. Les limes plus pâles se situent autour de `#d9f99d` et les plus profonds autour de `#65a30d`. Le lime pur du web, `#00ff00`, est bien plus dur et rend rarement bien en design.

### Quelle couleur de texte sur un dégradé vert lime ?

Employez un vert très foncé comme `#1a2e05` ou un presque noir. Le texte blanc sur un lime vif échoue nettement au contraste, à environ 1,5:1.

### Quelles couleurs vont avec le vert lime dans un dégradé ?

Le jaune, le citron, la sarcelle, la menthe et l’olive profond se fondent nettement avec le lime. Le violet et le rose sont saisissants à côté, mais virent au gris si vous les fondez directement.

### Comment faire un dégradé vert fluo en CSS ?

Posez une lueur lime sur un fond presque noir, par exemple `radial-gradient(circle at 80% 20%, #a3e635 0%, #3f6212 30%, #0b0f05 70%)`. C’est le fond sombre qui fait paraître le lime fluo.

### Le vert lime est-il une bonne couleur de marque ?

Il peut l’être, pour des marques énergiques dans le sport, la musique, la tech ou la cuisine fraîche. Employez-le en accent sur un fond sombre ou crème plutôt qu’en surface entière, et associez-le à une encre foncée.