Question

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?

Answer 1

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)