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°，所以看起来我们很好！

Answer 2

维基百科文章的公式看起来很容易实现：

http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB

编辑：这是一个使用这些公式的函数：

function getHue(color) {
  var r = parseInt(color.substring(0,2),16)/255;
  var g = parseInt(color.substring(2,4),16)/255;
  var b = parseInt(color.substring(4,6),16)/255;

  var hue;
  if ((r >= g) && (g >= b)) {
      hue = 60*(g-b)/(r-b);
  } else if ((g > r) && (r >= b)) {
      hue = 60*(2 - (r-b)/(g-b));
  }
  //... continue here
  return hue;
}

alert(getHue('FF0000')); // correctly returns 0
alert(getHue('408000')); // correctly returns 90
alert(getHue('0000FF')); // not implemented yet

继续使用该维基百科文章中表格中的公式以获取其他角度。

Answer 3

hue = Atan2(1.732050808 * (G - B), (2 * R - G - B)) * 57.295779513;

http://en.wikipedia.org/wiki/Hue

hue = Atan2（sqr（3）*（G - B），2 * R - G - B）

结果将在极坐标中。乘以180并除以pi以转换为角度。

Answer 4

多年来我也偶然发现了这个问题，这就是我如何解决这个问题。

致谢：Brandon Mathis hslpicker.com，代码来自here

function hexToRgb (color) {
  let hex = color[0] === '#' ? color.slice(1) : color;
  let c;

  // expand the short hex by doubling each character, fc0 -> ffcc00
  if (hex.length !== 6) {
    hex = ((() => {
      const result = [];
      for (c of Array.from(hex)) {
        result.push(`${c}${c}`);
      }
      return result;
    })()).join('');
  }
  const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
  const rgb = colorStr.map(col => parseInt(col, 16));
  rgb.push(1);
  return rgb;
}

function rgbToHsl (rgb) {
  const r = rgb[0] / 255;
  const g = rgb[1] / 255;
  const b = rgb[2] / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;
  const add = max + min;

  const hue =
    min === max ?
      0
    : r === max ?
      (((60 * (g - b)) / diff) + 360) % 360
    : g === max ?
      ((60 * (b - r)) / diff) + 120
    :
      ((60 * (r - g)) / diff) + 240;

  const lum = 0.5 * add;

  const sat =
    lum === 0 ?
      0
    : lum === 1 ?
      1
    : lum <= 0.5 ?
      diff / add
    :
      diff / (2 - add);

  const h = Math.round(hue);
  const s = Math.round(sat * 100);
  const l = Math.round(lum * 100);
  const a = rgb[3] || 1;

  return [h, s, l, a];
}

我在这两个函数周围编写了一个小包装器，将十六进制颜色数组转换为描述H / S / L组件的字符串数组

function hexToHsl (color) {
  const rgb = hexToRgb(color);
  const hsl = rgbToHsl(rgb);
  return `original: ${ color } - H: ${ hsl[0] } S: ${ hsl[1] } L: ${ hsl[2] }`;
}

用法：

var colors = ['#51bce6','#6dcff6','#829CBD','#565a5c']
colors.map(color => hexToHsl(color))

=> ["original: #51bce6 - H: 197 S: 75 L: 61", "original: #6dcff6 - H: 197 S: 88 L: 70", "original: #829CBD - H: 214 S: 31 L: 63", "original: #565a5c - H: 200 S: 3 L: 35"]

Answer 5

npm上现在有写得很好的库，例如：

https://www.npmjs.com/package/color-convert

非常感谢它使用MIT许可证，就像npm上的大多数库一样。

使用该库，您希望从十六进制变为HSL *或HSV *并采用第一个值：

var convert = require('color-convert');
let hue = convert.hex.hsv('DEADBF')[0];

在使用require（）之前，您必须安装npm，并在项目文件夹中运行npm install --save color-convert。我相信您也可以将库放在浏览器的script标签中。

* HSL：色相，饱和度，亮度。 HSV：色相，饱和度，值。

你如何得到#xxxxxx颜色的色调？

5 个答案: