Tons clairs, tons foncés et tons rabattus expliqués

La toute première vraie palette que j'ai livrée comptait exactement cinq couleurs, et quatre d'entre elles étaient le même bleu. Je ne l'avais pas planifié ainsi — j'avais simplement sans cesse besoin d'« une version un peu plus claire de celui-ci pour le fond de la carte », d'« une plus foncée pour la bordure » et de « quelque chose d'atténué pour le bouton désactivé ». Ce que je faisais en réalité, sans en avoir le vocabulaire, c'était fabriquer des tons clairs, des tons foncés et des tons rabattus. Une fois que j'ai appris que ces trois expressions décrivent trois opérations précises, le travail sur les palettes a cessé d'être du tâtonnement pour devenir quelque chose de plus proche de l'arithmétique.

Ce guide porte sur cette arithmétique. Ce que sont vraiment les tons clairs, foncés et rabattus, pourquoi la valeur et la saturation sont deux cadrans différents et non un seul, et comment transformer une seule teinte en une échelle tonale nette sur laquelle vous pouvez réellement bâtir une interface. Tout ce qui suit correspond directement aux réglages HSL du générateur de palette de couleurs, de sorte que vous pouvez suivre avec de vrais nombres plutôt qu'au feeling.

Les définitions en une phrase, puis la nuance

Voici les définitions, réduites à l'essentiel :

• Un ton clair est une teinte plus du blanc. Elle devient plus claire et plus douce. Le rouge devient rose.
• Un ton foncé est une teinte plus du noir. Elle devient plus sombre et plus profonde. Le rouge devient bordeaux.
• Un ton rabattu est une teinte plus du gris. Elle devient atténuée et plus poussiéreuse sans forcément devenir beaucoup plus claire ou plus sombre. Le rouge devient une brique ou un vieux rose.

Voilà la différence ton clair ton foncé ton rabattu en une seule respiration, et la plupart des articles s'arrêtent là. Mais l'aspect intéressant, c'est ce que les trois ont en commun : chacun d'eux réduit le chroma — la pure coloration de la teinte. Une teinte pleinement saturée est aussi intense qu'elle le sera jamais. À l'instant où vous y mêlez le moindre neutre (blanc, noir ou gris), vous lui retirez de l'intensité. C'est bien documenté dans la référence standard sur les tons clairs, foncés et rabattus : ajouter du blanc, du noir ou du gris abaisse dans tous les cas le chroma de la couleur, même si ces ajouts déplacent la luminosité dans des directions différentes.

Le bon modèle mental n'est donc pas « ton clair = plus clair, ton foncé = plus sombre, ton rabattu = atténué » comme trois effets sans rapport. C'est un seul effet — diluer une teinte pure avec du neutre — observé sous trois angles. C'est ce recadrage qui fait s'éclairer l'idée suivante.

La valeur et la saturation sont deux boutons différents

La chose la plus utile que vous puissiez intégrer, c'est que la luminosité et la saturation sont indépendantes. Les débutants traitent « rendre plus clair » et « rendre moins intense » comme un seul et même geste, et c'est pourquoi leurs palettes virent au crayeux et au plat. Ce n'est pas le même geste. Ce sont deux cadrans distincts, et les tons clairs, foncés et rabattus ne sont que différentes combinaisons de la manière dont vous les actionnez.

C'est précisément pour cela que HSL est le modèle de couleur qui vaut la peine d'être appris. HSL signifie teinte (hue), saturation et luminosité (lightness), et il décompose la couleur en trois nombres que vous pouvez ajuster un par un :

• La teinte est l'angle sur le cercle chromatique, 0–360°. Le rouge est autour de 0, le vert près de 120, le bleu près de 240. Les tons clairs, foncés et rabattus laissent généralement la teinte tranquille — vous ne changez pas quelle couleur c'est, seulement à quel point elle est pure et claire.
• La saturation va de 0 à 100 %. À 100 %, la couleur est à pleine intensité ; à 0 %, c'est un gris pur, sans aucune teinte restante. C'est votre cadran de chroma.
• La luminosité va de 0 à 100 %. À 0 %, vous obtenez du noir quelle que soit la teinte, à 100 % vous obtenez du blanc quelle que soit la teinte, et 50 % correspond grosso modo à l'endroit où vit la version pure et vive de la couleur.

Avec ce vocabulaire, les trois opérations deviennent précises. Un ton clair consiste surtout à monter la luminosité vers 100 %. Un ton foncé consiste surtout à baisser la luminosité vers 0 %. Un ton rabattu consiste surtout à baisser la saturation vers 0 % tout en gardant la luminosité à peu près là où elle est. La référence MDN sur la notation HSL est un bon point de départ pour confirmer la syntaxe si vous voulez les écrire en CSS.

Une note de bas de page précise, parce qu'elle fait trébucher les gens. Le « L » de HSL désigne la luminosité (lightness), pas la « valeur » ni la « brillance ». Il existe un modèle cousin, HSB/HSV, où le troisième canal est la valeur, et il se comporte différemment — en HSB, une valeur de 100 % à pleine saturation donne la couleur pure et vive, alors qu'en HSL une luminosité de 100 % donne toujours du blanc. Si vous avez déjà sorti une couleur de Photoshop (qui utilise HSB) et qu'elle paraissait bizarre en CSS (qui utilise HSL), ce décalage en est la cause. Pour bâtir des échelles tonales, HSL est le modèle le plus accommodant, précisément parce que la luminosité court proprement du noir au blanc.

Comment éclaircir ou assombrir une couleur sans la massacrer

Voici la partie pratique, car il y a une bonne et une mauvaise façon de faire.

La façon naïve d'éclaircir une couleur est de tirer la luminosité vers le haut et de s'en tenir là. Le problème, c'est qu'à mesure qu'une couleur approche du blanc, garder la saturation constante la fait paraître fluette et délavée — une version pâle et anémique d'elle-même. La parade vers laquelle les designers expérimentés se tournent presque par réflexe : à mesure que vous montez la luminosité, poussez aussi un peu la saturation, et décalez parfois la teinte de quelques degrés. Les tons clairs ont souvent l'air plus riches avec un peu plus de saturation que le ton intermédiaire, pas moins.

L'assombrissement comporte le piège miroir. Baissez la luminosité vers 0 en laissant la saturation telle quelle et les couleurs sombres virent au trouble et à l'éteint — un quasi-noir plat et sans vie. Les bons tons foncés veulent généralement voir leur saturation augmentée à mesure qu'ils s'assombrissent, et fréquemment un léger décalage de teinte vers le bleu ou le rouge pour qu'ils paraissent intentionnels plutôt que comme si quelqu'un avait simplement éteint la lumière. C'est la principale raison pour laquelle les échelles construites à la main paraissent plus vivantes que celles générées en interpolant naïvement vers le noir.

La réponse honnête à la question comment éclaircir ou assombrir une couleur est donc : déplacez la luminosité comme action principale, mais ne figez pas les deux autres canaux. L'affichage HSL de l'outil rend cela facile à ressentir — changez un nombre, observez l'échantillon, et vous apprendrez vite combien de saturation une teinte donnée réclame à chaque extrémité de l'échelle.

Bâtir une échelle monochromatique nette à partir d'une seule teinte

C'est là que tout devient utile. Une échelle de couleurs monochromatique est une seule teinte déployée en une échelle complète de tons clairs, foncés et rabattus — et c'est l'ossature de pratiquement toute interface réelle. Quand vous choisissez la règle monochromatique dans le générateur de palette de couleurs, c'est cette structure qu'il génère : une teinte, de nombreux paliers de luminosité.

Laissez-moi en construire une à la main pour que vous en voyiez la logique. Partez d'un bleu de base à la teinte 217, saturation assez pleine, luminosité moyenne — appelons-le #2563EB. Générez maintenant une rampe en faisant cheminer la luminosité du très clair au très sombre, en gardant la teinte près de 217 et en relevant la saturation aux deux extrémités :

• #EFF4FE — le ton clair le plus pâle. Un blanc-bleuté à peine perceptible. Fond de page ou de section.
• #DBE6FD — un ton clair doux pour les remplissages subtils et le rayage zébré.
• #B9CDFB — un ton clair léger pour les bordures et les séparateurs.
• #7DA2F6 — un palier mi-clair, bon pour les halos de survol et les remplissages secondaires.
• #2563EB — la base. Votre couleur de marque principale, celle dont les boutons sont faits.
• #1D4FC4 — un palier en dessous. L'état de survol naturel pour ce bouton principal.
• #163C96 — un ton foncé plus profond pour les états actif/pressé et les bordures marquées.
• #0F2A6B — un ton foncé sombre pour les titres sur fond clair, ou les surfaces en mode sombre.
• #0A1C45 — le ton foncé le plus sombre. Quasi-noir, mais indéniablement bleu.

Remarquez ce que cette échelle vous procure. Chaque état interactif dont un bouton a besoin — repos, survol, actif — découle de la même teinte, à trois paliers de luminosité d'écart. Vous n'inventez pas de nouvelles couleurs ; vous descendez une échelle. C'est pourquoi celles-ci se retrouvent encodées en tokens numérotés (blue-50 à blue-900) dans les design systems. Si vous voulez approfondir la transformation d'une rampe comme celle-ci en variables réutilisables, créer des tokens de couleur évolutifs reprend exactement là où ceci s'arrête.

Quelques règles durement acquises pour l'échelle elle-même :

