Générateur de teintes et nuances

Une teinte est créée en ajoutant du blanc à une couleur, la rendant plus claire. Une nuance est créée en ajoutant du noir à une couleur, la rendant plus foncée. Un ton est créé en ajoutant du gris. Dans le design numérique, les teintes et les nuances sont utilisées pour créer des échelles de couleurs cohérentes pour les composants d'interface — des teintes plus claires pour les arrière-plans, des gammes moyennes pour les boutons et éléments interactifs, des nuances plus sombres pour le texte et les bordures. Les systèmes de design comme Tailwind CSS utilisent des échelles à 10 étapes (50, 100, 200, ... 900).

Ce générateur utilise l'interpolation linéaire entre la couleur de base et le blanc (pour les teintes) ou le noir (pour les nuances). Chaque étape mélange la couleur de base avec du blanc ou du noir selon un pourcentage égal. Par exemple, avec 9 étapes : teinte 1 est 10% base + 90% blanc, teinte 5 est 50/50, teinte 9 est 90% base + 10% blanc. Cela produit des étapes perceptuellement cohérentes dans l'espace colorimétrique sRGB.

Vous pouvez coller les codes hexadécimaux directement dans le CSS, ou les définir comme propriétés personnalisées CSS : --color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; etc. Puis référencez-les avec var(--color-500). Pour Tailwind CSS, vous pouvez ajouter l'échelle générée à votre tailwind.config.js sous theme.colors. Pour les design tokens, exportez comme objet JSON pour une utilisation dans Figma, Storybook ou les outils de design tokens.

HSL (teinte, saturation, luminosité) est souvent préféré pour générer des échelles perceptuellement uniformes. Ajuster la luminosité en HSL tout en gardant la teinte et la saturation constantes produit des couleurs d'aspect cohérent. Cependant, l'interpolation sRGB (ce qu'utilise cet outil) est plus simple et produit des résultats prévisibles pour le design d'interface. Pour des espaces colorimétriques perceptuels plus avancés, considérez OKLCH ou LCH qui sont supportés dans le CSS moderne.

Dans Figma, vous pouvez créer une bibliothèque de couleurs en créant un cadre avec des rectangles pour chaque nuancier et en ajoutant les valeurs hexadécimales comme étiquettes. Puis faites un clic droit → Créer un composant pour chacun, et publiez dans votre bibliothèque d'équipe. Alternativement, utilisez l'export « Variables CSS » et collez-le dans un plugin Figma comme Design Tokens ou Token Studio. Copiez les variables CSS générées par cet outil et collez-les directement dans le plugin.