如何获得#xxxxxx颜色的色调？ [英] How do you get the hue of a #xxxxxx colour?

问题描述

如何提取以'#rrggbb'表示的颜色的色相组件？

How do you extract the hue component of a color given as '#rrggbb'?

推荐答案

=http://www.google.com/search?q=rgb+to+hsl =nofollow noreferrer>搜索如何将RGB转换为HSL，您会发现一些算法，包括在链接的维基百科文章中Sergey 。

If you search for how to convert RGB to HSL, you'll find a number of algorithms, including in the Wikipedia article linked by Sergey.

首先，提取十六进制颜色符号的RGB组件。

First, extract the RGB components of the hex color notation.

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）。

That'll get you the byte (0-255) representation of your color. In this case, 199, 217, 44.

然后，您可以使用维基百科文章中的公式计算色调，或无耻地窃取别人的代码：

You can then use the formulae from the Wikipedia article to calculate hue, or 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（）函数。）

(See the source page for documentation and a hslToRgb() function.)

两个片段在一起并获得色调：

We can now put those two snippets together and get the hue:

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

[0] 色调该函数返回一个数组（ [h，s，l] ）。我们乘以360，因为色调返回为0和1之间的值;

The [0] is to grab the hue – the function returns an array ([h,s,l]). We multiply by 360 since hue is returned as a value between 0 and 1; we want to convert it to degrees.

使用＃c7d92c ，的示例颜色， hue 将〜66.24。 Photoshop的颜色选择器说，那种颜色的色调是66&所以看起来我们很好！

With the example color of #c7d92c, hue will be ~66.24. Photoshop's color picker says the hue of that color is 66° so it looks like we're good!

这篇关于如何获得#xxxxxx颜色的色调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！