Reputation: 446
I know there has already been posts on this, but I still don't quite get it.. I want to have a script that automatically generates a color code ({color:Lighter}
) which would be a lighter version of {color:Links}
. I would want the script to take the colorcode of {color:Links}
use the hex code, (it has to be hex) and make it like 10 times lighter. Very close to white, but off white enough so that you can still see the color. Can someone please provide me with a code?
Upvotes: 0
Views: 135
Reputation: 700720
What you are doing is blend between two colors, so you calculate the color components like this:
c = c0 + (c1-c0) * x
where c0
and c1
are the two colors, and x
is the balance between them. You would use a value close to 1 to to get a color close to the second one. I don't know exactly what you mean by "ten times lighter", but you could try a value like 0.9, which would give you a blend where the white stands for 90% of the result.
As white is rgb(255,255,255), you calculate the RGB values as:
r = r0 + (255-r0) * 0.9
g = g0 + (255-g0) * 0.9
b = b0 + (255-b0) * 0.9
Then you just use them in CSS as 'rgb('+r+','+g+','+b+')'
.
If you need it as a hex code, you can format it like this:
'#'+(256+r).toString(16).substr(1)+(256+g).toString(16).substr(1)+(b+256).toString(16).substr(1)
Upvotes: 2
Reputation: 1170
Here are 2 StackOverflow questions which have solutions.
Programmatically Lighten a Color
Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
You may need to take into consideration rgb(0,0,0) format in addition to the #FFFFFF (hex) format.
Upvotes: 0