Palettes de couleurs qui convertissent : au-dela de la charte

Une palette de marque se reduit trop souvent a six pastilles dans un Figma : primaire, secondaire, deux accents, deux neutres. Cela ne suffit pas. Un systeme couleur doit survivre au produit reel, aux contraintes d'accessibilite, et soutenir la conversion. Voici comment nous le construisons.

Le piege des six pastilles

Six couleurs n'ont jamais permis de coder une interface complete. Il manque : les variations claires et foncees de la primaire (pour les hovers, les fonds, les bordures), les variations grises (pour le texte muted, les separateurs, les disabled), les couleurs semantiques (succes, erreur, warning, info), les couleurs d'etat (selected, focus, pressed).

Resultat sur le terrain : les developpeurs improvisent, et la marque diverge en six mois. La palette consultee dans Figma ne ressemble plus a rien sur le produit.

Le systeme par paliers numerotes

Plutot que "primaire, secondaire, accent", utiliser des paliers numerotes par couleur. Par exemple, pour la couleur brand : brand-50, brand-100, brand-200, jusqu'a brand-900. Idem pour gray, success, error, warning, info.

Ce systeme, popularise par Tailwind, Radix et Material, a un avantage decisif : il decuple la palette utilisable sans alourdir le brief. Le developpeur sait que brand-500 est la couleur "principale", brand-100 son fond clair, brand-900 son texte sur fond clair. Aucune ambiguite.

Verifier les contrastes des le brief

Une palette qui ne passe pas WCAG AA n'est pas une palette, c'est un cauchemar a venir. Avant de valider la primaire, tester : contraste contre fond blanc (minimum 4.5:1 pour le texte normal), contraste contre fond noir (idem), contraste entre primaire et son texte associe (boutons), contraste des états hover et disabled.

Un outil rapide : webaim.org/resources/contrastchecker. Une fois la palette validee, generer un tableau de contrastes pour les developpeurs : c'est le meilleur livrable que l'on puisse fournir.

Reserver une couleur a la conversion

Si la marque est bleue, le bouton principal ne doit pas etre bleu. Sinon les CTAs se fondent dans la masse. Reserver une couleur d'accent contrastee, utilisee exclusivement sur les boutons de conversion, augmente leur visibilite et leur clic.

Exemple : Stripe utilise un bleu nuit comme couleur de marque, mais ses CTAs principaux sont en violet electrique. Linear utilise un degrade violet-rose pour la marque, mais ses CTAs sont en blanc sur fond noir. La couleur conversion n'est pas la couleur marque. C'est une regle.

Le mode sombre n'est pas une inversion

Beaucoup de palettes prevoient un mode sombre par inversion : ce qui etait fonce devient clair, et inversement. Resultat : un noir pur fatigant, des accents qui paraissent fluo, des contrastes desequilibres.

Le mode sombre est un theme alternatif, pas un negatif. Il necessite ses propres paliers (souvent moins satures et legerement plus chauds), ses propres semantiques (rouge moins agressif, vert plus desature), et ses propres tests de contraste.

La validation par les emails transactionnels

Une palette validee uniquement sur le site est une palette qui va casser sur les emails. Les clients email (Outlook, Gmail, Apple Mail) interpretent les couleurs differemment, certaines ne supportent pas le mode sombre forcé, d'autres convertissent en JPG.

Tester la palette des le brief sur les trois templates emails les plus envoyes : welcome, transactional, marketing. Si les couleurs cassent ou paraissent ternes, ajuster avant de partir en design final.

Documenter en code, pas seulement en Figma

Le livrable final d'une palette en 2026 n'est plus un Figma. C'est un fichier de tokens (JSON ou CSS Custom Properties) que les developpeurs peuvent importer directement. Format usuel : un objet JSON par couleur, avec ses paliers et leurs contrastes calcules.

Ce livrable assure que la palette survit au temps. Six mois apres la mission, quand un nouveau developpeur arrive et qu'il a besoin de la couleur de succes, il la trouve en deux secondes. C'est le critere reel de qualite d'une palette : sa duree de vie operationnelle.