Générateur de nuances de couleur
Créer des teintes plus claires et plus foncées d’une couleur.
Données d’entrée
Cet outil fonctionne entièrement dans votre navigateur. Les données saisies ou chargées ne sont jamais envoyées.
Résultat
Saisissez vos données, puis lancez l’outil.
À propos de cet outil
Génère des teintes (mélangées au blanc) et des ombres (mélangées au noir) régulièrement espacées à partir d’une couleur de base, prêtes pour une échelle de design system, avec les codes HEX et des variables CSS.
Comment l’utiliser
- Choisissez la couleur de base et le nombre de paliers.
- Copiez les codes ou les variables CSS.
Questions fréquentes
Quelle différence entre teinte et ombre ?
Une teinte mélange la couleur avec du blanc pour l’éclaircir ; une ombre la mélange avec du noir pour l’assombrir.
Puis-je utiliser l’échelle pour du texte ?
Vérifiez d’abord chaque paire texte/fond avec le vérificateur de contraste : les teintes claires passent rarement le WCAG sur fond blanc.
Pour aller plus loin
Outils liés
Générateur de palette de couleurs
Créer une palette harmonieuse à partir d’une couleur.
Vérificateur de contraste
Tester le contraste entre un texte et son fond.
HEX vers RGB
Convertir une couleur HEX en valeurs RGB.
RGB vers HEX
Convertir des valeurs RGB en code HEX.
RGB vers HSL
Passer d’une couleur RGB à sa teinte, saturation et luminosité.
Générateur de dégradé CSS
Créer un dégradé linéaire ou radial en CSS.