Générez des variantes claires et sombres

Les designers s’en servent pour décliner une couleur en tons clairs et sombres lorsqu’ils construisent une palette cohérente pour une interface.

Générez des variantes claires et sombres. Toute l'opération reste dans votre navigateur, sans envoyer, partager ni stocker les données saisies.

Mode d’emploi

Saisissez une couleur de base au format hexadécimal dans la zone d’entrée.
Lancez la génération pour obtenir des variantes plus claires et plus sombres.
Parcourez les propositions et repérez les tons adaptés à votre interface.
Testez une autre couleur de base si la palette proposée ne convient pas.
Copiez les valeurs retenues dans votre charte graphique ou votre feuille de style.

Exemple

Avec l’exemple de bleu fourni, observez comment la teinte se décline en tons plus clairs et plus sombres. Cela aide à préparer des états survol, actif ou désactivé sans partir d’une page blanche.

Entrée

#2563EB

Résultat

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Limites et formats

L’outil propose des variantes à partir d’une couleur, mais ne vérifie pas l’accessibilité des combinaisons.
Les tons générés ne remplacent pas une charte graphique validée par votre équipe.
Testez chaque valeur dans l’interface réelle, car les conditions d’affichage peuvent varier.
Une variante claire ou sombre peut échouer sur certains fonds, même si elle paraît correcte dans la liste.

Où le traitement a lieu

La génération se déroule dans votre navigateur. La couleur saisie n’est pas transmise à l’extérieur et aucune palette n’est conservée par la page. Vous pouvez tester plusieurs couleurs de base pendant la même session.

Questions fréquentes

Puis-je partir d’une couleur précise ?

Oui, entrez la couleur de base en hexadécimal. L’outil s’en sert pour calculer une série de variantes plus claires et plus sombres.

Les variantes sont-elles accessibles ?

Elles donnent des pistes de contraste, mais l’outil ne mesure pas la conformité. Testez les couples texte et fond avec un vérificateur de contraste adapté.

Combien de couleurs puis-je générer ?

La génération part d’une couleur et produit plusieurs tons. Pour une palette complète, répétez l’opération avec chaque couleur principale de votre projet.