Générateur de nuances & teintes

Créez une gamme de couleurs complète à partir d'une seule couleur de marque, prête pour les variables Tailwind ou CSS.

Comment faire des nuances et des teintes

  1. Choisissez ou collez votre couleur.
  2. Choisissez le nombre d'étapes et la méthode de mélange.
  3. Copiez n'importe quel échantillon, ou exportez l'échelle sous forme de code ou d'image.

À propos : Nuances et teintes

Créez une gamme de couleurs 50–950 complète à partir d'une seule couleur, ainsi que des teintes, des nuances et des tons dans un nombre illimité d'étapes.

Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.

Idéal pour

  • Systèmes de conception et thèmes Tailwind
  • Survol et états actifs pour les boutons
  • Arrière-plans et bordures qui correspondent à une couleur de marque

Conseil : Utilisez les étapes 50–100 pour les arrière-plans et 700–900 pour le texte sur les arrière-plans clairs.

Questions fréquentes

Quelle est la différence entre teintes, nuances et tons ?

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

Comment est fabriquée l'échelle 50–950 ?

Les pas de légèreté sont réglés dans OKLCH, un espace de couleurs perceptives, de sorte que les sauts soient uniformes; la chroma se rétrécit vers des pas très clairs et très sombres pour rester dans la gamme. Votre couleur est maintenue à son pas le plus proche.

Puis-je l'utiliser avec Tailwind CSS ?

Oui — copier la configuration de Tailwind v3 ou le bloc theme de Tailwind v4, et utiliser des classes comme bg-primary-500.

Quelle nuance devrais-je utiliser pour le texte?

Habituellement 700–900 sur un fond clair et 50–200 sur un fond sombre. Vérifiez la paire avec le vérificateur de contraste avant de l'utiliser.

Pourquoi la balance est-elle fabriquée en OKLCH ?

OKLCH change la légèreté uniformément, de sorte que chaque étape est également différente de la suivante, et les couleurs ne deviennent pas grises ou ne changent pas de teinte à mesure qu'elles deviennent plus foncées.

Outils associés

← Retour à tous les outils