Générateur de nuances de couleur (teintes)
Générez les nuances (teintes claires et foncées) d’une couleur pour votre palette, dans le navigateur.
Teintes claires (tints)
#57ff37#74ff5b#92ff7e#b0ffa1#ceffc4#ebffe8Base
#39ff14Ombres foncées (shades)
#061a02#0e4005#176608#1f8c0b#28b30e#30d911Teintes = mélange vers le blanc, ombres = mélange vers le noir.
🔒 100 % côté client — aucune donnée envoyée
Générez instantanément une palette de teintes claires et de nuances foncées à partir d'une seule couleur. Idéal pour construire une échelle cohérente (50 à 900) pour vos design systems et interfaces. L'outil fonctionne 100% dans le navigateur, aucune couleur n'est envoyée en ligne.
À quoi ça sert ?
- ▸ Créer une échelle de couleurs cohérente pour un design system
- ▸ Obtenir des variantes hover, active et disabled d'un bouton
- ▸ Générer des fonds clairs et des textes foncés accessibles depuis une teinte de marque
- ▸ Décliner une couleur Tailwind ou une variable CSS en dix niveaux
FAQ
Quelle est la différence entre une teinte et une nuance ?
Une teinte (tint) est obtenue en ajoutant du blanc à la couleur pour l'éclaircir, tandis qu'une nuance (shade) résulte de l'ajout de noir pour l'assombrir.
Comment générer une palette à partir d'une seule couleur ?
Saisissez votre couleur en hexadécimal, RGB ou HSL, puis l'outil calcule automatiquement une série de teintes plus claires et plus foncées prêtes à copier.
Ces couleurs sont-elles compatibles avec Tailwind CSS ?
Oui, l'échelle générée suit la logique 50 à 900 utilisée par Tailwind, ce qui permet de l'intégrer directement dans votre configuration de thème.