Jump to content

  • Log In with Google      Sign In   
  • Create Account


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.

  • You cannot reply to this topic
9 replies to this topic

#1 Shawn619   Members   -  Reputation: 342

Like
0Likes
Like

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.



Sponsor:

#2 AliasBinman   Members   -  Reputation: 411

Like
5Likes
Like

Posted 27 April 2013 - 01:27 PM

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.


#3 Shawn619   Members   -  Reputation: 342

Like
0Likes
Like

Posted 27 April 2013 - 07:17 PM

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)



#4 Bacterius   Crossbones+   -  Reputation: 7962

Like
3Likes
Like

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.

The slowsort algorithm is a perfect illustration of the multiply and surrender paradigm, which is perhaps the single most important paradigm in the development of reluctant algorithms. The basic multiply and surrender strategy consists in replacing the problem at hand by two or more subproblems, each slightly simpler than the original, and continue multiplying subproblems and subsubproblems recursively in this fashion as long as possible. At some point the subproblems will all become so simple that their solution can no longer be postponed, and we will have to surrender. Experience shows that, in most cases, by the time this point is reached the total work will be substantially higher than what could have been wasted by a more direct approach.

 

- Pessimal Algorithms and Simplexity Analysis


#5 Shawn619   Members   -  Reputation: 342

Like
0Likes
Like

Posted 27 April 2013 - 08:45 PM

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



#6 MrOMGWTF   Members   -  Reputation: 433

Like
0Likes
Like

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.



#7 Lightness1024   Members   -  Reputation: 677

Like
0Likes
Like

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.



#8 Tasty Texel   Members   -  Reputation: 1174

Like
0Likes
Like

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.



#9 Bacterius   Crossbones+   -  Reputation: 7962

Like
0Likes
Like

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.


The slowsort algorithm is a perfect illustration of the multiply and surrender paradigm, which is perhaps the single most important paradigm in the development of reluctant algorithms. The basic multiply and surrender strategy consists in replacing the problem at hand by two or more subproblems, each slightly simpler than the original, and continue multiplying subproblems and subsubproblems recursively in this fashion as long as possible. At some point the subproblems will all become so simple that their solution can no longer be postponed, and we will have to surrender. Experience shows that, in most cases, by the time this point is reached the total work will be substantially higher than what could have been wasted by a more direct approach.

 

- Pessimal Algorithms and Simplexity Analysis


#10 Endemoniada   Members   -  Reputation: 283

Like
0Likes
Like

Posted 03 May 2013 - 12:54 PM

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.






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.



PARTNERS