Javascript：将灰度转换为给定色调的颜色

Question

我的颜色是灰度，rgb（128,128,128），我希望在Javascript中找到某种色调的颜色，0（红色）与灰色相同的亮度。

我知道如何使用（（0.3 * r + 0.59 * g + 0.11 * b））找到灰色的亮度，但我想知道如何在该颜色上添加色调。我希望白色变成白色，浅灰色变成浅红色，中灰色变成鲜红色，深灰色变成深红色，黑色变成黑色等。色调可能会改变。

目前我已经尝试了这个但是当给出白色时它会产生鲜红色而不是白色。

// lightness = 0 - 255
// color = {r: 1, g: 0, b: 0}

newcolor = {};
newcolor.r = lightness * color.r;
newcolor.g = lightness * color.g;
newcolor.b = lightness * color.b;
return newcolor;

Answer 1

解决方案

你需要使用HSV或HSL颜色空间而不是RGB，至少这会让事情变得更容易联系起来。

在接受实施HSL而不是HSV的解决方案后，答案已经更新了，与HSV相比，我能够在其标准范围内做到这一点（对不起，我忘了这个细节作为两者之间的主要区别）。但结果是相同的，但HSL稍微简化了代码。

HSV（旧回答）

为了使用HSV（如下所示）根据亮度进行着色，您只需将亮度和饱和度使用的输入刻度扩展为double，然后使用阈值切换两者中的哪一个正在影响（HSL会直接这样做，请参阅下面的更新）。

让我们说亮度和饱和度从[0,100]开始。然后将输入值扩展为[0,200]。现在设置阈值切换它用于的组件：

if (lum > 100) {
    col = hsv2rgb(angle, 100 - (lum - 100), 100);
} else {
    col = hsv2rgb(angle, 100, lum);    
}

现在你的颜色将从黑色变为鲜艳，从生动变为白色。

Simple demo here

对于图像中的像素，您只需将lum值标准化以扩展每个像素的双倍比例。如果亮度值在[0,255]范围内：

lum = luma / 255 * 200;

Image using HSV

HSL（新方法）

HSL可能更适合这项特定任务（着色），因为它的整个范围已经与上面的HSV相同而没有使用阈值和缩放范围。这也是HSV和HSL之间的主要区别。

以下演示在预灰度图像上使用HSL方法：

Image using HSL

您选择使用哪种方法可以通过例如性能来确定（HSV +阈值似乎更高效）。

在任何情况下，这里都是一个将HSL转换为RGB的代码片段：

function hsl2rgb(h, s, l) {

    var r, g, b, q, p;

    if (s == 0) {
        r = g = b = l;
    } else {
        function hue2rgb(p, q, t) {
            if (t < 0) t++;
            if (t > 1) t--;
            if (t < 1/6) return p + (q - p) * 6 * t;
            if (t < 1/2) return q;
            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        p = 2 * l - q;

        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return {
        r: r * 255,
        g: g * 255,
        b: b * 255};
}