Teintes, tons et nuances : construire une échelle de couleurs

Les teintes, tons et nuances sont les trois façons de changer une couleur sans changer sa tonalité. Une teinte est la couleur mêlée de blanc : elle devient plus claire et plus douce. Une nuance est la couleur mêlée de noir : elle devient plus profonde. Un ton est la couleur mêlée de gris : il devient plus discret et plus sourd. Voyez les teintes, tons et nuances comme du blanc, du gris et du noir ajoutés à une même couleur. Rangez une série de teintes et de nuances dans l’ordre et vous obtenez une échelle de couleurs : l’outil qui transforme une seule couleur de marque en quelque chose avec quoi l’on peut vraiment concevoir.

Teinte, ton et nuance côte à côte

Le plus simple pour voir la différence est de partir d’une couleur et de la pousser dans trois directions. Ici, la base est un violet, #7c3aed, mélangé par paliers de 20 %.

Ce que les teintes, tons et nuances font à un design

Chaque direction change l’ambiance autant que la couleur. Les teintes paraissent douces, jeunes et ouvertes, c’est pourquoi les palettes pastel sont surtout faites de teintes. Les nuances paraissent riches, sérieuses et haut de gamme, le territoire des palettes de couleurs sombres. Les tons paraissent adultes et naturels, la base de presque toutes les palettes de couleurs sourdes.

Construire une échelle de couleurs à partir d’un hex

La plupart des design systems numérotent leur échelle de 50 ou 100 (le plus clair) à 900 (le plus sombre), avec la couleur de marque autour de 500. La constance compte plus que les numéros : chaque couleur du système doit avoir les mêmes paliers, pour que 200 veuille toujours dire un fond clair et 700 toujours du texte. Cinq paliers bien choisis valent mieux que onze que personne ne distingue, et vous pourrez ajouter les intermédiaires quand de vrais designs montreront où ils manquent.

1. 1

   Placez votre couleur de marque

   Décidez à quel palier elle appartient. Une couleur moyenne comme #7c3aed se place à 500 ; un bleu marine de marque très sombre peut se placer à 800.

2. 2

   Créez l’extrémité claire

   Mélangez vers le blanc pour aller de 400 à 50. Le palier le plus clair doit être à peine coloré, assez clair pour un fond de page.

3. 3

   Créez l’extrémité sombre

   Mélangez vers le noir pour aller de 600 à 900. Le palier le plus sombre doit être assez sombre pour du texte courant sur le plus clair.

4. 4

   Égalisez les paliers

   Regardez la rangée de loin. Si deux voisins paraissent presque identiques et qu’un autre écart ressemble à un saut, ajustez-les à l’œil.

5. 5

   Décalez légèrement la tonalité aux extrémités

   Le noir pur peut salir les nuances. Beaucoup de designers poussent les paliers sombres de quelques degrés vers le bleu ou le violet, et les paliers clairs vers le chaud.

6. 6

   Vérifiez les paires qui se rencontreront

   Testez le contraste des paliers de texte sur les paliers de fond, avec contraste des couleurs et accessibilité comme guide.

Créer des teintes et des nuances en CSS

Plus besoin de calculer chaque palier à la main. La fonction CSS color-mix() mélange deux couleurs dans l’espace colorimétrique choisi, si bien qu’une échelle entière peut suivre une seule variable. Mélanger en OKLCH garde les paliers plus réguliers à l’œil qu’en sRGB simple, un point traité dans OKLCH expliqué. Les navigateurs la gèrent largement ; consultez color-mix() sur MDN pour les détails.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Teintes et nuances dans les dégradés

Les dégradés les plus nets ne sont souvent qu’une seule couleur qui va de la teinte à la nuance. Comme rien ne traverse le cercle chromatique, il n’y a pas de bande grise au milieu, et le résultat se lit comme une lumière qui tombe sur une seule matière. Les palettes monochromes appliquent la même idée à des palettes entières.

Un Mark Gradiently fonctionne de façon semblable : une recette de couleurs apparentées traversée de lumière. Quand vous concevez dessus, les couleurs près de vos mots se creusent ou s’éclaircissent pour que le texte reste lisible sans cadre derrière lui.