CODEWITHSUNDEEP
javascriptcolors
James Charless Dickinson
James Charless Dickinson

Reputation: 446

Is it possible to generate a color?

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

Answers (2)

Guffa
Guffa

Reputation: 700730

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

dev4life
dev4life

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

Related Questions