# Dégradés verts : frais, profonds et électriques [Canonical HTML page](https://gradiently.design/fr/guide/green-gradient) Le vert peut être un matin de printemps, un club privé ou un flyer de rave. Voici des dégradés verts pour chacun, avec les codes, et une issue au cliché du vert feuille. ## The short version - Un dégradé vert fond des nuances de vert, de la menthe pâle et de la sauge à l’émeraude, à la forêt et au vert citron électrique, souvent avec un turquoise ou un jaune voisin. - Le vert est largement associé à la nature, à la santé, à la croissance et à l’argent, ce qui explique sa présence dans l’écologie, le bien-être et la finance. - Le vert se fond proprement vers le turquoise, le bleu et le jaune, mais tend à tourner au gris quand on le mêle directement au rose, au rouge ou au violet. - Le texte blanc convient sur les verts profonds comme #14532d, mais un vert moyen comme #16a34a demande un texte foncé ou de grandes tailles. - Les verts inattendus comme l’olive, le vert bouteille et le chartreuse, associés à une couleur partenaire non naturelle, évitent le look écolo éculé. Un **dégradé vert** fond des nuances de vert, de la menthe pâle et de la sauge à l’émeraude et à la forêt, jusqu’au vert citron électrique, souvent avec un turquoise ou un jaune voisin. Le vert a plus d’amplitude que presque toute autre couleur : il peut paraître frais et net, profond et cher, ou bruyant et synthétique. Voici des palettes de dégradés verts pour chaque ambiance, avec le CSS à copier, les couleurs de texte qui y fonctionnent et le moyen de ne pas ressembler à tous les rapports de développement durable. ## La famille des verts Les verts penchent dans deux directions. Vers le jaune, ils deviennent citron vert, chartreuse et olive, plutôt chauds, énergiques ou terreux. Vers le bleu, ils deviennent sarcelle, jade et émeraude, plutôt froids, calmes et soignés. Grisez-les et vous obtenez la sauge, douce et posée. Assombrissez-les et vous obtenez la forêt et le vert bouteille, qui évoquent l’ancienneté et un certain luxe. - Menthe: #d1fae5 - Sauge: #a3b18a - Citron vert: #a3e635 - Émeraude: #059669 - Sarcelle: #0f766e - Olive: #556b2f - Forêt: #14532d - Vert bouteille: #0b3b2e Huit verts. Des versions tirant sur le jaune, tirant sur le bleu, grisées et profondes d’une même famille de couleurs. ## Ce que signale un dégradé vert Les associations les plus partagées du vert sont la nature, la croissance, la santé et la fraîcheur, qui viennent directement des plantes. La convention en a ajouté d’autres : partez sur les feux de signalisation, l’argent aux États-Unis à cause des billets, et la réussite dans les tableaux de bord et les applications de finance. Il porte aussi des sens religieux et nationaux dans certains pays ; [le sens des couleurs dans le monde](https://gradiently.design/fr/guide/color-meanings-around-the-world) les détaille. Concrètement, la nuance parle presque à elle seule. La menthe dit la netteté. La sauge dit le calme et la réflexion. La forêt et le bouteille disent l’héritage. Le citron vert dit l’énergie. Le turquoise dit le soin. Décidez lequel vous voulez dire avant de choisir un dégradé, et les palettes ci-dessous seront bien plus faciles à trier. ## Dégradés de vert frais et de menthe Les verts pâles paraissent nets, frais et légers. Ils vont bien à la peau, à la santé, à l’alimentation et à tout ce qui doit sembler frais. Gardez le texte foncé et réchauffez légèrement une extrémité pour éviter l’effet clinique. - Menthe: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)` - Matin de printemps: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)` - Papier sauge: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)` - Aqua vers citron vert: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)` Dégradés de vert clair. Les extrémités jaune et citron vert ajoutent de la chaleur et évitent le côté froid. ## Dégradés de vert profond et de forêt Les verts sombres comptent parmi les couleurs qui font le plus cher. Pensez aux voitures de course, aux vieilles bibliothèques et aux emballages de tradition. Ils portent très bien le texte blanc ou crème et s’associent à merveille à l’or, au laiton et au blanc cassé chaud. - Vert bouteille: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)` - Sous-bois: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)` - Éclat d’émeraude: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)` - Olive vers laiton: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)` Dégradés de vert profond. L’olive vers le laiton montre à quel point un vert sombre accueille bien un partenaire métallique chaud. ## Dégradés de vert citron électrique et de vert néon Les verts acides et citron vert sont bruyants et synthétiques, dans le bon sens. Ils vont au sport, à la musique, au jeu vidéo et aux lancements tech. Sur un fond presque noir, ils brillent ; sur du blanc, ils peuvent être pénibles à regarder, donc réservez-les-y à de petites zones. - Citron vert sur noir: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)` - Citron vert vers citron: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)` - Lueur acide: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)` - Vert vers cyan: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)` Verts électriques. Uniquement des voisins : le noir, le jaune et le cyan. ## Dégradés de sarcelle et de jade Un vert qui penche vers le bleu est calme, soigné et discrètement sûr de lui. Il fonctionne bien pour la finance, le bien-être et le voyage, et il est moins attendu que le bleu pur dans ces catégories. - Sarcelle profond: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)` - Jade vers aqua: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)` - Lumière de lagon: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)` Sarcelle et jade. Ils se situent entre les verts ci-dessus et les [dégradés bleus](https://gradiently.design/fr/guide/blue-gradient). ## Éviter le cliché du développement durable Parce que le vert est si fortement lié à la nature, il est devenu la couleur par défaut de tout ce qui est écolo, bio ou durable. Un vert feuille vif, un fond blanc et une icône de feuille se lisent désormais comme la catégorie, et non comme une entreprise en particulier. Si vous travaillez dans ce secteur et voulez vous faire remarquer, changez au moins l’un de ces trois éléments. ### Cliché - Vert feuille vif sur blanc - Du vert mêlé seulement à davantage de vert et de bleu - Des feuilles, des globes et des pousses en décoration - Un fini numérique lisse et brillant ### Frais - Olive, bouteille, sauge ou chartreuse - Un partenaire non naturel : rose, lilas, crème ou noir - Du texte et de la texture plutôt que des icônes - Un grain de papier ou une matière mate Le vert et le rose forment un excellent duo pour cela, car l’association évoque le botanique sans être littérale. Ils sont pourtant presque opposés sur le cercle chromatique : gardez-les donc dans des zones séparées plutôt que de fondre l’un dans l’autre. Les [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) expliquent pourquoi. Vert bouteille et rose, en deux parties: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)` Deux opposés côte à côte avec un bord net. Saisissant, botanique et à cent lieues d’une palette écolo de banque d’images. ## Le texte sur des dégradés verts | Texte sur fond | Contraste | Verdict | | --- | --- | --- | | Blanc sur `#14532d` | 9.1:1 | Excellent | | Blanc sur `#15803d` | 5.0:1 | Bon pour du texte courant | | Blanc sur `#16a34a` | 3.3:1 | Grand texte uniquement | | `#052e16` sur `#22c55e` | 6.5:1 | Une encre foncée fonctionne ici | | `#052e16` sur `#a3e635` | 9.9:1 | Excellent | | `#052e16` sur `#86efac` | 10.6:1 | Excellent | Rapports de contraste WCAG, calculés. Le texte courant demande 4,5:1, le grand texte 3:1. Les verts vifs sont plus clairs qu’ils n’en ont l’air, donc le texte blanc y échoue généralement. Une encre vert très foncé se lit mieux et garde l’ensemble dans la famille. Vérifiez le point le plus clair derrière un texte blanc sur n’importe quel dégradé ; [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) montre comment. Un post en portrait de carnet de terrain intitulé Ce qui pousse en octobre, sur un dégradé profond Un champ calme et profond pour un post éditorial. Une story verticale de compte à rebours indiquant Plus que 3 jours sur un dégradé vif Une story de compte à rebours bruyante, où un vert électrique brillerait. ```css .panel { background-color: #0b3b2e; background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%); color: #f5f0e6; } ``` Vert bouteille avec un texte crème chaud : une association simple et haut de gamme. Pour d’autres palettes tirées des forêts, des champs et de l’eau, voir les [palettes de couleurs de la nature](https://gradiently.design/fr/guide/nature-color-palettes). ## FAQ ### Quelles couleurs vont bien avec le vert dans un dégradé ? Le turquoise, le bleu, le jaune et le citron vert se fondent proprement avec le vert. Le rose, le rouge et le violet font des partenaires saisissants mais doivent rester dans des zones séparées, car mêler le vert à eux le fait tourner au gris. ### Quel est le CSS d’un dégradé vert foncé ? Par exemple, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) donne un vert bouteille profond. Chaque palette de cette page peut être copiée en CSS. ### Quelle couleur de texte va sur du vert ? Le blanc ou le crème conviennent sur les verts profonds. Sur les verts vifs ou clairs, utilisez une encre vert très foncé, car le texte blanc passe généralement sous le contraste recommandé. ### Comment utiliser le vert sans avoir l’air d’une marque écolo ? Choisissez des verts moins attendus comme l’olive, le bouteille ou le chartreuse, associez-les à une couleur non naturelle comme le rose ou le lilas, et employez de la texture ou du texte plutôt que des motifs de feuilles.