javascript - 你如何获得#xxxxxx 颜色的色调？

Question

如何提取以 #rrggbb 形式给出的颜色的色调分量？

Answer 1

如果你search关于如何将 RGB 转换为 HSL，您会找到许多算法，包括在 Sergey 链接的维基百科文章中。 .

首先，提取十六进制颜色表示法的 RGB 分量。

var color='#c7d92c'; // A nice shade of green.
var r = parseInt(color.substr(1,2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10).
var g = parseInt(color.substr(3,2), 16);
var b = parseInt(color.substr(5,2), 16);

这将为您提供颜色的字节 (0-255) 表示。在本例中为 199、217、44。

然后您可以使用维基百科文章中的公式来计算色调，或 shamelessly steal someone else's code :

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

(有关文档和 hslToRgb() 函数，请参阅 source page。)

我们现在可以将这两个片段放在一起并获得色调:

var hue = rgbToHsl(r, g, b)[0] * 360;

[0] 是获取色相——该函数返回一个数组 ([h,s,l])。我们乘以 360，因为色调返回为 0 到 1 之间的值；我们想将其转换为度数。

使用 #c7d92c 的示例颜色，hue 将为 ~66.24。 Photoshop 的颜色选择器显示该颜色的色调为 66°，所以看起来我们不错!