Palettes de couleurs SaaS, et pourquoi elles finissent toutes en bleu

La convergence est réelle et ce n'est pas un manque d'imagination. Quatre pressions indépendantes ont chacune le bleu comme réponse la plus sûre, et une équipe prenant chacune de ces quatre décisions de manière sensée arrive à ce résultat sans jamais l'avoir choisi délibérément.

1. Les couleurs de statut s'approprient d'abord les teintes précieuses. Le rouge est le danger, l'ambre est l'avertissement, le vert est le succès. Ce sont des codes appris, quasi universels et indisponibles. Ce qu'il reste comme accent de marque, c'est le bleu, le violet, le sarcelle ou un neutre chaud, et le bleu est la région la plus vaste et la plus sûre de ce qui reste.
2. Le contraste est plus facile en bleu. Un bleu moyen passe le test du contraste tant sur le blanc que sur le noir presque total avec le moins de réglages possible. Le jaune, le citron vert et l'orange nécessitent un véritable travail dans les deux sens, et ce travail intervient tard, sous la pression des délais, quand la solution est de « rendre cela plus bleu ».
3. La recherche sur la confiance est citée tôt et littéralement. Chaque article sur les couleurs de marque affirme que le bleu est perçu comme fiable et stable. Pour un produit qui demande à détenir les données de quelqu'un, cet argument gagne la réunion.
4. Valeurs par défaut. Les thèmes de départ des frameworks et des bibliothèques de composants livrent un primaire bleu ou violet. Une équipe qui ne le change jamais délibérément l'a tout de même choisi, et la plupart des équipes ont des choses plus urgentes à changer lors du premier mois.

C'est la version couleur d'une convergence plus large dans les interfaces logicielles, où les valeurs par défaut partagées et les conseils partagés produisent des résultats partagés. Le cas général, et ce à quoi cela ressemble lorsque la génération est automatisée, se trouve dans pourquoi les sites web générés par l'IA se ressemblent tous.

Voici l'observation qui change votre approche. Ouvrez n'importe quel écran de produit (une liste, une page de paramètres, un éditeur) et estimez quelle proportion est occupée par la couleur d'accent. C'est un bouton primaire, peut-être un élément de navigation actif, peut-être un lien. Considérez cela comme deux pour cent des pixels.

Les quatre-vingt-dix pour cent restants sont des neutres : fond de page, surfaces de cartes, bordures, lignes de tableau, texte de corps, texte secondaire, états désactivés. C'est ce que quelqu'un voit réellement lorsqu'il regarde votre produit, et sur la plupart des produits SaaS, il s'agit du *même gris neutre* que pour tout le monde, parce que l'accent était la seule décision prise.

Un neutre légèrement orienté vers le sable chaud, l'ardoise froide, la sauge ou l'encre paraît immédiatement intentionnel, ne coûte rien en termes de contraste et ne peut pas entrer en conflit avec une couleur de statut car sa saturation est quasi nulle. C'est la décision chromatique la plus efficace pour l'interface d'un produit, et pourtant celle que l'on oublie le plus souvent.

Les galeries et les générateurs de palettes présentent cinq échantillons sur une carte blanche, ce qui flatte n'importe quelle couleur. Une palette SaaS est jugée dans un environnement beaucoup moins indulgent : un écran dense, utilisé pendant des heures, par quelqu'un qui cherche à terminer une tâche et non à admirer vos couleurs.

• Un tableau de paramètres. Ligne d'en-tête, lignes de corps, survol, sélection, état désactivé et une bordure entre chaque élément. Cela nécessite environ huit valeurs neutres distinctes, et c'est là qu'une palette à trois gris échoue.
• Un formulaire avec une erreur. Texte d'erreur, bordure d'erreur, fond d'erreur et un libellé toujours lisible. Trois rôles que la plupart des palettes définissent comme un seul.
• Un état vide (empty state). Du texte atténué sur une surface atténuée, soit le couple le moins susceptible d'avoir été vérifié.
• Huit heures. Un accent saturé, ravissant sur une capture d'écran, devient fatigant lorsqu'il sert de surbrillance permanente dans la navigation. La couleur d'un produit se juge sur une journée de travail, pas au premier coup d'œil.
• Le mode sombre. De plus en plus le choix par défaut pour les produits destinés aux développeurs, et non une simple inversion de votre palette claire. Les spécificités mesurées se trouvent dans les palettes de couleurs pour le mode sombre qui tiennent la route.

