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

I have this picture:

The arrows show two different colors but in fact they should be same color but a bit lighter or darker.

I made this screen-shot of the application I make and the brownish color on the edges is just the blue color summed with 30. As you can see it does not do the trick, i.e adding 30 to the actual color will not work for all colors.

How can I just shade a given color i.e make it brighter or darker?

Also what should I do If I want it to look semitransparent with alpha?

Answer

Cool question.

To work with hexadecimal values you need to think in terms of relative proportion of the RGB values.

I will use a scale in numbers, not with letters, so we can see the math behind it.

Imagine you have an orange.

You can have a value of R255 G128 B0

If you want a darker color you need to reduce the values for example at 50%

This will give you R128 G64 B0 Notice that all colors were modified using a proportional scale.

A more complex color could be R255 G200 B100 Let us darken it but not as much as the previous case. Let us just darken it one 80%.

R255x0.8 G200x0.8 B100x0.8 = R204 G160 B80

To make one color lighter the idea is pretty much the same, But it is more tricky because the colors will cap at 255, so you can think on the diference between the 255 to your values.

For example the same orange

R255 G128 B0

You can not augment R anymore, and you can not increase the Green and the blue with the same values, for example 100 more, because you will have

R255 G228 B100

which is too yellow.

The math would be

1) The diference from 255 to the current value is: R0 G128 B255

2) Let us make a lighter orange by 50%

3) Rx50% Gx50% Bx50% = R0 G64 B128

4) Add that to your initial value: R255+0 G128+64 B0+128 = R255 G192 B128.

I am adding an image to give you the basic idea. The RGB values are not the same of my text, just because a lazy work, but you can see that the orange "stairs" retain its intrinsect proportions.

Edited

I am so dumb. You can also use the HSL Color notation:

{background-color: hsl(45, 60%, 70%);} and modify the third color for darker colors, and the second and third for lighter ones.

You also can use an hsla variant to include alpha.