Come creare una tonalità più chiara / più scura di un colore per lo stato al passaggio del mouse di un pulsante

Sto progettando pulsanti da un po 'di tempo, ma quando si tratta di selezionare il colore (i) per lo stato al passaggio del mouse su una sfumatura o su un solido, è stato per lo più una questione che ha visto un tono più scuro.

Esiste una teoria dei colori strutturata che possa aiutare a giudicare meglio quale sarebbe un tono più appropriato da usare?

Quanto dovrei oscurare dall'originale?

Come posso definire tonalità più chiare o più scure dello "stesso" colore?

Quando cerco un leggero cambiamento nella leggerezza, di solito faccio i conti con la matematica, con un semplice conteggio.

Il formato esadecimale per i colori è RRGGBBrosso, verde e blu. L'esadecimale viene contato da 0-F (quindi dopo 9 arriva A).

Se ho #191970come colore del pulsante principale aggiungerò 1 o 2 a ciascun valore di colore, ottenendo un colore simile ma più chiaro. L'aggiunta di 1 a ciascuno comporterebbe #1A1A71.

Lo stesso si potrebbe fare per trovare una tonalità più scura. Sottraendo 1 da ciascun valore di colore si #191970otterrebbe #18186F.

Tuttavia, l'aggiunta o la sottrazione di 1 o 2 da ciascun valore di colore può comportare una differenza indistinguibile, quindi sarà probabilmente necessario aggiungere o sottrarre almeno 10 da ciascuno.

Se stai usando il formato numerico (255, 255, 255), puoi semplicemente aggiungere a ciascun numero usando le normali operazioni di base 10.

L'aggiunta della stessa quantità a ciascun valore di colore assicura che la tonalità e la saturazione rimangano coerenti e che i colori risultanti si fondano armoniosamente in un disegno.

Oppure, puoi lasciare che alcuni generatori online facciano le scelte cromatiche per te, e semplicemente intaccano il codice di cui hai bisogno: il pulsante gradiente CSS è solo un esempio.