Teintes et Nuances
Le générateur de nuances crée des teintes plus claires (mélangées avec du blanc) et des nuances plus foncées (mélangées avec du noir) de n’importe quelle couleur de base, en 5, 10 ou 20 étapes, avec une sortie en variables CSS.
À propos de cet outil
Le générateur de nuances crée des teintes plus claires (mélangées avec du blanc) et des nuances plus foncées (mélangées avec du noir) de n’importe quelle couleur de base, en 5, 10 ou 20 étapes, avec une sortie en variables CSS.
Mode d’emploi
- Choisissez une couleur de base.
- Choisissez 5, 10 ou 20 étapes.
- Cliquez sur une nuance pour copier sa valeur hexadécimale.
- Cliquez sur Copier en variables CSS pour exporter toute l’échelle.
Bon à savoir
- Une teinte (tint) est une couleur mélangée avec du blanc ; une nuance foncée (shade) est une couleur mélangée avec du noir.
- Le générateur mélange par pas RGB égaux, si bien que chaque étape modifie la couleur de la même quantité.
- Les design systems comme Tailwind utilisent une échelle 50–900 construite à partir des teintes et nuances de chaque couleur de marque.
- Vérifiez le contraste des couleurs de texte issues d’une échelle, car les étapes intermédiaires échouent souvent au niveau WCAG AA sur fond blanc.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Quelle est la différence entre une teinte (tint) et une nuance (shade) ?
Une teinte éclaircit une couleur en ajoutant du blanc ; une nuance l’assombrit en ajoutant du noir. Un ton (tone) ajoute du gris.
Combien de nuances une couleur de design system doit-elle avoir ?
Une dizaine d’étapes est courant, par exemple 50, 100 … 900 dans Tailwind. Cela offre assez de choix pour les fonds, les bordures, le texte et les états de survol.
Comment utiliser l’échelle en CSS ?
Copiez l’échelle en propriétés personnalisées et utilisez-les avec var(--color-name), par exemple pour les fonds, les bordures ou les états de survol.
Pourquoi certaines teintes paraissent-elles délavées ?
Mélanger avec du blanc diminue la saturation tout en augmentant la luminosité. Pour des variantes claires plus vives, ajustez la saturation séparément en HSL.