Déclinaisons d'une couleur de marque
Entrez la couleur principale de votre marque et obtenez une palette de dix nuances (de 50 à 900), façon design system, pour construire une charte de couleurs cohérente. Calcul 100% local dans votre navigateur.
Comment ça marche
Un design system solide ne se limite jamais à une seule teinte : il faut des variantes plus claires pour les fonds et les états désactivés, et des variantes plus foncées pour le texte ou les états au survol. Cet outil convertit votre couleur en HSL, conserve la teinte d'origine et fait varier uniquement la luminosité (et légèrement la saturation aux extrêmes) pour générer dix nuances numérotées de 50 (très clair) à 900 (très foncé), sur le modèle des palettes Tailwind CSS.
Quelle nuance correspond le mieux à ma couleur d'origine ?
La nuance 500 est calculée pour se rapprocher le plus possible de la couleur que vous avez saisie ; les nuances inférieures s'éclaircissent progressivement vers le blanc, les nuances supérieures s'assombrissent progressivement vers le noir.
Puis-je copier une seule nuance ou toute la palette ?
Cliquez sur une pastille pour copier son code HEX individuellement, ou utilisez le bouton "Copier toute la palette" pour récupérer la liste complète au format numéro: #hex, prête à coller dans un fichier de configuration CSS ou Tailwind.
Le calcul des nuances s'effectue entièrement dans votre navigateur ; votre couleur de marque n'est jamais envoyée à un serveur.