32 palettes de couleurs pour sites web avec codes hex, issues des templates We.Inc, plus comment créer une palette qui convertit : une base calme avec un accent réservé aux actions, des exemples par secteur et des vérifications d’accessibilité.
Aucune couleur ne gagne partout. La meilleure couleur de bouton est celle qui contraste fortement avec la page et n’est pas utilisée pour autre chose, de sorte que le regard s’y dirige naturellement.
Une méthode courante consiste à partir d’une base neutre (blanc ou blanc cassé et texte foncé), d’une couleur principale de marque et d’un accent pour les appels à l’action, puis d’ajouter des couleurs sémantiques pour les messages de réussite et d’erreur. Au-delà, la hiérarchie visuelle s’affaiblit généralement.
Les associations de couleurs existent, mais varient selon la culture, le secteur et le contexte ; de nombreuses affirmations populaires sont exagérées. Ce qui influe de façon fiable sur les conversions, c’est le contraste, la lisibilité et la visibilité de l’action souhaitée.
Les acheteurs industriels apprécient la clarté et la confiance. Le bleu marine, l’anthracite et les gris acier associés à un seul accent soutenu, souvent orange de sécurité, jaune ou bleu vif, conviennent au secteur. Utilisez l’accent pour les fiches techniques, boutons de devis et numéros de téléphone afin qu’ils soient faciles à trouver.
Utilisez un outil de vérification du contraste comme celui de WebAIM. Le niveau AA de WCAG 2.2 demande un contraste d’au moins 4.5:1 pour le texte normal et de 3:1 pour le grand texte et les éléments d’interface clés comme les bordures de boutons et champs de formulaire.
Aucune couleur ne convertit mieux que toutes les autres. Ce qui compte, c’est à quel point un bouton se détache par rapport à la page. Les palettes qui convertissent ont une base calme et cohérente, avec un accent très contrasté réservé uniquement aux actions que vous voulez faire réaliser.
Au lieu de demander « quelle couleur ? », demandez-vous : « Mon bouton le plus important ne ressemble-t-il à rien d’autre sur la page ? » Ce guide explique comment construire une palette autour de cette idée.
Ces palettes sont tirées des templates de We.Inc (les quatre couleurs les plus utilisées dans l’aperçu de chaque design, à l’exclusion des gris simples du cadre d’aperçu). Il s’agit de templates, pas de sites clients, et nous ne faisons aucune affirmation sur leurs taux de conversion. Copiez un code hex dans le sélecteur de couleur hex pour le voir et obtenir les valeurs RVB/TSL, et vérifiez chaque paire texte-fond dans le vérificateur de contraste de couleurs avant de l’utiliser.
| Template We.Inc | Style | Couleurs (hex) | Palette |
|---|---|---|---|
| Atlas Builders | Construction / métiers | #101d2c #0b1521 #f2a614 #d18f0a | Base bleu marine profond, accent ambré |
| Summit Trades | Métiers | #0e2436 #e4671e #16222e #f6eeec | Marine avec orange sécurité |
| Ironpeak Roofing | Toiture | #e4671e #0e2436 #17415f #16222e | Dominante orange, structure marine |
| Ridgewater Plumbing | Plomberie | #b08544 #d8401f #f2ede3 #c9a063 | Laiton et rouge sur crème chaude |
| Sunward Solar | Solaire | #0b1f3a #f5a524 #d98a0b #fff6e6 | Bleu nuit et or solaire |
| Hookline Towing | Remorquage | #0e0e0e #ffc400 #f4f1ea #161616 | Noir et jaune haute visibilité |
| Redline Auto Group | Concessionnaire auto | #e3262e #0e0f11 #eeeeee #17191c | Rouge course sur quasi-noir |
| Maple Street Motors | Réparation auto | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Vert forêt avec moutarde |
| Freshpile Carpet Cleaning | Nettoyage | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Jaune vif sur marine royal |
| Tideline Pressure Washing | Nettoyage extérieur | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Marine foncé avec aqua |
| Mowline Lawn Care | Entretien pelouse | #eef3e6 #c6f24e #0f1410 #1a2a17 | Base vert pâle, accent citron |
| Fairway Lawn Co. | Paysagisme | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Crème, vert profond, or doux |
| Brightside Dental | Dentisterie | #10312e #3f605c #0e5f57 #0a4841 | Verts teal apaisants |
| Meadowpaw Veterinary | Vétérinaire | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Teal atténué sur menthe pâle |
| Vibrant Wellness | Clinique bien-être | #25382c #eef2e6 #7c9a7e #3f6b4a | Sauge et forêt |
| Kinfolk Home Care | Aide à domicile | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Vert pin avec jaune chaud |
| Lumora | Santé | #c8a97e #182c41 #0b1220 #0e1a26 | Marine minuit avec or sable |
| Sterling & Vance LLP | Cabinet d’avocats | #8a93a2 #b08a4f #0b0e14 #f6eeec | Ardoise, bronze et encre |
| Harborview Wealth Partners | Conseil financier | #102a43 #b08d57 #d9bf8f #faf8f4 | Marine et or sur ivoire |
| Harborline Insurance Agency | Assurance | #0f2742 #5fd3c9 #17a398 #0b1e33 | Marine avec teal |
| Larkfield Partners | Conseil | #1f4d3f #f4f1ea #14181c #4a5560 | Vert bouteille sur papier |
| Keystone Realty | Immobilier | #f6eeec #7a2e2a #59606b #e9f0ef | Base blush avec bordeaux |
| Lucia Trattoria | Restaurant | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Sable chaud avec olive-noir |
| Ember & Roast | Café / restaurant | #ede6dc #c9642f #14100d #f6eeec | Avoine, orange brûlé, espresso |
| Kilnhouse Coffee | Café | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Brun torréfié et terracotta |
| Parcel No. 9 Wines | Vignoble | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Bordeaux avec rose |
| Petalry Florist | Fleuriste | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Prune et rose poudré |
| Hollow Oak Farm Shop | Magasin de ferme | #24301f #f6f1e4 #5e7f3a #e3a33b | Mousse, crème et miel |
| Suds & Scruff | Toilettage animal | #3b1740 #ffd84d #ff8fab #fff8e7 | Aubergine, jaune et rose |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Violet avec corail |
| Mast Security | Sécurité | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Graphite avec menthe |
| Afterglow Sound | Événements / musique | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavande, rose et violet |
Un motif se dégage : la plupart associent une base sombre ou pâle à un seul accent saturé (ambré, orange, jaune, citron ou corail). C’est la même structure « base discrète, une couleur d’action » décrite ci-dessous.
Les articles sur la psychologie des couleurs affirment souvent que le bleu inspire confiance, le rouge l’urgence et le vert la croissance. Certaines associations générales existent, mais elles dépendent beaucoup de la culture, du secteur et du contexte. Le rouge signale un danger dans une situation et une célébration dans une autre. Le vert peut signifier « avancer », « écologique » ou « argent ».
L’effet d’isolement, aussi appelé effet Von Restorff, est mieux étayé : un élément qui se distingue de son environnement a plus de chances d’être remarqué et mémorisé. Un bouton qui est le seul élément orange sur une page bleue et blanche attire le regard. Le même orange sur une page entièrement orange ne le fait pas.
Deux règles fonctionnent donc dans tous les secteurs :
Les architectes d’intérieur appliquent la répartition 60-30-10, qui fonctionne bien pour les sites :
| Part | Fonction | Choix habituel |
|---|---|---|
| ~60% | Fond et base | Blanc, blanc cassé, gris très clair ou couleur foncée pour un thème sombre |
| ~30% | Marque et structure | Couleur de marque principale pour en-tête, navigation et fonds de section |
| ~10% | Accent / action | Boutons, liens importants, l’élément que vous voulez faire cliquer |
Ajoutez une couleur foncée pour le texte (noir profond ou gris foncé plutôt que noir pur) et des couleurs sémantiques : vert pour la réussite, rouge pour les erreurs, ambre pour les avertissements. Évitez d’utiliser ces couleurs sémantiques pour les principaux boutons, afin qu’un bouton « Acheter » ne soit pas confondu avec une erreur.
Si vous avez un logo, utilisez sa couleur principale. Sinon, choisissez une couleur adaptée à votre secteur (voir le tableau ci-dessous) et que vous aurez plaisir à garder.
Regardez le cercle chromatique. Les couleurs complémentaires (opposées) créent le contraste le plus marqué : bleu et orange, violet et jaune, turquoise et corail. Si votre marque est bleue, un accent orange ou jaune chaud se détachera bien mieux qu’une autre nuance de bleu.
Choisissez un fond, une couleur de surface pour les cartes, un gris de bordure et une couleur de texte. Ces tons font l’essentiel du travail et doivent rester discrets.
Passez chaque combinaison de texte et de bouton dans un outil de contraste (celui de WebAIM est gratuit). Le niveau AA de WCAG 2.2 exige :
Le texte gris clair sur fond blanc est l’un des problèmes de lisibilité les plus fréquents en ligne. Si les visiteurs ont du mal à lire votre offre, la couleur du bouton importe peu.
Vérifiez la palette sur un téléphone en extérieur, un ordinateur portable d’entrée de gamme et en mode sombre si le site le propose. Les couleurs raffinées sur l’écran d’un designer peuvent paraître délavées ailleurs.
Ce sont des points de départ raisonnables, pas des règles. Chaque palette associe une base discrète à un accent contrastant.
| Secteur | Base et couleur principale | Accent pour les actions | Pourquoi ça marche |
|---|---|---|---|
| Industrie / fabrication | Bleu marine, anthracite, gris acier | Orange ou jaune de sécurité | Sérieux et fiable, avec un « Demander un devis » visible |
| Santé / dentisterie | Blanc, bleu doux ou turquoise | Corail chaud ou vert | Propre et apaisant ; prise de rendez-vous visible |
| Droit / finance | Bleu marine profond ou vert forêt, crème | Or ou bleu vif | Codes de confiance classiques et contact clair |
| Restaurants / alimentation | Tons neutres chauds, rouge profond ou olive | Jaune vif ou orange | Appétissant, avec « Commander » ou « Réserver » évident |
| SaaS / technologie | Blanc ou presque noir, indigo ou bleu | Vert vif, orange ou rose | Net, avec un « Commencer gratuitement » contrasté |
| Beauté / bien-être | Rose poudré, sauge, crème | Prune foncé ou noir | Marque douce, bouton de réservation affirmé |
| Services à domicile (plomberie, CVC, toiture) | Blanc, bleu foncé | Rouge ou orange | Bouton d’appel urgent pour les urgences |
| Commerce en ligne / mode | Principalement blanc et noir | Un accent de marque | Laisse les photos produit porter la couleur |
Pour les fabricants, les acheteurs arrivent souvent sur une page de produit ou de capacités et veulent une fiche technique ou un devis. Sur ces pages, réservez la couleur d’accent à « Demander un devis », « Télécharger la fiche technique » et au numéro de téléphone.
Imaginez le site d’une entreprise de paysagisme avec logo vert, titres verts, icônes vertes, fond vert dans le bandeau principal et bouton vert « Obtenir un devis gratuit ». Tout respecte la marque, mais le bouton disparaît.
La solution :
La marque n’a pas changé, mais l’action est maintenant l’élément le plus visible de l’écran.
Si votre trafic est suffisant, réalisez un test A/B du bouton ou de l’accent, en ne changeant qu’un élément à la fois et en laissant le test se dérouler assez longtemps pour obtenir un résultat significatif. Les sites à faible trafic n’ont souvent pas de résultats fiables ; ces vérifications simples leur conviennent mieux :
La couleur n’est qu’un facteur de conversion ; notre analyse des exemples de pages d’atterrissage efficaces aborde les autres. Avec We.Inc, décrivez l’apparence voulue dans le chat, par exemple « bleu marine et gris avec un bouton de devis orange », parcourez les modèles, puis ajustez les couleurs visuellement ou dans le code.
Commencer gratuitement · Sans carte bancaire