Comment créer une nuance plus claire / plus foncée d'une couleur pour l'état de survol d'un bouton

Je conçois des boutons depuis un certain temps maintenant, mais quand il s'agit de sélectionner la (les) couleur (s) pour l'état de vol stationnaire d'un dégradé ou d'un solide, cela a surtout été une question qui éblouit un ton plus sombre.

Existe-t-il une théorie structurée des couleurs qui permettrait de mieux juger quel serait le ton le plus approprié à utiliser?

Dans quelle mesure dois-je foncer par rapport à l'original?

Comment définir des nuances plus claires ou plus sombres de la "même" couleur?

Lorsque je recherche un léger changement de légèreté, je fais généralement le calcul - vraiment un simple comptage.

Le format hexadécimal pour les couleurs est RRGGBB, ce qui signifie rouge, vert et bleu. L'hexadécimal est compté de 0 à F (donc après 9 vient A).

Si j'ai #191970comme couleur de bouton principale, j'ajouterai 1 ou 2 à chaque valeur de couleur, ce qui donnera une couleur similaire mais plus claire. Ajouter 1 à chacun se traduirait par #1A1A71.

La même chose pourrait être faite pour trouver une teinte plus foncée. La soustraction de 1 à chaque valeur de couleur #191970entraînerait #18186F.

Cependant, l'ajout ou la soustraction de 1 ou 2 de chaque valeur de couleur est susceptible d'entraîner une différence indiscernable, vous devrez donc probablement ajouter ou soustraire au moins 10 de chaque.

Si vous utilisez le format numérique (255, 255, 255), vous pouvez simplement ajouter à chaque numéro en utilisant les opérations normales de base 10.

Ajouter la même quantité à chaque valeur de couleur garantit que la teinte et la saturation restent cohérentes et que les couleurs résultantes se mélangent harmonieusement dans un design.

Ou, vous pouvez laisser un générateur en ligne faire les choix de couleurs pour vous, et juste entailler le code dont vous avez besoin: CSS gradient Button n'est qu'un exemple.