• FEATURED

View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Lighten/Darken a color

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

9 replies to this topic

### #1Shawn619  Members

Posted 27 April 2013 - 12:29 PM

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.

### #2AliasBinman  Members

Posted 27 April 2013 - 01:27 PM

POPULAR

The simplest way is to do a lerp.

newcolor = lerp(color, vec3(1,1,1), x)   to Lighten

newcolor = lerp(color, vec3(0,0,0), x)   to Darken

In both cases x goes from 0 (no change) to 1 (full change)

if you don't know what a lerp is its a linear interpolate from 1 component to the next.

c = a + (b-a)*x

Edited by AliasBinman, 27 April 2013 - 02:04 PM.

### #3Shawn619  Members

Posted 27 April 2013 - 07:17 PM

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)

### #4Bacterius  Members

Posted 27 April 2013 - 08:01 PM

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, 27 April 2013 - 08:08 PM.

“If I understand the standard right it is legal and safe to do this but the resulting value could be anything.”

### #5Shawn619  Members

Posted 27 April 2013 - 08:45 PM

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

### #6MrOMGWTF  Members

Posted 03 May 2013 - 02:02 AM

Just multiply your color vector by a scalar.

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

### #7Lightness1024  Members

Posted 03 May 2013 - 09:04 AM

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.

### #8Tasty Texel  Members

Posted 03 May 2013 - 10:07 AM

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.

### #9Bacterius  Members

Posted 03 May 2013 - 10:10 AM

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.

“If I understand the standard right it is legal and safe to do this but the resulting value could be anything.”