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

I have this picture:

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

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 to make a given color a bit darker or lighter?

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?


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.

Got the idea?


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.

You have misunderstood things a bit, javaScript does not model color as hexadecimal, neither does the system. The hexadecimal notation is just for the human readable document. Internally your system stores three integer values. You can querry and manipulate those directly.

But lets just say that you want to manipulate the actual document instead of system internals. Then its best to defer your computation to some library that does this for you. You see the browser can represent colors in many ways so you would need to program all kinds of cases such ad rgb and hsv inputs. So I suggest you use something like Color.js it saves you a lot of headache, as you do not need to implement blending, darkening, lightening etc... yourself.


In case you want to do this yourself, which i do not recommend. Start by turning the hexarepresentation into numeric triplets of integers or floating point numbers in range 0-1 this makes computation easier.

Now for easy manipulation of color convert RGB values to HSL or HSB this makes brightness calculations trivial to do (Wikipedia has formulations). So then just add or subtract lightness or brightess. For real light simulation the computation is easy enough just multiply the light color by base color. Thus for neutral light its simply:

Result = Intensity*Color

As Rafael explained, formula repeated by color channel. You can simulate colored light by doing

Result = Intensity * LigtColor * Color

For this best to convert to float first, maybe linear also. This allows for warm or cool light on your area which can bring in more natural feel.

Alpha blending (layerimg of color on top of other) is simply

Result = ColorTop * alpha + ColorBottom * (1-alpha)

PS you should ask on stackoverflow.

Category: color Time: 2016-07-29 Views: 0
Tags: color hex

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.139 (s). 12 q(s)