# Lighten/Darken a color

This topic is 2047 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

How do you lighten/darken a color without the aid of a shader?

For example, color1 = (r, g, b), is some color that I don't know, now what color2 can I add to color1 to make color3(a lighter color of color1)

Assuming a vector addition operator was as follows: color1(r1,g1,b1)+color2(r2,g2,b2)=color3(r1+r2,g1+g2,b1+b2)

My first thought was to somehow move the color towards pure white(1,1,1) to lighten(or pure black (0,0,0) to darken), but I have no idea how to do this.

##### Share on other sites

But I think I understand the general concept in my own terms:

A scalar x may be used with a color vector to lighten or darken the following ways:

(i)To lighten, color1 = (r*x, g*x, b*x) where x is the percentage amount you want the color to be darkened. Where (0 < x < 1)(ie: x=.5 = 50% darken)

(ii)To darken,Same as (i), except (1 < x < inf) (ie: x=2=200% lighten)

##### Share on other sites

Think of linear interpolation as this: you have a straight line. There are two points on this line, representing two colors, say red and blue:

-------------- red ---------------------------------------- blue ----------------

Now any point on the line between red and blue corresponds to some gradient of red and blue. We can give each point on this line a scalar value, call it t:

t = 0 corresponds to red

t = 1 corresponds to blue

t between 0 and 1 corresponds to some point between red and blue, for instance t = 0.5 is exactly halfway, t = 1/3 is two thirds red, one third blue, and so on.

(t below 0 and above 1 are also possible but are less useful)

Now the formula to calculate the exact color depending on the scalar t is:

color = blue * t + red * (1 - t)

This is basically saying, take a proportion t of blue, and make the rest (1 - t) red, and add them to obtain the final color. We can rewrite this as:

color = red + (blue - red) * t

Which is really the equation of a line (thus the name linear interpolation). More broadly:

interpolated value = start value + (end value - start value) * scalar

Now if you wanted to make a color darker, you would want to interpolate between your color and black, and to make a color lighter you want to interpolate between your color and white.

Of course this isn't the only way to lighten or darken colors, even though it makes the most sense in general. You could also just add or subtract X to each component of the color until it becomes 0 or 255. It depends on your constraints/requirements and the specific effect you wish to obtain.

Edited by Bacterius

##### Share on other sites

Ah, I completely understand now, thanks! All I needed was a little more elaboration :)

##### Share on other sites

Just multiply your color vector by a scalar.

For example, 1.5 to lighten, 0.5 to darken, etc.

##### Share on other sites

isn't the good way passing into HSL, raising L, then going back to RGB ?

obviously, the end results are the same (maximum light or max dark, white and black) .

But maybe in the middle the HSL way respects the Hue better I think. You get progressive desaturation with the lerp technique.

or maybe i'm just dead wrong.

##### Share on other sites

You get progressive desaturation with the lerp technique.

It's the same with HSL/HSV. You had to use Luv or Lab if you really want to manipulate the lightness decoupled from saturation. Perhaps YCrCb would be a sufficient compromise; I'm not sure.

##### Share on other sites

You get progressive desaturation with the lerp technique.

It's the same with HSL/HSV. You had to use Luv or Lab if you really want to manipulate the lightness decoupled from saturation. Perhaps YCrCb would be a sufficient compromise; I'm not sure.

XYZ is nice too, and also takes into account human perception. Probably overkill, though.

##### Share on other sites

A lerp() will mix the two colours, if that's what you want go for it. if you want to lighten a colour you can convert it to an HSB colour space, add some brightness, and convert back to RGB. You can also do what someone above wrote, multiply by a number greater than 1, you will desaturate the colour after a certain point though.

1. 1
2. 2
3. 3
Rutin
15
4. 4
khawk
14
5. 5
frob
12

• 9
• 11
• 11
• 23
• 12
• ### Forum Statistics

• Total Topics
633661
• Total Posts
3013226
×