Générateur de nuances de couleur
Transformez une couleur HEX de base en une échelle de nuances 50-950 façon Tailwind, mélangée vers le blanc et le noir, chaque palier avec un échantillon et un HEX copiable.
Générateur de nuances de couleur — Saisissez une seule couleur de base en HEX et obtenez instantanément une échelle de nuances en 11 paliers (50, 100, 200 … 900, 950), créée en mélangeant votre couleur vers le blanc pour les paliers clairs et vers le noir pour les paliers foncés — avec la même numérotation que Tailwind CSS. Chaque palier affiche son échantillon et sa valeur HEX avec un bouton de copie en un clic. Tout s'exécute entièrement dans votre navigateur ; aucune couleur n'est jamais envoyée à un serveur.
Qu'est-ce que Générateur de nuances de couleur ?
Le Générateur de nuances de couleur est un outil en ligne gratuit qui transforme une couleur HEX de base en une échelle complète de teintes et de nuances, numérotée de 50, 100, 200 jusqu'à 900 et 950, comme les jetons de couleur de Tailwind CSS. Il construit le dégradé en mélangeant linéairement votre couleur de base vers le blanc pour les paliers clairs (50-400) et vers le noir pour les paliers foncés (600-950), en conservant 500 comme la couleur de base elle-même. Les designers et développeurs front-end l'utilisent pour générer une échelle de couleur cohérente pour un design system, configurer des propriétés personnalisées CSS ou des couleurs de thème Tailwind, et choisir des variantes claires/foncées accessibles d'une couleur de marque. Chaque palier est affiché sous forme d'échantillon à côté de sa valeur HEX avec un bouton de copie en un clic.
Comment utiliser Générateur de nuances de couleur
- Saisissez une couleur de base dans le champ Couleur de base (HEX) au format #rrggbb ou #rgb, ou cliquez sur le grand échantillon du sélecteur de couleur pour la choisir visuellement.
- L'échelle 50-950 se met à jour instantanément : les teintes claires (50-400) sont mélangées vers le blanc, le 500 est votre couleur de base, et les nuances foncées (600-950) sont mélangées vers le noir.
- Lisez chaque ligne pour voir, côte à côte, le numéro de palier (50 … 950), son échantillon de couleur et sa valeur HEX.
- Cliquez sur le bouton de copie au bout de n'importe quelle ligne pour copier la valeur HEX de ce palier dans le presse-papiers.
- Copiez le HEX de la couleur de base avec le bouton de copie situé à côté du champ de saisie lorsque vous n'avez besoin que du palier 500.
Exemples
Palier le plus clair (50) à partir d'une base bleue
Entrée
#4f86f7
Sortie
#f6f9ff
Palier le plus foncé (950) à partir de la même base
Entrée
#4f86f7
Sortie
#0b1323
Créer des couleurs de thème Tailwind
Saisissez votre couleur de marque, puis copiez les paliers de 50 à 950 un par un dans une couleur de thème Tailwind (par ex. colors.brand) ou dans des propriétés personnalisées CSS, pour obtenir une échelle clair-à-foncé prête à l'emploi qui correspond à la numérotation par défaut des nuances de Tailwind.
Questions fréquentes
- Quels formats de couleur puis-je saisir ?
- La couleur de base se saisit comme une valeur HEX au format #rrggbb (six chiffres) ou en notation abrégée #rgb (trois chiffres). Si la valeur n'est pas une couleur HEX valide, le message 'Invalid HEX color' apparaît et aucune échelle n'est générée. Chaque palier de la sortie est affiché sous forme de valeur HEX #rrggbb.
- Comment les nuances sont-elles calculées ?
- Chaque palier est un mélange linéaire entre votre couleur de base et le blanc pur ou le noir pur. Les paliers 50-400 sont mélangés vers le blanc selon des proportions décroissantes, le palier 500 est la couleur de base inchangée, et les paliers 600-950 sont mélangés vers le noir selon des proportions croissantes. La numérotation correspond aux échelles de couleur de Tailwind CSS.
- Pourquoi le palier 500 ne correspond-il parfois pas exactement au numéro de ma couleur de base ?
- Le palier 500 est toujours exactement votre couleur de base. L'outil ne recentre pas votre couleur sur une courbe de luminosité perceptuelle, donc si votre saisie est très claire ou très foncée, la moitié claire ou foncée de l'échelle aura une amplitude réduite — choisissez une base de teinte moyenne pour le dégradé le plus régulier.
- Puis-je choisir une couleur visuellement au lieu de saisir le HEX ?
- Oui. Cliquez sur le grand échantillon doté du sélecteur de couleur intégré pour choisir une couleur ; le champ HEX se met à jour automatiquement et toute l'échelle 50-950 se recalcule instantanément à mesure que vous la modifiez.
- Mes données de couleur sont-elles téléchargées quelque part ?
- Non. Tout s'exécute entièrement dans votre navigateur à l'aide de calculs de couleur locaux — aucune valeur de couleur n'est jamais envoyée à un serveur, l'outil fonctionne donc hors ligne et garde votre palette privée.
Outils connexes
Code en image
Transformez un extrait de code en une élégante image PNG avec coloration syntaxique directement dans votre navigateur, avec thème, fond dégradé ou transparent et marge intérieure — sans aucun envoi.
Vérificateur de contraste des couleurs
Vérifiez le rapport de contraste WCAG entre une couleur HEX de premier plan et une couleur de fond, et voyez s'il satisfait AA et AAA pour le texte normal et le grand texte.
Mélangeur de couleurs
Mélangez deux couleurs HEX selon le ratio de votre choix, dans l'espace RGB ou Lab, et obtenez la couleur intermédiaire sous forme d'échantillon et de valeur HEX copiable.
Simulateur de daltonisme
Importez une image et prévisualisez son rendu en cas de protanopie, deutéranopie, tritanopie ou de daltonisme total, puis téléchargez le résultat simulé.