Générateur de nuances d’une couleur
Choisissez la couleur de base. L’outil construit 11 nuances, du quasi-blanc au quasi-noir, en conservant la teinte. Touchez une nuance pour copier son code.
Mode d’emploiLes nuances d’une couleur
Générateur de nuances d’une couleur: à quoi ça sert
Choisissez une couleur et l’outil génère 11 nuances, du quasi-blanc au quasi-noir, calculées dans l’espace colorimétrique OKLCH : la teinte reste la même et la luminosité change à chaque palier. La couleur de base prend place sur le palier de luminosité le plus proche, sans modification.
Touchez une nuance pour copier son HEX, ou copiez toutes les variables CSS ou l’objet pour le tailwind.config avec le nom de votre choix.
Mode d’emploi
- Choisissez la couleur de base dans le sélecteur ou saisissez le HEX.
- Donnez un nom à la couleur.
- Copiez une nuance, les variables CSS ou l’échelle pour Tailwind.
Quand l’utiliser
- Créer la palette d’un site ou d’un système de design.
- Disposer de nuances claires pour les fonds et foncées pour le texte, dans la même couleur.
- Définir la couleur de la marque dans Tailwind.
Questions fréquentes
Comment les nuances sont-elles calculées ?
Dans l’espace colorimétrique OKLCH, qui suit la perception de l’œil : l’outil conserve la teinte de la couleur de base, modifie la luminosité de chaque palier et réduit la saturation aux extrémités pour que les nuances très claires et très foncées ne soient pas criardes.
Où se place ma couleur dans l’échelle ?
La couleur de base est placée sur le palier dont la luminosité est la plus proche de la sienne, et ce palier reprend exactement votre couleur. Il est signalé.
Comment l’utiliser dans Tailwind ou en CSS ?
Copiez les variables CSS (--cor-50 à --cor-950) ou l’objet pour le tailwind.config. Changez le nom de la couleur dans le champ nom.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.