# Determining the color of a hover state button

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?

-
It would depend on the colors used in the design. I would suggest experimenting because it would depend on the end design. – Darth_Vader Dec 24 '13 at 12:16

This may not answer the question..

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 Edwards Dec 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. – Dom Dec 24 '13 at 7:04

Or, you could let some online generator do the colour choices for you, and just nick the code you need: CSS gradient Button is just one example.

-