Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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
up vote 2 down vote accepted

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.

share|improve this answer
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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.