Question

I’d like to be able to be able to calculate the second hex color of a button background gradient based on the first (see sample below).

So I would get the first color via a color picker from the user and get that using Javascript (e.g. #ededed in the sample below). Based on the first color, I would like to use JS to calculate an offset which generates the second color and the gradient effect (#dfdfdf in the sample below). The color shift would always be the same, just the input and output hex colors would differ.

Is there a formular or function I could use? thanks!

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );

Answer 1

Just so you know, you’re using the “old” format for -webkit-gradient. You should update to using this instead:

-webkit-linear-gradient(top, #ededed 5%, #dfdfdf)

Now, on to the actual problem, you haven’t specified how the second colour should be calculated. I’ll assue you want it a shade lighter, considering the example you gave. In this case, you can do this:

var color = "#ededed";
var components = [
    (255-(255-parseInt(color.substr(1,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(3,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(5,2),16))/2).toString(16)
];
if(components[0].length < 2) components[0] = "0"+components[0];
if(components[1].length < 2) components[1] = "0"+components[1];
if(components[2].length < 2) components[2] = "0"+components[2];
var out = "#"+components[0]+components[1]+components[2];

This will give you the colour that is halfway between the source colour and pure white (effectively overlaying a 50%-opacity white over it). To get a darker shade, just remove the 255-(255- bit and the corresponding ).

EDIT: On second thoughts, just use a solid background with a transparent gradient:

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));