Question

我在网上找到了这个代码，但它没有按我的意愿行事。

function ColorLuminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
    }
    lum = lum || 0;
    // convert to decimal and change luminosity
    var rgb = "#", c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i*2,2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00"+c).substr(c.length);
    }
    return rgb;
}

所以我继续使用jQuery来更改周围框的背景颜色（在投票结果（右侧）背景颜色中显示）。

$(".bar-container").each(function() {
    var hexColor = $(this).children(":first").css("background-color");
    var bgColor = ColorLuminance(hexColor, .2);
    $(this).css({"background-color": bgColor});
});

文档准备就绪时使用。

我想要做的是抓住实际的轮询颜色（从左边开始是百分比）并使整个容器颜色稍微浅一些（但基本颜色相同）。因此，如果百分比栏为红色，则不应使包含栏的整体背景为紫色。它应该使它变成浅红色。

ColorLuminance功能不起作用，因为它完全改变了颜色！

如何修改此功能以获得更浅的颜色？（最好是基于百分比的，这是lum参数的用途）

Answer 1

要更改RGB颜色的亮度，我会将其转换为HSV颜色空间，您可以获得Hue（颜色），饱和度和值（亮度）。所以你只能改变亮度。

然后再次将HSV色彩空间的颜色带回RGB色彩空间。

您可以在此处找到HSV javascript逆变器：http://www.javascripter.net/faq/rgb2hsv.htm 有关HSV的更多信息，请访问：https://en.wikipedia.org/wiki/HSL_and_HSV

另外看看Can I force jQuery.css("backgroundColor") returns on hexadecimal format?，颜色总是以RGB的形式返回。

将hex转换为较浅的十六进制颜色

1 个答案: