Générateur de nuances de couleur Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.
Générateur de nuances de couleur
Générer des nuances plus foncées de n'importe quelle couleur avec un nombre d'étapes ajustable.
Sélectionnez la couleur de base
Choisissez n'importe quelle couleur comme point de départ.
Ajustez les étapes
Déterminez le nombre d'ombres progressivement plus foncées à générer.
Copiez les ombres
Copiez des ombres individuelles ou l'ensemble complet.
What Is Générateur de nuances de couleur?
Un générateur de nuances de couleur crée des versions progressivement plus sombres d'une couleur de base en réduisant systématiquement sa luminosité dans l'espace de couleur HSL. Les nuances conservent la teinte et la saturation originales tout en s'approchant du noir, créant un ensemble cohérent de variantes plus sombres. C'est essentiel pour les systèmes de design où vous avez besoin de plusieurs intensités d'une couleur de marque - de l'originale pour les boutons principaux à des versions profondes pour le texte, les bordures et les états de survol. Contrairement à l'ajout simple de noir en RGB (ce qui peut déplacer la teinte perçue), l'approche basée sur HSL préserve l'identité de couleur tout au long de la gamme de nuances. Le nombre d'étapes ajustable vous permet de créer tout, desde un ensemble de trois nuances simples à une échelle complète de quinze étapes.
Why Use Générateur de nuances de couleur?
-
Le fonçage basé sur HSL préserve la cohérence de la teinte sur toutes les ombres
-
Nombre d'étapes ajustable (3 à 15) pour n'importe quel cas d'utilisation
-
Chaque ombre affiche son pourcentage de luminosité pour référence
-
Parfait pour créer des échelles de couleurs de systèmes de design
-
Copie en un clic pour les ombres individuelles ou l'ensemble complet
Common Use Cases
Jetons de conception
Générez des échelles d'ombres numérotées (600, 700, 800, 900) pour les systèmes de design.
États de survol
Créez des états de survol de boutons plus foncés qui sont cohérents avec la couleur de base.
Couleurs de texte
Trouvez des ombres foncées des couleurs de marque pour les titres et le texte du corps.
Bordures et ombres
Obtenez des variantes plus foncées pour les bordures, les contours et les couleurs d'ombre.
Technical Guide
Le générateur de nuances convertit la couleur de base en HSL et crée N nuances en réduisant la luminosité de la valeur de base à près de zéro. La formule pour chaque nuance est : L = luminositéDeBase × (1 - i/(N-1)), où i va de 0 à N-1. Cela crée une distribution uniforme de la couleur originale au noir. La teinte et la saturation restent constantes, garantissant que toutes les nuances sont perçues comme la même couleur à différents niveaux de sombreur. En théorie de la couleur, une nuance est spécifiquement une couleur mélangée avec du noir, contrairement à une teinte (mélangée avec du blanc) ou un ton (mélangé avec du gris). L'approche HSL est plus uniforme sur le plan perceptuel que l'assombrissement RGB, qui nécessiterait d'ajuster les trois canaux proportionnellement.
Tips & Best Practices
-
1Utilisez 9 étapes pour créer une échelle de système de design standard (100-900)
-
2L'ombre la plus foncée convient bien au texte sur fond clair
-
3Combinez les générateurs d'ombres et de teintes pour obtenir une échelle de couleurs complète
-
4Les ombres des couleurs chaudes (rouges, oranges) font d'excellents fonds foncés
-
5Testez les ombres foncées pour un contraste suffisant avec votre arrière-plan prévu
Related Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Générateur de palettes monochromes
Générer une palette de couleurs monochromes à partir d'une couleur de base.
🎨 Color Tools
Générateur de teintes de couleur
Générer des teintes plus claires de n'importe quelle couleur avec un nombre d'étapes ajustable.
🎨 Color Tools
Mélangeur de couleurs
Mélangez deux couleurs avec un rapport ajustable et voyez le dégradé complet.
🎨 Color Tools
Vérificateur de rapport de contraste
Vérifiez les rapports de contraste WCAG entre les couleurs de premier plan et d'arrière-plan.
🎨 Color ToolsFrequently Asked Questions
Q Quelle est la différence entre une ombre et une teinte ?
Q Pourquoi ne pas simplement assombrir en RGB ?
Q Combien d'étapes devrais-je utiliser ?
About This Tool
Générateur de nuances de couleur is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.