1

我正在尝试实现这个人正在做的事情，只在 PHP 或 jQuery 中。基本上我有一个十六进制颜色代码，比如#FF0000，它是红色的。我如何找到这种颜色的更深或更浅的十六进制颜色代码。

澄清：我想采用十六进制颜色代码（#FF0000），并找到该颜色代码较浅或较深阴影的正确十六进制颜色代码。

在 PHP 或 jQuery 中完成，当服务器处理页面时，我可以通过 PHP 更改颜色。

我不喜欢使用第三方 jQuery 插件来实现这一点，但如果它超级复杂，我会的。

4

3 回答 3

5

当您说“较轻的版本”（或“较暗的版本”）时，有很多可能性。例如，您可以获取#ff0000并拥有 253 个“较暗版本”，范围从#010000到#fe0000. 同样，您可以拥有 253 个“较轻版本”，范围从#ff0101到#fffefe. 所以你的问题没有很好的定义。

我将在这个答案中假设“较浅版本”是指在颜色上覆盖 50% 透明白色的结果，而“较深”则相同但为黑色。

在任何情况下，您都应该始终从十六进制代码中提取数字开始：

// assuming input of form "#RRGGBB"
$col = Array(
    hexdec(substr($input,1,2)),
    hexdec(substr($input,3,2)),
    hexdec(substr($input,5,2))
);

现在你有了它，你可以轻松地应用“覆盖”：

$darker = Array(
    $col[0]/2,
    $col[1]/2,
    $col[2]/2
);
$lighter = Array(
    255-(255-$col[0])/2,
    255-(255-$col[1])/2,
    255-(255-$col[2])/2
);

然后将它们转换回十六进制代码是一件简单的事情：

$darker = "#".sprintf("%02X%02X%02X", $darker[0], $darker[1], $darker[2]);
$lighter = "#".sprintf("%02X%02X%02X", $lighter[0], $lighter[1], $lighter[2]);

完毕！

于 2012-06-18T22:04:16.277 回答
5

我建议为此使用TinyColor颜色操作微框架。

tinycolor.darken('#FF0000').toHexString()

于 2013-07-22T18:03:40.480 回答
2

您所要做的就是将十六进制代码拆分为其 RG 和 B 值，然后在它们上运行这部分操作脚本：

factor = percent/100;
r+=(255-r)*factor;
b+=(255-b)*factor;
g+=(255-g)*factor;

因此，在纯 javascript 中，完整的功能将是这样的：

function lighten(color,percent){
    factor = percent/100;
    r = parseInt(color.substring(1,2),16);
    b = parseInt(color.substring(3,4),16);
    g = parseInt(color.substring(5,6),16);
    r+=(255-r)*factor;
    r=r.toString(16);
    if(r.length==1)
        r = '0'+r;
    b+=(255-b)*factor;
    b=b.toString(16);
    if(b.length==1)
        b = '0'+b;
    g+=(255-g)*factor;
    g=g.toString(16);
    if(g.length==1)
        g = '0'+g;
    return "#"+r+g+b;
}

和

function darken(color,percent){
    factor = percent/100;
    r = parseInt(color.substring(1,2),16);
    b = parseInt(color.substring(3,4),16);
    g = parseInt(color.substring(5,6),16);
    r-=(255-r)*factor;
    r=r.toString(16);
    if(r.length==1)
        r = '0'+r;
    b-=(255-b)*factor;
    b=b.toString(16);
    if(b.length==1)
        b = '0'+b;
    g-=(255-g)*factor;
    g=g.toString(16);
    if(g.length==1)
        g = '0'+g;
    return "#"+r+g+b;
}

您可以混合使用纯 javascript 和 jQuery，所以这应该可以正常工作。

于 2012-06-18T22:04:29.583 回答