L'argument précédent n'a de valeur que si les alternatives sont viables. Voici trois palettes complètes et adaptées au SaaS avec leurs valeurs hexadécimales réelles, chacune traitant le neutre différemment. Aucune n'est un simple mood board : chaque rôle nécessaire à un écran dense est présent, y compris ceux qui déterminent si un tableau est lisible.

1. 1

   Choisissez d'abord le neutre

   Déterminez la température de votre produit avant son accent : chaud (sable, argile, os), froid (ardoise, encre, acier), ou teinté vers une nuance que vous aimez. Tout devient plus simple une fois ce point fixé, et c'est la décision que les utilisateurs perçoivent réellement.

2. 2

   Construisez l'échelle complète de neutres

   Environ neuf étapes, espacées de manière perceptive plutôt que par une arithmétique hexadécimale régulière ; une progression régulière regroupe tout au centre et rend les extrêmes inutilisables. Conservez un peu de la teinte sur toute l'échelle pour maintenir la cohérence.

3. 3

   Réservez les couleurs de statut

   Succès, avertissement, danger, info. Fixez-les avant l'accent pour savoir ce qui est déjà pris, et ne laissez jamais un élément décoratif en emprunter une.

4. 4

   Choisissez l'accent parmi ce qui reste

   Le champ est maintenant réellement libre, car le neutre gère l'identité et l'accent doit seulement être distinct des couleurs de statut, lisible dans les deux modes et tolérable pendant huit heures.

5. 5

   Définissez chaque rôle pour les deux modes

   Ce n'est pas une palette, mais une liste de rôles. Background, foreground, card, popover, muted, primary, secondary, destructive, border, input, ring, et leurs foregrounds respectifs. Tout ce qui n'est pas défini sera improvisé écran par écran.

Chaque année apporte son lot d'articles sur les « tendances de palettes SaaS », et ils ne sont pas inutiles. Ils donnent une idée raisonnable de ce qui signale actuellement la modernité. En revanche, ils constituent une base médiocre pour une palette de produit pour une raison structurelle : une tendance est, par définition, ce qu'un grand nombre de personnes font en même temps. L'adopter, c'est s'engager vers la convergence plutôt que de s'en extraire. La palette qui paraissait fraîche en janvier est celle que trois concurrents auront également adoptée en juin.

La version plus durable de cet instinct consiste à s'inspirer de la *température du neutre* et à laisser de côté les teintes spécifiques. Un produit aux neutres chauds ne vieillit pas comme un accent spécifique, et c'est la couche que personne ne copie car personne ne remarque que c'est elle qui fait tout le travail.

L'UI des produits est de plus en plus générée plutôt que dessinée, et un écran généré remplit chaque valeur non spécifiée par la valeur par défaut du modèle, laquelle est la même pour tous les modèles. Nous avons analysé 299 fichiers DESIGN.md publics, écrits spécifiquement pour être suivis par un agent de code : 86 % listent des valeurs hexadécimales brutes sans rôle sémantique associé, et 54 % contiennent au moins un adjectif non mesurable, le plus souvent « clean » ou « moderne ».

« Propre et moderne » n'est pas une instruction. C'est un compliment, et un agent y répond en appliquant sa vision moyenne de ce qui est propre et moderne. À savoir : du bleu sur du gris, avec des cartes aux coins arrondis. Définir une palette via des rôles nommés avec des valeurs pour les deux modes change ce résultat dès le premier fichier.