Jump to content
  • Advertisement
Sign in to follow this  
Shawn619

Lighten/Darken a color

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

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
Share on other sites
Advertisement

I'm a little confused about Linear Interpolation, and I didn't see anything on Google about lerp.

 

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!