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?

How can I define lighter or darker shades of the "same" colour?

  • It would depend on the colors used in the design. I would suggest experimenting because it would depend on the end design.
    – user9447
    Dec 24, 2013 at 12:16

3 Answers 3


When looking for a slight change in lightness I usually do the math - simple counting really.

The hex format for colours is RRGGBB, meaning red, green and blue. Hexadecimal is counted from 0-F (so after 9 comes A).

If I have #191970 as my main button colour I'll add 1 or 2 to each colour value, resulting in a similar but lighter colour. Adding 1 to each would result in #1A1A71.

The same could be done for finding a darker shade. Subtracting 1 from each colour value in #191970 would result in #18186F.

However, adding or subtracting 1 or 2 from each colour value is likely to result in an indistinguishable difference, so you'll probably need to add or subtract atleast 10 from each.

If you're using the number format (255, 255, 255), you can just add to each number using normal base 10 operations.

Adding the same amount to each colour value ensures that the hue and saturation remain consistent and the resulting colours blend harmoniously in a design.

  • This is a pretty clever technique, thanks for sharing! Out of curiosity is this a convention you created yourself or something fundamental? Dec 24, 2013 at 0:24

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.


If I'm reading material design's article correctly, We should use an 8% white overlay, so something like this:

.btn-login:hover {
                    background-image: linear-gradient(rgb(100 100 100/8) 0 0) !important;

material design hover

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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