一尘不染

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

javascript

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


阅读 6201

收藏
2020-05-01

共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。我们想将其转换为度。

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

2020-05-01