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

• I'm voting to close this question as off-topic because it should be asked on stackoverflow. Jul 29, 2016 at 8:39
• Technically its still a graphics design question since we discuss math behind colors and shading colors, producing different variants of colors.
Jul 29, 2016 at 8:44
• no we discuss hexadecimal conversion. I would be fine with a color question but you have bound this so heavily with your computation environment that it nolonger satisfies your claim. So youve over specified it to become a javascript and markup nodeling question and that is not graphic design. Jul 29, 2016 at 9:08
• No the question says right, what should I do to make a color darker or brighter. Conversion to hexadecimal value is useful addition but not a necessity.
Jul 29, 2016 at 9:16
• I am not going to argue. I don't understand colors and how they work, I was asking for a "how to", not a piece of code that somebody will code for me.
Jul 29, 2016 at 9:49

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 difference from 255 to the current value (R255 G128 B0) is: R0 G127 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.

Edited: and here is part two about transparency.

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

• Offcourse if this is a browser its completely capable of calculating that for you Jul 29, 2016 at 8:30
• Yes a JS/browser application. But Js does not recognize #345464 formated color. I use parseInt(hashString.replace('#', ''), 16); where hashString is CSS formated color like #345464.
Jul 29, 2016 at 8:39
• You translate your numbers as you please. I sayed that was using numbers so you can see the math behind it. But the principle is the same. 8 is the half of F. Jul 29, 2016 at 8:53
• And you can always use the rgba(255,128,0,1) notation. Jul 29, 2016 at 8:55
• Actuall I use Canvas element and it is pure JS, no CSS inculded. But I got an idea of how to solve this with code.
Jul 29, 2016 at 9:20

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.

Edity:

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)

### Final Edit

Finally here is some code that does something towards what you ask. The reason this is hard to see is that its sort of abstract in form right now. Live code available here Image 1: Result of code below see also live version.

``````{
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

var Color = function(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.asHex = function() {
return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
}
Color.prototype.asRGB = function() {
return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
}
Color.prototype.blendWith = function(col, a) {
r = Math.round(col.r * (1 - a) + this.r * a);
g = Math.round(col.g * (1 - a) + this.g * a);
b = Math.round(col.b * (1 - a) + this.b * a);
return new Color(r, g, b);
}
Color.prototype.Mul = function(col, a) {
r = Math.round(col.r/255 * this.r * a);
g = Math.round(col.g/255 * this.g * a);
b = Math.round(col.b/255 * this.b * a);
return new Color(r, g, b);
}
Color.prototype.fromHex = function(hex) {
// http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
hex = hex.substring(1,7)
var bigint = parseInt(hex, 16);
this.r = (bigint >> 16) & 255;
this.g = (bigint >> 8) & 255;
this.b = bigint & 255;
}

ctx.font = "16px Arial";
ctx.fillText("Manual Alpha Blend", 18, 20);

var a = new Color(220, 0, 150);

var b = new Color();
b.fromHex('#00C864');

//Alpha blend
ctx.fillStyle = a.asHex();
ctx.fillRect(25, 25, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 30, 45);
ctx.fillStyle = b.asRGB()
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 55, 145);
var bl = a.blendWith(b, 0.3);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(50, 50, 75, 75);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(bl.asHex(), 55, 70);

// lighten 1

ctx.fillStyle = '#000000';
ctx.fillText('Neutral Light', 200, 20);

var c = new Color(100, 100, 100);
var purelight= new Color(255, 255, 255);

ctx.fillStyle = c.asRGB();
ctx.fillRect(200, 25, 100, 100);

var bl = c.Mul(purelight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(225, 50, 100, 100);

var bl = c.Mul(purelight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(250, 75, 100, 100);

// lighten 2

ctx.fillStyle = '#000000';
ctx.fillText('Yellowish Light', 400, 20);

var c = new Color(100, 100, 100);
var yellowlight= new Color(255, 255, 220);

var bl = c.Mul(yellowlight,1.0);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(400, 25, 100, 100);

var bl = c.Mul(yellowlight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(425, 50, 100, 100);

var bl = c.Mul(yellowlight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(450, 75, 100, 100);
}
}
``````

PS you should ask on stackoverflow since most of this can in fact allready be found on stackoverfow.

• Can this library be standalone?
Jul 29, 2016 at 8:46
• @Vlad sure i see no reason why not. Jul 29, 2016 at 9:06
• I tried it, it uses some NodeJS modules, but I don't want to make app heavy on third party libraries. Will try to make my own code.