Générateur de teintes et nuances

À partir d’une couleur, obtenez ses teintes (vers le blanc), ses ombres (vers le noir) et ses tons (vers le gris), plus une échelle 50–950, avec le code en HEX, RGB, HSL, CSS, SCSS, JSON ou Tailwind.

Cliquez sur une nuance pour copier son code HEX. L’image PNG porte une petite signature KSPNAI en bas à droite.

Tout est calculé dans votre navigateur : rien n’est envoyé.

Gratuit · sans inscription

À propos de cet outil

Le générateur de teintes et nuances décline une couleur dans trois directions : les teintes, obtenues en ajoutant du blanc, les ombres, en ajoutant du noir, et les tons, en ajoutant du gris. Vous obtenez aussi une échelle numérotée de 50 à 950, pratique pour un projet web ou une charte graphique.

Choisissez le nombre de nuances (de 2 à 20) et le mode de mélange : RGB, le mélange classique, ou OKLab, qui donne des écarts plus réguliers à l’œil. Cliquez sur une nuance pour copier son code, puis exportez l’ensemble en HEX, RGB, HSL, variables CSS, SCSS, JSON ou Tailwind, ou en image PNG.

  • Teintes, ombres et tons d’une même couleur
  • De 2 à 20 nuances par rangée
  • Mélange RGB ou OKLab
  • Échelle 50 à 950 façon Tailwind
  • Code HEX, RGB, HSL, CSS, SCSS, JSON, Tailwind v3 et v4
  • Copie d’une nuance d’un clic, image PNG et lien de partage

Comment l’utiliser

  1. Choisissez la couleur de base ou saisissez son code HEX.
  2. Réglez le nombre de nuances et le mode de mélange.
  3. Cliquez sur une nuance pour copier son code.
  4. Choisissez un format de code et copiez-le, ou téléchargez l’image PNG.

Questions fréquentes

Quelle différence entre teinte, ombre et ton ?

Une teinte est la couleur mélangée à du blanc, une ombre la couleur mélangée à du noir, et un ton la couleur mélangée à du gris.

Pourquoi choisir OKLab ?

OKLab est un espace de couleur conçu pour la perception humaine : les écarts entre nuances paraissent plus réguliers qu’avec un mélange RGB.

En quoi est-ce différent du générateur de nuances Tailwind ?

Ce dernier ne crée que l’échelle 50–950 ; ici vous obtenez aussi les rangées complètes de teintes, d’ombres et de tons, avec plus de formats.

Mes couleurs sont-elles envoyées quelque part ?

Non, tout est calculé dans votre navigateur.

Outils associés

Voir les 57 outils gratuits →