Pourquoi les pas de couleur sont numérotés de 50 à 900

Les numéros 50–900 d’une échelle de couleur sont des étiquettes de position qui vont du clair au sombre : 50 est la teinte la plus pâle, 500 se place au milieu de la rampe comme cœur de marque conventionnel, 900 est le pas le plus sombre. Le système a été popularisé par le Material Design de Google en 2014 et s’est répandu via Tailwind CSS — et comme les numéros de graisse de police qu’il évoque, les valeurs nomment des positions, pas des quantités mesurées.

Ce bref historique répond à la question littérale. Les questions plus utiles sont : pourquoi les numéros valent mieux que les noms, pourquoi l’échelle commence à 50 plutôt qu’à 100, et à quoi servent les écarts entre les centaines — des conventions qu’il vaut mieux comprendre que mémoriser, ce qui est le fil rouge de notre guide des échelles de couleur.

D’où vient la numérotation 50–900 ?

Quand Google a publié le Material Design en 2014, son système de couleur livrait chaque teinte sous forme de rampe numérotée : 50, puis 100 jusqu’à 900 par pas de cent, le 500 étant traité comme la nuance identitaire — la valeur que les recommandations appelaient la couleur primaire. Tailwind CSS a adopté la même numérotation pour sa palette par défaut et l’a portée dans le courant dominant des développeurs ; ses échelles allaient à l’origine de 100 à 900, et une teinte 50 et un quasi-noir 950 ont été ajoutés aux extrémités à mesure que de vraies interfaces les réclamaient. Radix a suivi sa propre voie avec des pas numérotés de 1 à 12 — ce qui prouve en soi que l’idée porteuse, ce sont des positions numériques ordonnées, pas les valeurs spécifiques.

Les numéros d’échelle de couleur se lisent comme la numérotation de graisse de police en CSS — de 100 à 900, avec 400 pour la normale et 700 pour le gras — et le parallèle mérite d’être posé comme un parallèle : que l’un des systèmes ait inspiré l’autre ou non, tous deux résolvent le même problème de la même façon. Une grille numérique grossière, du léger au lourd, avec de la place laissée entre les valeurs.

Pourquoi des numéros plutôt que clair, plus clair, le plus clair ?

Les noms s’effondrent quand on les étend. Deux variantes d’un bleu peuvent être clair et sombre ; quatre peuvent, à la rigueur, être le plus clair, clair, sombre et le plus sombre ; à dix, nommer devient absurde. Les numéros survivent parce qu’ils font trois choses que les noms ne peuvent pas faire :

• Ils se trient. De blue-100 à blue-900, ils s’ordonnent tout seuls dans une liste de tokens, un export, un menu d’autocomplétion. Des pas nommés, eux, se trient par ordre alphabétique : clair, foncé, plus clair, plus foncé — un vrai désordre.
• Ils s’étendent. Insérer un pas entre « clair » et « plus clair » force à renommer tout le système ; ajouter un 950 à une échelle 100–900 ne renomme rien.
• Ils expriment la distance. Passer de 300 à 700 est visiblement plus grand que passer de 500 à 600, et « deux pas plus sombre » est de l’arithmétique. La distance entre « clair » et « plus sombre » n’est pas définie.

Pourquoi l’échelle commence-t-elle à 50 — et que signifie 500 ?

Le 50 répond à un vrai besoin : une teinte sous le 100, pour les lavis quasi blancs et les arrière-plans de page que le 100 rendait déjà trop colorés. Son étiquette suit la logique de la grille — la moitié de 100, un pas sous le premier pas plein.

Le 500 est le milieu de la course 100–900, et la décision de Material de le traiter comme la nuance identitaire de chaque couleur s’est durcie en habitude transversale à toute l’industrie : quand quelqu’un dit « notre bleu », il désigne en général le 500 — ou le 600, puisque les boutons portant du texte blanc poussent souvent le cœur d’un pas vers le sombre pour le contraste. Il y a aussi une raison physique à ce que le cœur gravite au milieu de la rampe : près des extrêmes de luminosité, une teinte ne peut pas retenir beaucoup de saturation, si bien que la version la plus reconnaissablement marquée d’une couleur tend à vivre dans les demi-tons.

Ouvrez une rampe 50–900 entièrement étiquetée dans Scale Composer — dix pas avec leurs numéros, leur luminosité et leurs valeurs hex visibles : le vocabulaire de cet article, en direct.

À quoi servent les écarts entre les numéros ?

De la place pour insérer. Un système numéroté de 1 à 10 serait plein ; un système qui progresse par centaines peut faire pousser de nouvelles valeurs sans renommer un seul pas existant. C’est ainsi que le système a réellement évolué : les interfaces sombres ont créé une demande pour plusieurs quasi-noirs très rapprochés — des couleurs de surface juste au-dessus du noir pur — et les réponses ont atterri dans l’écart sous 1000. La variante à douze pas de Scale Composer fonctionne ainsi : elle ajoute 950 et 975 aux dix pas par défaut, prolongeant l’extrémité sombre tandis que toutes les autres étiquettes restent en place.

Un 500 signifie-t-il la même chose dans tous les systèmes ?

Non — et c’est le cœur honnête du sujet : les numéros sont des positions, pas des mesures. Aucune norme ne définit quelle luminosité un 500 doit avoir, donc rien ne garantit que les 500 de deux systèmes coïncident. Le blue-500 de Tailwind, le blue 500 de Material et le 500 de votre palette sont trois couleurs différentes qui partagent par hasard une adresse.

Les variantes de jeux de pas de Scale Composer prouvent le point à l’intérieur d’un seul outil. Les trois jeux répartissent leurs pas uniformément sur la même plage de luminosité (de L ≈0,97 jusqu’à ≈0,25), si bien que la même étiquette atterrit à une luminosité différente selon le nombre de pas qui se partagent la rampe :

La ligne 500 varie de plus d’un pas entier de luminosité, et la ligne 900 est plus frappante encore : dans le jeu à douze pas, 900 se situe à L ≈0,40, parce que 950 et 975 ont pris le contrôle de l’extrémité profonde. Même couleur de départ, même outil, même étiquette — couleur différente. La règle pratique en découle : à l’intérieur d’un système, naviguez par les étiquettes ; pour comparer d’un système à l’autre, comparez la luminosité et le contraste mesurés, pas les numéros.

Quel jeu de pas choisir — 8, 10 ou 12 ?

Les trois jeux correspondent à trois situations. Huit pas (50, 100, 300, 500, 600, 700, 800, 900) conviennent aux palettes minimalistes — sites marketing et petits produits où avoir moins de décisions est un atout ; le jeu abandonne le 200 et le 400, les pas qui ont le moins de rôles. Dix est la valeur par défaut dans laquelle la plupart des interfaces produit s’installent confortablement. Douze (avec l’ajout de 950 et 975) est destiné aux produits fortement axés sur le mode sombre, où les surfaces ont besoin de quasi-noirs distinguables qu’une échelle à dix pas ne porte pas.

La différence est plus facile à juger avec les deux à l’écran. Comparez les jeux à 8 et à 12 pas sur la même couleur de départ — même couleur, même plage de luminosité ; regardez ce que les pas supplémentaires apportent à l’extrémité sombre, et ce que le jeu plus léger vous économise partout ailleurs.