如何获得#xxxxxx颜色的色调？

Question

如何提取指定为“ #rrggbb”的颜色的色相成分？

Answer 1

如果您搜索如何将RGB转换为HSL，则会发现许多算法，包括Sergey链接的Wikipedia文章。

首先，提取十六进制颜色表示法的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。

然后，您可以使用Wikipedia文章中的公式来计算色相，或无耻地窃取他人的代码：

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];
}

现在，我们可以将这两个代码片段放在一起并获得色相：

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

的[0]是抓住色相-该函数返回一个数组（[h,s,l]）。由于色相的返回值介于0和1之间，因此我们乘以360。我们想将其转换为度。

随着的例子色彩#c7d92c，hue将是〜66.24。Photoshop的颜色选择器表示该颜色的色相为66°，因此看起来我们不错！