Primaire, secondaire, accent : la couleur par rôle

Primaire, secondaire et accent sont des rôles qu’une couleur joue dans un produit, pas des types de couleur — et l’échelle est plus courte que le vocabulaire ne le laisse croire. Une palette possède exactement une couleur primaire (la couleur de marque qui identifie le produit et signale ses actions : boutons, liens, focus), zéro ou plusieurs couleurs secondaires (des teintes de soutien pour l’illustration, les données et les surfaces marketing), et un accent — qui n’est pas une troisième catégorie de couleur mais un usage : le travail de mise en valeur, généralement confié à la primaire elle-même ou à une secondaire. Autour d’elles se tient la distribution de soutien fixe que porte chaque palette : une échelle de neutres qui traite les surfaces et le texte, et les quatre couleurs fonctionnelles qui traitent le succès, l’avertissement, l’erreur et l’information.

Le vocabulaire s’est emmêlé parce que ces termes proviennent de traditions différentes — identité de marque, décoration d’intérieur, bibliothèques de composants — chacune les employant un peu différemment. Les démêler revient surtout à demander quel travail tient chaque couleur, la question qui parcourt tout notre guide des échelles de couleur.

Que fait réellement chaque rôle ?

Primaire (la couleur de marque). Exactement une. Elle identifie le produit et signale l’interaction : boutons, liens, anneaux de focus, états sélectionnés. Le « exactement une » est structurel, pas stylistique — quand deux teintes se disputent la couleur d’action, chaque écran doit renégocier laquelle signifie « appuyez ici ». Dans l’interface de palette de Scale Composer, le groupe est littéralement dimensionné pour cela : Marque ne contient qu’une seule couleur.

Secondaires. Zéro ou plusieurs teintes de soutien, et d’abord la note honnête : beaucoup d’interfaces solides n’en ont aucune. Une couleur de marque plus une échelle de neutres plus les quatre fonctionnelles couvrent un produit complet — chaque bouton, formulaire, état et niveau de texte est pris en compte. Les secondaires gagnent leur place sur les surfaces que la primaire ne peut couvrir seule : séries de données catégorielles, illustration, sections marketing, zones de sous-marque. C’est aussi là que les palettes s’alourdissent — des teintes ajoutées parce que la page de palette semblait vide, et qui errent ensuite dans le produit en quête d’un travail. Dans Scale Composer, elles forment le groupe ouvert, que l’on ajoute via le +.

Accent. Un usage, pas une couleur. Dans une palette à une seule couleur, la primaire est l’accent ; là où une teinte d’accent distincte existe, c’est une secondaire à qui l’on a confié le travail de mise en valeur. Traiter l’accent comme un rôle dissout l’inquiétude du « il nous faut encore choisir notre couleur d’accent » — vous l’avez peut-être déjà.

Neutres et fonctionnelles. La distribution fixe : l’échelle de neutres porte la plupart des pixels, et les quatre intentions fonctionnelles sont dictées par la convention (un groupe fixe dans Scale Composer). Aucune des deux n’est optionnelle, et aucune n’est vraiment choisie — plutôt réglée.

De combien de couleurs une palette a-t-elle réellement besoin ?

Moins que ne le suggèrent les pages de palette — et il existe une règle de proportion utile, à condition de la prendre pour ce qu’elle est. La règle du 60-30-10 est une heuristique empruntée à la décoration d’intérieur : une part dominante, une part secondaire, une petite part d’accent. Transposée honnêtement à l’UI, la répartition penche plus loin que le nom ne le laisse croire : les neutres prennent les ~60 et souvent bien plus — plus près de 90 % des pixels dans un produit dense en texte — la couleur de marque prend les ~10 en guise de ponctuation, et la bande du milieu, c’est tout le reste réuni : les secondaires là où elles existent, les nuances, les moments fonctionnels.

Les proportions ne sont pas une loi ; l’enseignement, c’est l’ordre. L’œil a besoin d’un champ dominant et calme pour que la figure se lise sur le fond, d’une famille subordonnée, et d’une mise en valeur rare — c’est la rareté qui fait qu’un accent se lit comme un accent. Une palette où trois teintes revendiquent chacune 30 % n’offre aucune hiérarchie que l’attention puisse suivre.

Ouvrez l’anatomie par rôle d’une palette complète dans Scale Composer — les quatre groupes en une seule vue : l’emplacement unique de la marque, la rangée des secondaires avec son +, l’échelle de neutres et les quatre fonctionnelles fixes.

Comment bien choisir ses secondaires ?

L’échec courant, c’est le choix à l’humeur : un turquoise parce qu’il paraît frais, un corail parce qu’un moodboard en contenait un. Les couleurs sont peut-être plaisantes, mais rien ne les rattache à la palette — ce sont des invitées, pas de la famille. L’alternative consiste à dériver les candidates de la géométrie propre à la primaire, pour que la relation soit structurelle avant d’être esthétique. À partir d’une seule primaire, Scale Composer en propose quatre :

La géométrie mérite qu’on la lise : deux propositions sont de proches voisines de la primaire (nuance, profondeur) — l’harmonie par parenté — et deux se placent en face sur la roue, encadrant le complément exact à ≈83° au lieu de tomber dessus, car un complément pur a tendance à vibrer contre son partenaire. La théorie des couleurs classique connaît ce voisinage sous le nom de territoire complémentaire divisé (split-complementary). Les propositions sont des candidates, pas des conclusions : un designer fait le tri — il retient l’ambre et écarte le reste, ou n’en retient aucune. Chaque secondaire qui survit devient une rampe complète avec la même mécanique que celle de la marque : courbe de luminosité, profil de chroma, rôles dérivés.

À quoi ressemblent les vraies compositions de palette ?

Trois compositions, de la plus petite à la plus grande. Le nombre de rampes suppose que chaque couleur est une échelle complète : une de marque + une de neutres + quatre fonctionnelles = six rampes avant même qu’une secondaire n’existe.

Le conseil découle du tableau : commencez au minimum, et ajoutez une secondaire quand une vraie surface l’exige — un graphique à quatre séries est une raison ; une page de palette qui a l’air vide n’en est pas une. Une secondaire qui arrive avec un travail reste cohérente ; celle qui arrive sur un coup de cœur part en chercher un.

Le + dans le groupe des secondaires, c’est là que le modèle par rôle devient concret. Ajoutez une secondaire et dérivez-la de votre primaire — les quatre propositions apparaissent avec leur géométrie de teinte. N’en gardez une que si vous pouvez nommer la surface qu’elle possédera.