# How to create a lighter/darker shade of a color for the hover state of a 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?

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. Commented Dec 24, 2013 at 12:16

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? Commented 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

I was taught to take "post impatica's" advice to put that white over the original color, then do a color picker to get the new color. no math required then at least.

• Over black. with some transparency. Yes. That is an option. Commented Feb 28 at 5:01

An old question but relevant.

First I need to address why Dom's answer (Accepted and Upvoted) is wrong.

If we use an RGB model, either hexadecimal or numerical, to have a different tone of the same hue we need to keep the proportion between the ratio of each color. In this image, the relation is marked with the orange stairs.

R255 G153 B51

Now let's reduce the color by 20%. And let us compare the two approaches.

On the left, we maintain the proportions of the colors. So we multiply each value by 80% or 0.8

(R255 G153 B51) x .8 = R204 G122 B41

But the other method says that we need to subtract the same amount for every color. 20% of 255 is 51.

(R255-51 G153-51 B51-51) = R204 G102 B0

We have shifted the color to red.

And if we keep going to 40% (or 60% of the original color), the proportional model works fine, but on the other method, we don't even have any blue component left.

(R255 G153 B51) x .6 = R153 G92 B31

vs

(R255-102 G153-102 B51-102) = R153 G51 B-51

The answer to making a color darker:

• Using an RGB numerical model, multiply every channel by a factor lower than 1.

• Using another CSS color model, for example, HSL, and keeping the same Hue.

• Using a color selector and moving it only on the lightness value.

• Adding a black transparent layer on top, or making the color transparent over black and measuring the value. However, this method could result in different numbers depending on the blending algorithm.

Related:

How to make a given color a bit darker or lighter?

Restoring transparency lost when a single color image was overlaid on white