FR
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
Accueil Favoris
Voltar

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’emploi

Les nuances d’une couleur



Disponible en: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

Outil suivantGIF en JPG (extraire les images)→
Publicité

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

  1. Choisissez la couleur de base dans le sélecteur ou saisissez le HEX.
  2. Donnez un nom à la couleur.
  3. 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.

Outils similaires

Merci beaucoup pour votre aide !

Chaque don aide à garder le site en ligne. Les outils sont faits pour vous aider, mais nous avons des frais de serveurs. Si vous le pouvez, cela nous aide beaucoup ! Choisissez ou saisissez le montant :

Paiement sécurisé par Stripe. S’ouvre dans un autre onglet.

Les outils sont fournis tels quels, sans garantie. Nous ne sommes pas responsables des résultats ni de l’usage qui en est fait.