发表评论

当你看到这个题目的时候，你可能会有点迷惑：“一个颜色是什么颜色”，这个问题好无厘头。但如果我换个用法 ，你可能就能明白 — 人类是如何辨别出一个颜色是红色而不是绿色？

回想小时候，大家应该都听说过 —— 三原色。不同的人可能记得不同，有的人记得是红绿蓝（色光三原色），也有人记得是红青黄（美术三原色）。结果不一样，但并不影响。两种三原色都告诉你了 —— 一个颜色是可以由另外三种颜色组合而成。

这意味着，每一个颜色都对应着三个坐标。他们是 RGB 也好，还是其他也好，都是通过三个颜色的色码来确认是哪个具体的颜色的。我们的显示器也是如此制造的。

但三原色有个问题 —— 变量太多。假设我们在每个维度分 3 个不同的结果，三原色可以拼出 27 种不同的组合。如果我们在每个维度分成 10 阶，这个结果就是 1000 个不同的维度。按照 RGB的 0 ～ 255 ，一共 256 阶，则一共可以形成 16,777,216 个组合。如果你想要构建出一组用于判断的规则，就十分的困难。

因此，换一个坐标系会是更好的办法 —— 试试 HSL 描述方法。

HSL 是将 RGB 三维坐标转换为色相、饱和度、亮度（英语：Hue, Saturation, Lightness）组成的新维度坐标。

当我们变为新的坐标系后，我们定义颜色的坐标就从过去的三个维度，变为了只需要色相（Hue）这一个坐标就可以定位的坐标。毕竟，如果一个蓝色不饱和饱和，都不影响他是个蓝色；同样的，一个蓝色的亮度不高，但依然是蓝色。

通过从 RGB 坐标系转变为 HSL 坐标系，我们就将过去的 16,777,216 个组合简化为 360 阶。从过去的三维坐标系，变为了全新的一维坐标系。

这样我们就可以十分简单的来细分我们的不同的颜色，更好的来编写规则。比如Hue 在 15 ～ 45 时为橙色；在45 ～ 75 时为黄色；在 75 ～105 时为绿色等等。

在我们写代码的时候也会更加简单，我们只需要计算出具体的 Hue 的值，就可以得出对应的颜色的名字。

RGB to HSL 算法

如下算法来自 Wikipedia

https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

设 (r, g, b)分别是一个颜色的红、绿和蓝坐标，它们的值是在0到1之间的实数。设max等价于r, g和b中的最大者。设min等于这些值中的最小者。要找到在HSL空间中的 (h, s, l)值，这里的h ∈ [0, 360）度是角度的色相角，而s, l ∈ [0,1]是饱和度和亮度，计算为：

h的值通常规范化到位于0到360°之间。而h = 0用于max = min的（定义为灰色）时候而不是留下h未定义。

RGB to HSL Sample 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];
}

https://www.december.com/html/spec/colorterms.html