Web UtilitiesGénérateur de Teintes et Nuances de Couleur
Générez des teintes, nuances et tons à partir de n'importe quelle couleur de base. Créez des palettes style Tailwind 50–950, copiez des variables CSS et construisez des palettes de design instantanément.
hsl(217, 91%, 60%)
210
Couleur de base
#3B82F6
Propriétés personnalisées CSS
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Teintes
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Nuances
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Tons
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Cliquez sur une pastille pour copier sa valeur HEX
Outils similaires
À propos du Générateur de Teintes et Nuances
Comment ça marche
- Saisissez ou choisissez une couleur de base avec le sélecteur ou le champ HEX.
- Choisissez le nombre d'étapes (teintes et nuances à générer de chaque côté).
- Basculez entre le mode Classique (teintes, nuances, tons) et le mode Tailwind (arrêts 50–950).
- Cliquez sur une pastille pour copier instantanément sa valeur HEX dans le presse-papiers.
- Utilisez Tout copier en CSS pour obtenir une palette complète en propriétés personnalisées CSS.
Cas d'utilisation courants
- Création de palettes de couleurs pour des frameworks UI.
- Génération d'échelles de couleurs compatibles Tailwind CSS.
- Création de rampes de couleurs accessibles qui maintiennent l'identité de marque.
- Exploration de l'apparence d'une couleur de marque sur tous les niveaux de luminosité.
- Production de tokens de couleur pour les transferts de design dans Figma ou Storybook.
Questions fréquemment posées
Qu'est-ce qu'une teinte de couleur ?
Une teinte est créée en ajoutant du blanc à une couleur de base, la rendant plus claire et moins saturée. Les teintes conservent la teinte originale mais augmentent la luminosité, produisant des variations pastel idéales pour les arrière-plans et les accents UI subtils.
Qu'est-ce qu'une nuance de couleur ?
Une nuance est créée en ajoutant du noir à une couleur de base, la rendant plus foncée. Les nuances conservent la teinte originale tout en réduisant la luminosité, et sont couramment utilisées pour le texte, les bordures et les états enfoncés.
Qu'est-ce qu'un ton de couleur ?
Un ton est créé en ajoutant du gris à une couleur de base, ce qui réduit sa saturation sans modifier significativement la luminosité. Les tons produisent des variations de couleur plus neutres, adaptées aux composants UI neutres.
Qu'est-ce que le mode palette style Tailwind ?
Le mode Tailwind génère 11 arrêts étiquetés 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 et 950, reflétant la convention de nommage de Tailwind CSS. Cela facilite la création de familles de couleurs personnalisées directement intégrables dans un fichier tailwind.config.js.
Comment utiliser les variables CSS générées ?
L'outil génère un bloc :root { } avec des propriétés personnalisées CSS pour chaque couleur. Copiez-les dans votre feuille de style globale et référencez n'importe quelle couleur avec var(--tint-1), var(--shade-3), var(--color-500), etc.
Combien d'étapes puis-je générer ?
En mode Classique, vous pouvez choisir entre 2 et 10 étapes pour les teintes et nuances. Le mode Tailwind produit toujours l'échelle fixe de 11 arrêts.
Puis-je copier des valeurs de couleur individuelles ?
Oui. Cliquez sur n'importe quelle pastille pour copier instantanément sa valeur HEX dans le presse-papiers. Une coche verte confirme brièvement la copie. Vous pouvez aussi utiliser le bouton Copier tout en CSS pour récupérer toute la palette en une seule action.
Quels formats de couleur l'outil supporte-t-il ?
Vous pouvez saisir n'importe quelle couleur HEX à 6 chiffres (ex. #3B82F6) dans le champ texte, ou utiliser le sélecteur de couleur natif du navigateur. L'outil convertit en interne en HSL pour une manipulation précise de la luminosité.
La palette générée est-elle accessible ?
L'outil génère des couleurs espacées perceptuellement, mais la conformité WCAG dépend de la façon dont vous associez les couleurs de texte et d'arrière-plan. Utilisez l'outil de vérification d'accessibilité des couleurs UI pour vérifier les ratios de contraste.
En quoi cet outil est-il utile pour les systèmes de design ?
Les systèmes de design nécessitent généralement une échelle de couleurs complète (ex. marque-50 à marque-950) pour chaque couleur de marque. Cet outil automatise ce processus — saisissez votre couleur de marque une fois et obtenez une échelle complète à coller dans Figma, Style Dictionary ou un fichier de configuration Tailwind.
Cet outil stocke-t-il mes couleurs ?
Non. Tous les calculs de couleur s'effectuent entièrement dans votre navigateur en JavaScript. Aucune donnée n'est envoyée à un serveur, et rien n'est stocké entre les sessions. Vos couleurs restent totalement privées.
Quelle est la différence entre teintes/nuances et dégradé ?
Un dégradé est une transition visuelle fluide entre deux couleurs ou plus. Les teintes et nuances sont des arrêts de couleur discrets et nommés au sein d'une famille de teinte, utilisés comme valeurs de couleur individuelles dans les tokens de design.