如何在php中找到较浅或较暗版本的十六进制代码的十六进制代码

Question

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

澄清：我想要一个十六进制颜色代码 (#FF0000)，并找到该颜色代码的较浅或较深阴影的正确十六进制颜色代码。

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

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

Answer 1

我建议为此使用TinyColor 颜色处理微框架。

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

Answer 2

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

我将在此答案中假设“较浅版本”是指在颜色上覆盖 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]);

完成！

Answer 3

您所要做的就是将十六进制代码拆分为 R G 和 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，所以这应该可以正常工作。