• Écartez suffisamment vos paliers de luminosité pour les distinguer. La défaillance monochromatique la plus courante, ce sont des paliers trop rapprochés — #2563EB à côté de #2C68EC sont fonctionnellement la même couleur, et votre interface y perd sa hiérarchie. Les paliers adjacents doivent être visiblement différents d'un seul coup d'œil.
• Les paliers n'ont pas à être espacés régulièrement. L'œil humain est plus sensible aux différences entre les couleurs claires, si bien que l'extrémité claire de la rampe réclame généralement des incréments de luminosité plus serrés tandis que l'extrémité sombre peut encaisser de plus grands sauts. Un espacement régulier en luminosité paraît souvent irrégulier à l'œil.
• Gardez une teinte cohérente, mais autorisez de minuscules dérives. Un degré ou deux de décalage de teinte entre les paliers est acceptable et a souvent meilleur aspect ; un écart de vingt degrés signifie que vous avez quitté le territoire monochromatique.

Là où les tons rabattus gagnent leur place dans une interface

Les tons clairs et foncés font le gros du travail dans une rampe d'interface, mais les tons rabattus — les versions atténuées, mêlées de gris — résolvent un problème précis que les tons purement clairs ou foncés ne peuvent pas résoudre : les états qui doivent s'effacer.

Le cas évident, ce sont les contrôles désactivés. Un bouton désactivé ne devrait pas être un bleu plus clair (cela se lit comme un autre état actif) — il devrait être un bleu rabattu, désaturé vers le gris pour signaler clairement « indisponible pour l'instant ». Prenez votre #2563EB et tirez la saturation franchement vers le gris tout en gardant une luminosité modérée, et vous obtenez quelque chose comme #9AA6BF : encore faiblement bleu, manifestement inerte. C'est un ton rabattu faisant exactement ce que les tons clairs et foncés ne peuvent pas faire.

Les tons rabattus sont aussi la clé pour construire des surfaces sophistiquées et discrètes. Un neutre gris pur peut paraître froid et déconnecté de votre marque. Un neutre rabattu — du gris avec quelques pour cent de votre teinte de marque mêlés dedans — fait que les arrière-plans et les bordures semblent appartenir à la même famille que votre couleur d'accent. C'est l'astuce derrière bon nombre de palettes qui paraissent haut de gamme : les « gris » ne sont pas gris du tout, ce sont des versions fortement rabattues de la teinte principale. C'est aussi central pour de bonnes palettes de couleurs en mode sombre, où les surfaces plates et purement noires paraissent dures et où des surfaces sombres légèrement rabattues se lisent comme intentionnelles.

Les erreurs que je me surprends encore à faire

• Confondre un ton clair avec un ton rabattu. Ils ne sont pas interchangeables. Un ton clair du rouge est le rose (plus clair, encore assez pur). Un ton rabattu du rouge est un vieux rose poussiéreux (atténué, luminosité semblable). Tournez-vous vers un ton clair quand vous voulez plus clair ; vers un ton rabattu quand vous voulez plus discret. Choisir le mauvais est la raison pour laquelle une couleur « adoucie » paraît parfois encore criarde.
• Construire toute l'échelle à une seule saturation. Figez la saturation sur toute la rampe et l'extrémité claire devient pâle tandis que l'extrémité sombre devient boueuse. Laissez la saturation respirer — élevée aux extrêmes, souvent la plus calme au milieu.
• Oublier que le contraste existe. Une belle rampe monochromatique ne vous dit rien quant à la lisibilité du texte posé dessus. Des paliers de luminosité à trois crans d'écart peuvent malgré tout échouer aux ratios de contraste WCAG pour le texte courant. Construisez l'échelle pour la cohésion, puis vérifiez les vrais couples texte-sur-surface avec un vérificateur de contraste. Cohésion et lisibilité sont des problèmes distincts, et l'outil vérifie le second à votre place.
• Traiter le monochromatique comme la ligne d'arrivée. Les tons clairs et foncés d'une seule teinte vous donnent un système calme et unifié — mais il vous faut parfois un accent venu d'ailleurs sur le cercle. Une base monochromatique plus un unique accent complémentaire est l'une des palettes les plus fiables qui soient, et c'est là que la compréhension de l'harmonie des couleurs porte ses fruits.

Tout se résume à ceci : une teinte n'est qu'un point de départ. Les tons clairs, foncés et rabattus sont les trois façons d'étirer ce point de départ unique en une palette de travail complète — plus clair avec du blanc, plus sombre avec du noir, plus discret avec du gris — et HSL vous donne les cadrans pour le faire délibérément plutôt que par accident. Choisissez une teinte qui vous plaît, ouvrez la règle monochromatique et parcourez le curseur de luminosité d'un bout à l'autre. Le temps que vous ayez construit à la main une bonne rampe de neuf paliers, vous ne regarderez plus jamais un « ensemble de couleurs » de la même façon. C'est presque toujours une seule couleur, portant neuf tenues différentes.