Mis à jour 10 juillet 2026

Échelles de couleur et palettes d’UI : le guide pratique

Une échelle de couleur est une suite de paliers ordonnés — numérotés par convention de 50 à 900 — générée à partir d’une seule couleur de départ, de sorte qu’une palette entière découle d’une poignée de décisions plutôt que de dizaines de valeurs choisies à la main. L’échelle est à la couleur ce qu’une échelle typographique est aux tailles de police : un petit système qui répond à la plupart des questions avant qu’elles ne soient posées. Ce hub rassemble nos guides sur leur construction et leur usage ; l’orientation la plus rapide est d’ouvrir une rampe complète et d’en voir l’anatomie.

Une couleur en entrée, un système en sortie

La méthode de travail derrière chaque guide ici : vous choisissez une seule couleur de marque, et la mécanique fait le reste — dix paliers placés sur une courbe de luminosité, une saturation façonnée pour que le milieu rayonne et que les extrémités restent utilisables, une échelle de neutres teintée faiblement vers la teinte de la marque, et des couleurs fonctionnelles pour le succès, l’avertissement, l’erreur et l’information. Ce qui était autrefois quarante valeurs hex choisies à la main devient une poignée de couleurs de départ et un jeu de règles que vous pouvez inspecter.

Arrêtez de choisir vos couleurs à la main défend cette manière de travailler, et Générer une palette complète à partir d’une seule couleur de marque déroule la dérivation de bout en bout. Les deux règles qui font l’essentiel du travail ont chacune leur propre guide : Courbes de luminosité sur les raisons pour lesquelles des paliers qui paraissent réguliers ne peuvent pas être numériquement linéaires, et Profils de chroma sur l’endroit où la saturation doit culminer et pourquoi elle doit s’atténuer vers les deux extrémités. Construire une échelle de neutres couvre la légère teinte de marque qui empêche les gris de paraître morts. C’est aussi la méthode que met en œuvre Scale Composer — là, la palette côtoie la typographie et la grille, toutes trois dérivées d’une même échelle partagée.

Les paliers sont le vocabulaire

La numérotation 50–900 n’est pas décorative — c’est ce qui rend la couleur discutable. « Utilise brand-100 pour la teinte et brand-700 pour le texte » est une instruction que deux personnes peuvent exécuter à l’identique. Les guides ci-dessous couvrent ce que signifient les nombres, combien de paliers une échelle exige, et pourquoi l’écart entre paliers voisins doit rester visible — une échelle dont les paliers ne se distinguent pas est un vocabulaire fait de synonymes que personne n’a demandés.

Pourquoi les paliers de couleur sont nommés 50–900 retrace la convention et l’espace que ses écarts laissent délibérément, et Nommer les tokens de couleur tranche la question brand-600 vs blue-600 — le choix de nommage qui décide à quel point un futur changement de marque sera douloureux. Le vocabulaire gagne aussi sa place dans les états d’interaction : États de survol et enfoncé montre pourquoi « un palier plus loin sur l’échelle » produit de meilleures couleurs d’état que le mélange de noir ou de blanc dans la couleur de base.

Des rôles, pas des couleurs

La dernière couche est sémantique : les boutons, les bordures, les arrière-plans et le texte ne référencent pas des paliers bruts — ils référencent des rôles qui pointent vers des paliers, avec des exigences de contraste vérifiées là où les rôles se rencontrent. C’est ce qui rend une palette maintenable : réaccordez la couleur de départ et chaque rôle suit, parce que rien en aval n’a jamais codé en dur une valeur hex. Primaire, secondaire, accent couvre la couche de rôle pour les couleurs de marque, Succès, avertissement, erreur, information couvre les couleurs de retour, et Texte sur boutons colorés gère l’appariement que tout produit livre : le choix de la couleur posée dessus. Le modèle colorimétrique qui rend tout cela calculable a sa propre série dans le guide OKLCH, et la même logique de rôles traverse les design tokens ; les seuils face auxquels les paires de rôles sont vérifiées vivent dans le hub contraste.

Guides de ce hub

Voir un changement de marque en un seul geste

L’argument le plus fort en faveur des échelles plutôt que des nuanciers, c’est d’observer un système se réaccorder : changez la couleur de départ et regardez tout se re-dériver — rampes, neutres et les relations de contraste de chaque palier se reconstruisent à partir de la nouvelle couleur de départ en un seul mouvement. C’est cela, condensé en une phrase, que tout ce hub enseigne : choisissez vos couleurs une fois, dérivez-les pour toujours.

Questions fréquentes

Que signifient les nombres 50–900 dans une palette de couleurs ?

Ils étiquettent les paliers d'une échelle de couleur, du plus clair (50) au plus foncé (900) — une convention popularisée par Material Design et Tailwind. Les nombres sont des positions, pas des mesures ; le 500 ou le 600 est généralement la couleur centrale de la marque, et les écarts laissent de la place à de futurs paliers intermédiaires.

Comment créer une palette complète à partir d'une seule couleur de marque ?

Traitez la couleur de marque comme une couleur de départ. Un générateur lit sa teinte et son intensité, place une dizaine de paliers sur une courbe de luminosité qui la traverse, et façonne la saturation pour que les tons moyens rayonnent tandis que les extrêmes restent utilisables. Les couleurs de soutien peuvent ensuite être dérivées de la même couleur de départ.

Pourquoi mes couleurs générées paraissent-elles ternes ?

Généralement l'une de deux causes — une saturation maintenue constante sur toute la rampe (elle doit s'atténuer vers le blanc et le noir, où les écrans ne peuvent afficher que peu de couleur), ou des couleurs poussées au-delà de la limite de l'écran puis ramenées de force, ce qui aplatit les paliers qui devraient être les plus vifs.

De combien de couleurs un design system a-t-il besoin ?

De moins de couleurs de départ que la plupart des équipes ne l'imaginent — le plus souvent une couleur de marque, une neutre, quelques couleurs fonctionnelles (succès, avertissement, erreur, information) et peut-être une ou deux teintes de soutien. La mécanique d'échelle transforme chaque couleur de départ en dix paliers, et les rôles piochent parmi ces paliers.

Puis-je simplement assombrir ma couleur de marque avec du noir pour les états de survol ?

Mélanger du noir décale plus que la luminosité — les couleurs deviennent ternes et dérivent souvent en teinte. Une échelle vous donne la version plus foncée qui conserve le caractère de la couleur, et c'est pourquoi les états de survol et enfoncé se définissent généralement comme des paliers voisins plutôt que comme des mélanges.

Qu'est-ce que les couleurs sémantiques ?

Des couleurs nommées d'après leur fonction plutôt que d'après leur teinte — succès, avertissement, erreur, information pour le retour d'information, plus des noms de rôle comme arrière-plan, bordure et accent. Chacune pointe vers un palier d'une échelle, si bien que tout le système peut être réaccordé sans rien renommer.