Teintes et nuances : Créer des échelles de couleurs pour les design systems

Générez des palettes de couleurs systématiques — de 50 à 900 — qui alimentent des design systems cohérents et accessibles.

6 min de lecture Couleur · CSS · Design 6 sections + FAQ

Chaque système de design mature — Tailwind, Material Design, Chakra UI — utilise une échelle de couleurs systématique plutôt qu'une poignée de couleurs choisies à la main.

Une teinte ajoute du blanc à une couleur de base, la rendant plus claire. Une nuance ajoute du noir, la rendant plus foncée. L'approche mathématique utilise le modèle HSL pour ajuster la luminosité tout en préservant la teinte et la saturation.

Que sont les teintes et nuances

En théorie des couleurs, une teinte est une couleur mélangée avec du blanc, produisant une version plus claire. Une nuance est une couleur mélangée avec du noir, produisant une version plus foncée. Dans le design numérique, les générateurs de teintes et nuances produisent typiquement une gamme de valeurs de luminosité du presque blanc au presque noir.

Outil gratuit Générateur de teintes et nuances Générez une échelle de couleurs complète 50–900 depuis nimporte quelle couleur

Modèle de couleur HSL pour la manipulation

HSL (Teinte, Saturation, Luminosité) est le modèle préféré pour générer des teintes et nuances car la luminosité est un axe indépendant. Pour créer une teinte, augmentez L en gardant H et S constants. Pour créer une nuance, diminuez L.

Construire une échelle à 9 étapes (100-900)

L'échelle standard du système de design va de 50 (presque blanc) à 900 (presque noir), la couleur de base étant ancrée à 500. Les étapes 100-400 sont des teintes avec une luminosité croissante. Les étapes 600-900 sont des nuances avec une luminosité décroissante.

Outil gratuit Générateur de palette de couleurs Générez des palettes harmonieuses depuis nimporte quelle couleur

Considérations d'accessibilité

Lors de la création d'une échelle de couleurs, vérifiez les ratios de contraste WCAG à chaque niveau prévu pour le texte. L'étape 700 sur fond blanc atteint généralement 4,5:1 (conformité AA). L'étape 900 atteint 7:1+ (AAA).

Palettes Tailwind et Material Design

Tailwind CSS utilise une échelle 50-900 pour toutes ses couleurs intégrées. Material Design 3 utilise une approche différente, générant un schéma de couleurs complet à partir d'une seule couleur "graine" en utilisant l'espace colorimétrique HCT.

Propriétés personnalisées CSS

Exportez votre échelle de couleurs sous forme de propriétés personnalisées CSS. Définissez-les au niveau :root. Nommez-les sémantiquement : --color-blue-500, --color-blue-600.

Outil gratuit Vérificateur de contraste des couleurs Vérifiez les ratios de contraste WCAG entre deux couleurs

Questions fréquentes

Quelle est la différence entre une teinte et une nuance ? +
Une teinte est une couleur mélangée avec du blanc (plus claire). Une nuance est une couleur mélangée avec du noir (plus foncée). Dans les échelles de couleurs numériques, les deux sont générés en ajustant la luminosité en HSL.
Pourquoi utiliser HSL plutôt que RGB pour générer des teintes/nuances ? +
RGB n'a pas d'axe de luminosité dédié. Le paramètre de Luminosité de HSL contrôle directement la luminosité sans affecter la teinte.
Combien d'étapes doit avoir une échelle de couleurs de design system ? +
Le standard industriel est 9-11 étapes (50, 100-900). Cela offre suffisamment de granularité pour le texte, les arrière-plans, les bordures et les états interactifs.
Qu'est-ce que la couleur de base dans une échelle de couleurs ? +
La couleur de base est généralement placée à l'étape 500. C'est la couleur telle que définie originellement — ni éclaircie ni assombrie.
Comment garantir l'accessibilité dans mon échelle de couleurs ? +
Vérifiez les ratios de contraste WCAG entre les étapes de votre échelle et les fonds sur lesquels elles seront utilisées. Les couleurs de texte (étape 700+) doivent atteindre au moins 4,5:1.
Puis-je utiliser OKLCH au lieu de HSL pour les échelles de couleurs ? +
Oui, et OKLCH produit des étapes perceptuellement plus uniformes. OKLCH est maintenant supporté en CSS.
Comment Tailwind CSS génère-t-il sa palette de couleurs ? +
Les couleurs intégrées de Tailwind sont créées à la main par l'équipe Tailwind. Pour des couleurs Tailwind personnalisées, vous pouvez utiliser un générateur de teintes/nuances.