I've been designing buttons for a while now but when it comes to selecting the color(s) for the hover state of either a gradient or solid its been mostly been a matter eyeballing a darker tone. Is there a structured color theory out there that would help better judge what would be a more appropriate tone to use? How dark should I go from the original?

2 Answers
2

When looking for a slight change in lightness I usually do the math - simple counting actually. If I have #191970 as my main button colour I'll add 1 or 2 to each number, resulting in a similar but lighter colour. The same could be done for finding a darker shade. So #191970 plus 1 to each would result in #2A2A81. (Hexadecimal is counted from 0 - F)

In the case of using 0's and F's though, you may have to compromise as you can't subtract 1 from 0 and you can't add 1 to F.

Also, I don't know how this could be applied to the (255, 255, 255) format if that's what you're using.

This is a pretty clever technique, thanks for sharing! Out of curiosity is this a convention you created yourself or something fundamental?
–
Carl EdwardsDec 24 '13 at 0:24

@CarlEdwards I wanted the same colour but lighter and since 0 is black and F is white it makes sense that moving the values closer to white will make it a lighter shade of the same colour. It's just a simple way and far from foolproof.
–
DomDec 24 '13 at 7:04