Nuances et teintes : quelle différence ?
En theorie des couleurs, une teinte (tint) est obtenue en ajoutant du blanc à une couleur pure : elle devient plus claire et plus pastel. Une nuance (shade) est obtenue en ajoutant du noir : elle devient plus sombre et plus profonde. Un ton (tone) est obtenu en ajoutant du gris. Notre outil généré les teintes en interpolant vers le blanc et les nuances en interpolant vers le noir, en 10 étapes régulieres dans chaque direction. Le résultat est une échelle de 21 valeurs (10 teintes + la couleur de base + 10 nuances) couvrant toute la plage de luminosité.
Construire un système de couleurs avec les nuances
Les systèmes de design modernes (Tailwind CSS, Material Design) utilisent des échelles de nuances numérotees (50, 100, 200... 900) pour chaque couleur de la palette. Notre générateur reproduit ce principe : à partir de votre couleur de marque, vous obtenez une gamme complété allant du quasi-blanc au quasi-noir. Utilisez les teintes claires pour les fonds et les états inactifs, la couleur de base pour les éléments principaux, et les nuances sombres pour les textes et les états actifs. Cette approche systematique garantit coherence et lisibilité.
Comment choisir les bonnes variantes pour votre design
Pour les fonds de page, privilegiez les teintes les plus claires (proches du blanc). Pour les fonds de cartes et de sections, utilisez des teintes intermediaires. La couleur de base convient aux boutons et aux éléments d'accent. Les nuances moyennes fonctionnent pour les bordures et les separateurs. Les nuances sombres sont ideales pour le texte sur fond clair. Cliquez sur n'importe quelle couleur pour copier son code HEX et l'utiliser dans votre CSS.