Palettes de vert pour site web : 6 schémas avec codes hex

Palettes de vert pour site web avec codes hex, paires de texte vérifiées en contraste et cas d'usage, pour choisir un vert lisible qui colle à votre marque.

Questions fréquentes

Quel est le meilleur vert pour un site web ?

Il n'existe pas de meilleur vert universel, mais un vert profond légèrement désaturé comme #166534 ou #2D6A4F est le point de départ le plus sûr. Tous deux dépassent le seuil WCAG AA de 4,5:1 pour le texte sur fond blanc (7,13:1 et 6,39:1), ils conviennent donc aux boutons, aux liens et aux titres. Les verts vifs comme #22C55E échouent sur blanc (2,28:1) et sont préférables pour des icônes ou des fonds sombres.

Quelles couleurs associer au vert sur un site web ?

Les blancs cassés chauds et les crèmes (#F6F4EC), les verts presque noirs (#081C15) et un seul accent chaud, comme l'ambre ou la terracotta, fonctionnent bien ensemble. Gardez des neutres teintés de vert plutôt que des gris purs pour que la page reste cohérente, et limitez l'accent à une seule couleur d'action.

Le vert est-il accessible pour le texte ?

Les verts foncés, oui ; les verts clairs et moyens, souvent non. Les WCAG 2 AA exigent au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants d'interface. Testez chaque paire plutôt que de vous fier à l'œil : les verts de ton moyen comme #40916C (3,83:1 sur blanc) ne passent que pour le grand texte.

Que communique le vert en web design ?

Le vert est le plus souvent associé à la nature, à la croissance, à la santé, à la durabilité et à l'argent, d'où sa présence fréquente sur les sites de bien-être, de finance, d'énergie et de plein air. Le sens change selon la nuance : les verts forêt profonds évoquent le sérieux et le calme, tandis que le vert lime paraît énergique et moderne. Voyez-y des conventions, pas des garanties, et testez auprès de votre propre public.

Faut-il utiliser du vert pour les boutons d'appel à l'action ?

Oui, à condition que le bouton se détache du reste de la page et que son libellé respecte le contraste. Un bouton vert foncé avec du texte blanc fonctionne sur les pages claires. Sur une page majoritairement verte, un bouton d'accent chaud ressort souvent mieux. Consultez notre guide sur les schémas de couleurs favorables à la conversion pour trancher.

Ai-je besoin d'une palette verte pour le mode sombre ?

Ce n'est pas obligatoire, mais les fonds vert foncé sont déjà un choix de design très apprécié. Si vous en proposez un, ne réutilisez pas simplement la palette claire : les verts vifs qui échouent sur blanc fonctionnent souvent très bien sur un vert presque noir, par exemple #22C55E sur #052E16 mesure 6,54:1.

En bref : pour un site web vert, utilisez un vert profond comme #166534 ou #2D6A4F pour les boutons, les liens et les titres, un blanc cassé teinté comme #F6F4EC ou #F0FDF4 pour l'arrière-plan, et réservez les verts vifs comme #22C55E aux fonds sombres ou à la décoration. Les verts foncés sur fond clair dépassent le seuil WCAG AA de 4,5:1 pour le texte. Les verts vifs sur blanc, non (#22C55E sur blanc : 2,28:1).

Voici six palettes de vert avec leurs valeurs hex, leurs ratios de contraste mesurés et le type de site auquel chacune convient. Chaque ratio a été calculé avec la formule de luminance relative des WCAG, et vous pouvez vérifier n'importe quelle paire vous-même avec le vérificateur de contraste des couleurs.

Pourquoi le vert est délicat à l'écran

Le vert se situe au milieu de l'échelle de luminance. Un vert moyen paraît éclatant, mais sur du blanc il est souvent trop clair pour du texte, et sur du noir souvent trop sombre. C'est pourquoi un vert superbe dans un logo peut échouer comme couleur de bouton.

La règle pratique : choisissez votre vert d'après son ratio de contraste, pas d'après son aspect dans un échantillon. Pour le texte normal, visez 4,5:1 ou plus. Pour le grand texte (environ 24 px en graisse normale ou 19 px en gras, et plus) et pour les composants d'interface comme les bordures de champs et les icônes, 3:1 est le minimum.

Six palettes de vert pour site web avec codes hex

Chaque palette indique un arrière-plan, une couleur de texte, un accent pour les boutons ou les liens, et le ratio de contraste de la paire qui compte.

1. Forêt et crème (éditorial, plein air, restauration)

Rôle	Hex	Paire et ratio
Arrière-plan	#F6F4EC
Texte et titres	#1B4332	sur l'arrière-plan : 10,06:1
Bouton / lien	#2D6A4F	texte blanc dessus : 6,39:1
Panneau doux	#95D5B2	texte #1B4332 dessus : 6,56:1

Chaleureuse, apaisante et lisible. L'arrière-plan crème évite l'effet clinique. Idéale pour les restaurants, les fermes et épiceries fines, le voyage et les sites de contenu long.

2. Menthe fraîche (bien-être, cliniques, contenus santé)

Rôle	Hex	Paire et ratio
Arrière-plan	#F0FDF4
Texte et titres	#14532D	sur l'arrière-plan : 8,70:1
Bouton	#15803D	texte blanc dessus : 5,02:1
Bandeau sombre	#052E16	texte #DCFCE7 dessus : 13,57:1

Légère et nette. Le vert du bouton dépasse tout juste le seuil AA : gardez donc les libellés de boutons en graisse normale ou plus épaisse, et évitez de le placer sur des panneaux teintés.

3. Sauge et olive (studios, décoration d'intérieur, artisanat)

Rôle	Hex	Paire et ratio
Arrière-plan	#E9F5DB
Texte et titres	#31572C	sur l'arrière-plan : 7,33:1
Bouton	#4F772D	texte blanc dessus : 5,24:1
Mise en avant	#90A955	texte #132A13 dessus : 5,84:1

Une palette terreuse et sourde. Elle convient bien aux portfolios et aux marques de boutique qui veulent du vert sans qu'il crie.

4. Thème sombre vert profond (fintech, SaaS, premium)

Rôle	Hex	Paire et ratio
Arrière-plan	#081C15
Texte	#B7E4C7	sur l'arrière-plan : 12,58:1
Accent / liens	#40916C	sur l'arrière-plan : 4,62:1
Carte	#1B4332	texte #95D5B2 dessus : 6,56:1

Sur fond sombre, les verts moyens peuvent servir d'accents. Notez que #40916C passe sur #081C15 mais échoue sur blanc (3,83:1) : ne le réutilisez donc pas dans une section claire.

5. Vert lime fluo sur vert foncé (événements, créateurs, marques jeunes)

Rôle	Hex	Paire et ratio
Arrière-plan	#1A2E05
Titre / bouton	#A3E635	sur l'arrière-plan : 9,69:1
Autre vert vif	#22C55E	sur #052E16 : 6,54:1

Très énergique et très lisible, car le lime clair repose sur une base sombre. Utilisez-le avec parcimonie : une page entière en lime fatigue vite l'œil.

6. Vert sarcelle (SaaS, healthtech, durabilité)

Rôle	Hex	Paire et ratio
Arrière-plan	#CCFBF1
Texte et titres	#134E4A	sur l'arrière-plan : 8,41:1
Bouton	#0F766E	texte blanc dessus : 5,47:1

Tire vers le bleu-vert, ce qui donne une impression plus technique et moins « nature ». Un bon choix quand vous voulez du vert sans l'aspect organique.

Les verts qui échouent, et quoi utiliser à la place

Échoue	Paire	Ratio	À remplacer par
Bouton vert vif	#22C55E avec texte blanc	2,28:1	#15803D avec texte blanc (5,02:1)
Lien vert lime sur blanc	#65A30D sur blanc	3,09:1	#4D7C0F sur blanc (4,99:1)
Texte courant en vert moyen	#40916C sur blanc	3,83:1	#2D6A4F sur blanc (6,39:1)

Les teintes moyennes passent tout de même la barre des 3:1 : elles sont donc acceptables pour de grands titres, des icônes et des bordures, mais pas pour des paragraphes ni de petits liens. Pour en savoir plus sur ce qui pose problème, consultez les exemples de mauvais contraste des couleurs et, pour des associations plus solides en général, le guide des palettes de couleurs à fort contraste.

Construire sa propre palette verte, étape par étape

Définissez d'abord le rôle du vert. Est-ce la couleur de marque, la couleur d'action ou simplement un accent ? Un vert réservé à la marque peut avoir n'importe quelle nuance. Un vert d'action doit respecter le contraste.
Choisissez une ancre foncée. Partez d'un vert autour de #14532D à #2D6A4F. Ce sera la couleur de vos titres, de vos liens et de vos boutons sur fond clair.
Teintez votre arrière-plan. Utilisez un vert très clair ou une crème chaude plutôt que du blanc pur, par exemple #F0FDF4 ou #F6F4EC. Revérifiez le contraste du texte après la teinte.
Ajoutez un accent qui n'est pas vert. L'ambre ou la terracotta sur du vert détache les boutons dans les pages très vertes. Vérifiez le contraste du libellé : par exemple, du texte #92400E sur #FEF3C7 mesure 6,37:1.
Testez chaque paire texte-arrière-plan. Passez les titres, le texte courant, les liens, les boutons et le texte des placeholders dans un vérificateur. Tout ce qui est sous 4,5:1 à la taille du texte courant demande une nuance plus foncée ou plus claire.
Contrôlez les états de survol et désactivé. Les nuances au survol dérivent souvent vers l'échec.
Enregistrez la palette sous forme de jetons nommés. Des noms de variables comme brand-900, brand-700 et brand-100 transforment les changements futurs en modification d'une seule ligne. Notre guide des couleurs Tailwind CSS présente l'idée de l'échelle de nuances, et plusieurs codes hex ci-dessus viennent de ce type d'échelle.

Quel vert pour quel type de site

Durabilité, énergie, associations : forêt et crème, ou sauge. Retrouvez cette ambiance dans notre modèle Greenfield Renewables.
Santé et bien-être : menthe fraîche ou vert sarcelle.
Finance et SaaS : thème sombre vert profond, avec un seul accent vif.
Restauration, ferme, jardin : forêt et crème avec un accent chaud.
Pages de créateurs et d'événements : vert lime fluo sur vert foncé, limité aux titres et à un seul bouton.

Checklist à copier avant de publier

[ ] Le texte courant atteint au moins 4,5:1 sur son arrière-plan
[ ] Le grand texte et les icônes atteignent au moins 3:1
[ ] Les libellés de boutons atteignent 4,5:1 sur le fond du bouton
[ ] Les liens se distinguent du texte courant autrement que par la couleur seule (le soulignement fonctionne)
[ ] Les verts vifs n'apparaissent que sur fonds sombres ou en décoration
[ ] Pas plus d'une couleur d'accent en plus du vert
[ ] Les sections sombres utilisent leurs propres paires testées, pas celles du mode clair recyclées
[ ] La palette est enregistrée sous forme de jetons nommés pour être modifiable à un seul endroit

Si vous ne savez pas combien de couleurs il faut au total pour un site, le guide des schémas de couleurs de site web couvre les bases, et l'entrée du glossaire sur la palette de couleurs définit les termes employés ici.

Appliquer une palette verte à un vrai site

Une fois vos codes hex en main, il vous faut un endroit pour les appliquer. Le forfait gratuit de We.Inc vous permet de publier jusqu'à trois sites à partir de modèles prêts à l'emploi ; le créateur IA qui rédige un site à partir d'une consigne démarre avec le forfait Starter à $20 par mois. Vous pouvez vous inscrire ici, coller vos codes hex d'arrière-plan, de texte et de bouton dans les styles du site, puis refaire les mêmes contrôles de contraste sur les pages publiées.

Commencer gratuitement · Sans carte bancaire

Umair Ali Sadaqat

Fondateur de We.Inc

Umair est le fondateur de We.Inc. Il écrit sur la création de sites web avec l’IA, les agences et la gestion d’un studio web.

Prêt à créer quelque chose de grand ?

Rejoignez les 15,000+ entreprises qui utilisent We.Inc pour lancer, développer et automatiser, le tout depuis une seule plateforme.