Générateur de Palette de Couleurs
Choisissez une couleur de base et générez instantanément une palette de teintes allant du clair au foncé, prête à être copiée dans votre système de design.
🔒 Traitement local dans votre navigateur
Loading…
Comment l'utiliser
- Saisissez un code hexadécimal dans le champ "Couleur de base", ou cliquez sur le sélecteur de couleur pour en choisir une visuellement.
- Dès qu'une couleur valide est reconnue, une palette complète de teintes apparaît automatiquement en dessous — aucun bouton à cliquer.
- La palette va d'une teinte très claire à une teinte très foncée, toutes partageant la même nuance que votre couleur de base.
- Cliquez sur n'importe quel échantillon pour copier son code hexadécimal dans votre presse-papiers — une brève confirmation "Copié !" vous indique que ça a fonctionné.
Fonctionnalités
- Génère une échelle fluide de 9 teintes du clair au foncé à partir de n'importe quelle couleur de base
- Conserve la même nuance et saturation à chaque teinte, comme les échelles de couleurs de Tailwind
- Inclut votre couleur de base exacte dans la palette, pas seulement une approximation
- Copie en un clic du code hexadécimal de n'importe quel échantillon
- 100 % côté client — vos couleurs ne quittent jamais votre navigateur
Questions fréquentes
Cet outil envoie-t-il ma couleur quelque part ?
Non. Toute la palette est générée avec de simples calculs JavaScript directement dans votre navigateur — rien n'est jamais téléversé ni envoyé à un serveur.
Comment les teintes sont-elles calculées ?
L'outil convertit votre couleur de base en HSL, puis garde la nuance et la saturation fixes tout en faisant varier la luminosité de manière régulière, du très clair au très foncé. Votre couleur de base exacte est placée au milieu de l'échelle.
Puis-je utiliser ces palettes dans Tailwind ou d'autres systèmes de design ?
Oui. La palette suit le même principe que les échelles de couleurs 50/100/.../900 de Tailwind — une progression du clair au foncé d'une seule nuance — vous pouvez donc copier les codes hexadécimaux directement dans votre propre thème ou vos variables CSS.
Quels formats de couleur puis-je saisir ?
Uniquement des codes hexadécimaux, avec ou sans le # initial, au format abrégé à 3 chiffres (comme #abc) ou complet à 6 chiffres (comme #3b82f6). Utilisez le sélecteur de couleur si vous préférez choisir visuellement.
Pourquoi un message d'erreur s'affiche-t-il ?
Le texte saisi ne correspond pas à un format de couleur hexadécimal reconnu. Assurez-vous qu'il ressemble à #3b82f6 (ou 3b82f6, ou la forme abrégée #abc).