Question

我希望能够基于第一个计算按钮背景渐变的第二个十六进制颜色（参见下面的示例）。

所以我会通过用户的颜色选择器获得第一种颜色并使用Javascript（例如下面示例中的#ededed）获得。基于第一种颜色，我想用JS来计算产生第二种颜色和渐变效果的偏移量（下面样本中的#dfdfdf）。颜色偏移总是相同的，只是输入和输出的十六进制颜色会有所不同。

我可以使用的公式或功能吗？谢谢！

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

Answer 1

您知道，-webkit-gradient使用的是“旧”格式。您应该更新为使用此代码：

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

现在，关于实际问题，您尚未指定应如何计算第二种颜色。考虑到你给出的例子，我会认为你想让它变浅。在这种情况下，您可以这样做：

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];

这将为您提供源颜色和纯白色之间的颜色（有效地覆盖50％ - 白色的白色）。要获得更暗的阴影，只需删除255-(255-位和相应的)。

编辑：再想一想，只需使用带透明渐变的纯色背景：

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

Answer 2

我没有对此进行过测试，但我的方法是使用RGB值而不是十六进制。然后使用变量来保存两个颜色值。第二个变量可以根据第一个变量的值计算（如，@ color2 = @ color1 + 2）或其他任何值。

css渐变：计算第二次停止颜色

2 个答案: