Commencez par une observation désagréable : sur un site, la couleur n'est presque jamais décorative. Elle distingue le bouton principal du bouton secondaire, le lien du texte, l'erreur du succès, l'onglet actif des autres. Autrement dit, une palette web est un petit système de sens avant d'être un choix esthétique. Les palettes qui vieillissent mal sont celles qui ont été assemblées couleur par couleur, au gré des écrans ; celles qui tiennent ont été pensées rôle par rôle.
Partir d'une seule couleur, pas de dix
Une palette robuste se construit par génération autour d'une teinte porteuse — celle qui incarnera l'identité. De cette teinte, on dérive une rampe de nuances : des versions plus claires pour les fonds teintés et les survols, des versions plus sombres pour le texte sur fonds clairs. Cinq à sept paliers suffisent. La méthode la plus sûre consiste à faire varier la luminosité en conservant la teinte, plutôt que de picorer des couleurs voisines à l'œil : les rampes régulières se combinent sans surprise, les couleurs picorées finissent toujours par se contredire.
À cette rampe s'ajoutent des neutres — pas du gris pur, mais des gris très légèrement teintés de la couleur porteuse, pour que toute la page semble baigner dans la même lumière. Puis une encre presque noire pour le texte : le noir absolu sur blanc pur fatigue la lecture, un encre à 90 % de luminosité repose l'œil et affine l'ensemble.
Le 60-30-10, sans le respecter bêtement
La règle classique du 60-30-10 — dominante, secondaire, accent — reste un excellent point de départ : 60 % de neutre apaisant, 30 % de couleur de soutien, 10 % d'accent pour l'action. Mais son vrai enseignement n'est pas le dosage, c'est la rareté de l'accent. Une couleur d'accent fonctionne parce qu'elle est rare. Dès qu'elle apparaît au-delà de quelques éléments par écran, elle cesse de signaler l'action et devient un fond de plus — et il faut alors en chercher une autre, et la page se met à compter six couleurs pour trois rôles.
Une couleur d'accent perd son pouvoir à chaque usage inutile. Le budget de l'accent, c'est le nerf de la palette.
Couleurs fonctionnelles : les indispensables sous-estimées
Toute palette web complète compte des couleurs que personne ne trouve jolies mais que tout le monde attend : succès, erreur, avertissement, information. La tentation est de les choisir après coup, dans ce qui reste de la palette. C'est une erreur : ce sont les couleurs les plus regardées de l'interface, celles des moments de tension — un formulaire refusé, un paiement confirmé. Réservez-leur un vert, un rouge et un ambre choisis pour leur lisibilité sur vos fonds, testez-les en grand et en petit, et ne les réutilisez jamais comme couleurs décoratives : un visiteur qui voit du rouge « pour faire joli » dans un bandeau apprend que le rouge ne veut rien dire — jusqu'au jour où il ignorera une vraie erreur.
Contraste : la contrainte qui raffine
Les rapports de contraste exigés par les normes d'accessibilité ne sont pas une punition, elles sont un cahier des charges. Un texte principal à 4,5 pour 1 minimum, un texte grand à 3 pour 1 : ces seuils éliminent d'emblée la moitié des combinaisons séduisantes mais illisibles. Le réflexe utile consiste à vérifier le contraste dès le choix de la teinte porteuse, pas à la fin : si votre indigo de marque tombe à 3,8 sur blanc, décalez-le d'un palier vers le foncé pour le texte et gardez la version claire pour les fonds. La palette s'ajuste en amont, elle ne se répare pas en aval.
Et le mode sombre ?
Le mode sombre n'est pas un négatif photo de votre thème clair. Les couleurs y gagnent en luminosité et perdent en saturation ; le fond n'est pas noir mais un gris très sombre teinté ; les ombres disparaissent au profit de surfaces surélevées légèrement plus claires. Une palette pensée par rôles s'adapte : chacun garde son rôle, seule la rampe change. C'est le véritable dividende de la méthode — et le sujet voisin de la typographie fluide, traité dans le carnet n°76. Pour revoir les fondations de la hiérarchie que cette couleur vient habiller, revenez au carnet n°56 ; pour voir des identités chromatiques appliquées à des cas concrets, explorez nos études d'inspiration.