Como criar uma cor mais clara / mais escura para o estado de foco de um botão

Estou criando botões há um tempo, mas quando se trata de selecionar as cores para o estado de foco de um gradiente ou sólido, tem sido principalmente uma questão de observar um tom mais escuro.

Existe uma teoria estruturada das cores por aí que ajudaria a julgar melhor qual seria o tom mais apropriado para usar?

Quão escuro devo ficar do original?

Como posso definir tons mais claros ou mais escuros da "mesma" cor?

Ao procurar uma ligeira mudança na leveza, costumo fazer as contas - na verdade, é simples contar.

O formato hexadecimal para cores é RRGGBBvermelho, verde e azul. O hexadecimal é contado de 0-F (então, depois de 9, vem A).

Se eu tiver #191970como cor do botão principal, adicionarei 1 ou 2 a cada valor de cor, resultando em uma cor semelhante, porém mais clara. Adicionar 1 a cada um resultaria em #1A1A71.

O mesmo poderia ser feito para encontrar uma sombra mais escura. Subtrair 1 de cada valor de cor #191970resultaria em #18186F.

No entanto, adicionar ou subtrair 1 ou 2 de cada valor de cor provavelmente resultará em uma diferença indistinguível; portanto, você provavelmente precisará adicionar ou subtrair pelo menos 10 de cada.

Se você estiver usando o formato numérico (255, 255, 255), basta adicionar a cada número usando as operações normais da base 10.

A adição da mesma quantidade a cada valor de cor garante que o matiz e a saturação permaneçam consistentes e as cores resultantes se misturam harmoniosamente em um design.

Ou então, você pode deixar algum gerador on-line fazer as opções de cores para você e apenas usar o código que você precisa: Gradiente CSS O botão é apenas um exemplo.