Cómo crear un tono de color más claro / más oscuro para el estado de desplazamiento de un botón

He estado diseñando botones durante un tiempo, pero cuando se trata de seleccionar los colores para el estado de desplazamiento de un degradado o sólido, ha sido principalmente un tema más oscuro.

¿Existe una teoría de color estructurada que ayudaría a juzgar mejor cuál sería un tono más apropiado para usar?

¿Qué tan oscuro debo ir del original?

¿Cómo puedo definir tonos más claros u oscuros del "mismo" color?

Cuando busco un ligero cambio en la ligereza, generalmente hago los cálculos, contando realmente.

El formato hexadecimal para colores es RRGGBB, que significa rojo, verde y azul. El hexadecimal se cuenta desde 0-F (así que después de 9 viene A).

Si tengo el #191970color de mi botón principal, agregaré 1 o 2 a cada valor de color, lo que dará como resultado un color similar pero más claro. Agregar 1 a cada uno daría como resultado #1A1A71.

Lo mismo podría hacerse para encontrar un tono más oscuro. Restar 1 de cada valor de color #191970daría como resultado #18186F.

Sin embargo, es probable que sumar o restar 1 o 2 de cada valor de color dé como resultado una diferencia indistinguible, por lo que probablemente deba sumar o restar al menos 10 de cada uno.

Si está utilizando el formato de número (255, 255, 255), simplemente puede agregar a cada número usando operaciones normales de base 10.

Agregar la misma cantidad a cada valor de color asegura que el tono y la saturación permanezcan consistentes y que los colores resultantes se combinen armoniosamente en un diseño.

O bien, puede dejar que un generador en línea haga las elecciones de color por usted y simplemente seleccione el código que necesita: el botón de gradiente CSS es solo un ejemplo.