Qu'est-ce qu'une échelle de couleur ?

Une échelle de couleur est un ensemble ordonné de nuances d'une même teinte, numéroté par convention de 50 à 900, construit pour que les paliers soient perceptuellement réguliers et que certaines associations respectent des ratios de contraste connus. Elle permet de choisir une couleur par rôle et par palier plutôt qu'une valeur hexadécimale arbitraire.

La convention de numérotation

La plupart des systèmes numérotent les échelles de 50 (la plus claire) à 900 ou 950 (la plus foncée), par pas de 100. La convention vient de Material Design et a été renforcée par Tailwind ; elle est aujourd'hui assez répandue pour valoir la peine d'être suivie.

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

L'intérêt d'une convention partagée, c'est que « prends blue-600 pour la bordure » veut dire la même chose pour une designer, un développeur et un assistant IA.

Ce qui fait une bonne échelle

La régularité perceptive. Les paliers doivent sembler également espacés. Interpoler en sRGB n'y parvient pas : cela produit des échelles qui se tassent au milieu et virent au boueux sur certaines teintes. Travailler dans un espace perceptivement uniforme comme OKLCH donne de bien meilleurs résultats.

Un contraste prévisible. Dans une échelle bien construite, certaines associations sont fiables : le palier 600 ou plus sur le palier 50 tient l'AA pour du texte courant, le 500 convient au grand texte. Quand ces relations tiennent, on cesse de vérifier le contraste à la main pour les cas courants.

Une teinte constante. Un ajustement naïf de la luminosité décale la teinte aux extrêmes. Les bleus dérivent vers le violet en s'assombrissant, les jaunes vers le vert. Maintenir la teinte perçue stable sur toute l'échelle demande une correction délibérée.

Combien de paliers

Dix (de 50 à 900) est le réglage par défaut courant et convient à la plupart des produits. Certains systèmes en utilisent onze, en ajoutant 950 pour les thèmes sombres qui ont besoin de quelque chose sous le 900.

En dessous de sept environ, on laisse des trous là où quelqu'un a besoin d'une nuance qui n'existe pas — et c'est exactement là que la dérive commence.

Quelles échelles un système doit avoir

  • Une échelle primaire pour la couleur de marque
  • Une échelle neutre ou de gris, plus utilisée que toutes les autres réunies
  • Des échelles sémantiques pour le succès, l'avertissement, l'erreur et l'information
  • Éventuellement une échelle secondaire ou d'accentuation

L'échelle neutre mérite le plus d'attention, puisque c'est là que vit l'essentiel de l'interface. Une légère teinte dans les gris, chaude ou froide, est souvent ce qui distingue une interface pensée d'une interface par défaut.

Ce que Flash DSM apporte ici

Les systèmes générés incluent des échelles complètes pour les couleurs primaires, secondaires, neutres et sémantiques, produites dans un espace perceptivement uniforme, avec des variantes claire et sombre et un contraste vérifié sur les associations.