Palette de couleurs

Générateur de nuances de couleurs

Choisissez une couleur et obtenez aussitôt toutes ses nuances, du ton le plus clair au plus foncé. Touchez un ton pour copier son code HEX.

Nuances de 50 à 950

Onze tons de la même famille de couleur, classés comme dans Tailwind. Votre couleur est marquée sur le ton qui lui correspond.

Tons clairs (avec du blanc)

Touchez un ton pour copier son code HEX.

Tons foncés (avec du noir)

Tons rompus (avec du gris)

Exporter les nuances

Que sont les nuances d'une couleur

Ce sont tous les tons issus d'une même couleur : d'une version presque blanche à une version presque noire. Ils partagent la même teinte de base, c'est pourquoi ils s'accordent sans effort.

Tons clairs, tons foncés et tons rompus

Un ton clair, c'est la couleur mélangée à du blanc : plus légère et douce. Un ton foncé, c'est la couleur mélangée à du noir : plus sombre et profonde. Un ton rompu, c'est la couleur mélangée à du gris : plus sourde et élégante.

Comment utiliser des nuances dans votre design

Utilisez les tons clairs (50 à 200) pour les fonds, les moyens (400 à 600) pour les boutons et les liens, et les foncés (700 à 950) pour les textes et les bordures. Avec une seule couleur, vous obtenez une interface ordonnée et cohérente.

Questions fréquentes

Comment les nuances sont-elles calculées ?

Nous utilisons l'espace colorimétrique OKLCH, qui imite la façon dont l'œil perçoit la luminosité. Les écarts entre les tons paraissent ainsi réguliers, sans sauts brusques.

Que signifient les nombres de 50 à 950 ?

C'est l'échelle utilisée par Tailwind CSS et de nombreux design systems : 50 est le ton le plus clair et 950 le plus foncé. Votre couleur se place sur le nombre qui lui correspond le mieux.

Puis-je utiliser les nuances dans Tailwind ou en CSS ?

Oui. Saisissez un nom, choisissez le format et copiez le code : des variables CSS prêtes à coller ou le bloc de couleurs pour la configuration de Tailwind.

Quelle différence entre nuances et palette de couleurs ?

Les nuances sont des tons d'une même couleur. Une palette réunit des couleurs différentes qui s'accordent. Beaucoup de palettes utilisent des nuances pour les fonds et les textes, plus une ou deux couleurs d'accent.

Autres guides et outils