Générateur de Teintes et Ombres — Variations de Couleur pour vos Designs
Un design system professionnel ne se contente pas d'une couleur principale — il a besoin de 9-11 nuances allant du très clair au très foncé. Notre générateur crée automatiquement la gamme complète de teintes et d'ombres à partir d'une seule couleur, compatibles avec les conventions Tailwind, Material et Bootstrap.
Teintes vs Ombres : quelle différence ?
Une teinte est obtenue en mélangeant une couleur avec du blanc — elle est plus claire. Une ombre est obtenue en mélangeant avec du noir — elle est plus foncée. En HSL, cela se traduit par l'augmentation ou la réduction de la luminosité (L%) tout en maintenant la teinte (H) et la saturation (S).
Comment utiliser notre Générateur
- Entrez votre couleur de base en HEX, RGB ou HSL.
- Choisissez le nombre de nuances : 5, 9 ou 11 (compatible Tailwind).
- Les nuances sont générées instantanément avec leurs codes HEX.
- Exportez en variables CSS, tokens JSON ou config Tailwind/Material.
Pourquoi générer des nuances ?
- États hover/actif : La version légèrement plus foncée d'un bouton au hover est toujours dans la palette.
- Arrière-plans : Les teintes très claires (50, 100) sont parfaites pour les arrière-plans de sections.
- Texte : Les ombres très foncées (800, 900) offrent un contraste suffisant sur fond blanc.
- Cohérence : Toutes les variations partagent la même identité chromatique.
Prêt à l'essayer ? Utilisez notre Générateur de Teintes et Ombres gratuitement — sans inscription, fonctionne dans votre navigateur.
Questions fréquentes
Comment Tailwind nomme-t-il ses nuances ?
Tailwind utilise une échelle de 50 à 950 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). 500 est la couleur de base, les inférieurs sont des teintes, les supérieurs des ombres.
Les nuances générées sont-elles perceptuellement uniformes ?
Notre générateur utilise l'espace colorimétrique OKLCH pour des nuances perceptuellement uniformes — chaque étape paraît aussi différente que la suivante, contrairement à la simple interpolation HSL.
Puis-je utiliser ces nuances avec n'importe quel framework CSS ?
Oui. L'export en variables CSS fonctionne avec Tailwind, Bootstrap, Material Design et tout framework utilisant des tokens de design. L'export JSON est compatible avec Style Dictionary.