关于网页中色彩标识方法的研究

网页使用RGB颜色模型来表示颜色，这是一种加色模型，通过主色红、绿、蓝的叠加来产生多种不同颜色。每种颜色取值为0~255, 数值越小，颜色越黑，反之越白。HSL和HSV都是将RGB色彩模型中的点在圆柱坐标系中进行表示的方法。

网页中常用设定色彩的方法:

• keywords
• hex
• rgb
• hsl
• hsv

Keywords

网页中通过颜色关键字可以设定颜色。查阅：颜色关键字

示例用法：color: green , color: darkgreen , etc.

Hex

Notation: #RRGGBB[AA]

前6位3个字节，每个字节分别代表红(Red)、绿(Green)、蓝(Blue)，每个字节的范围从 00~FF (十六进制)，即 0~255 （十进制），一共可以表示 16^6=16,777,216 种颜色。最后一个字节表示透明度(Alpha)，是可选的，#ff0000 相当于 #ff0000ff。

简写：#RGB[A]，可以表示 16^3=4,096 种颜色。例: #eff 表示 #eeffff。

#000 黑色 #fff 白色

Hex字符串转RGB数值

// 将6位hex字符串转换为rgb数值
function hex2rgb(hex) {
  let result = {};
  if (hex.charAt(0)==='#') {
    hex = hex.substring(1);
  }
  if (hex.length === 3 || hex.length === 4) {
    let r = hex[0];
    let g = hex[1];
    let b = hex[2];
    result.r = parseInt(r + r, 16);
    result.g = parseInt(g + g, 16);
    result.b = parseInt(b + b, 16);
    if (hex.length === 4) {
      let a = hex[3];
      result.a = parseInt(a + a, 16);
    }
    return result;
  } else if (hex.length === 6 || hex.length === 8) {
    result.r = parseInt(hex.substring(0, 2), 16);
    result.g = parseInt(hex.substring(2, 4), 16);
    result.b = parseInt(hex.substring(4, 6), 16);
    if (hex.length === 8) {
      result.a = parseInt(hex.substring(6), 16);
    }
    return result;
  } else {
    return false;
  }
}
hex2rgb('#09C'); // { b: 204, g: 153, r: 0 }
hex2rgb('#0099CC'); // { b: 204, g: 153, r: 0 }
hex2rgb('09C'); // { b: 204, g: 153, r: 0 }
hex2rgb('0099CC'); // { b: 204, g: 153, r: 0 }
hex2rgb('#099C'); // { a: 255, b: 204, g: 153, r: 0 }
hex2rgb('#009999CC'); // { a: 255, b: 204, g: 153, r: 0 }
hex2rgb('#009999C'); // false

Hex调色技巧

使用hex表示法的时候，我们首先需要设定两种颜色混合产生的基本颜色，之后再利用第三种颜色来调整当前颜色深浅，数值越大，颜色越浅；如果需要把颜色调暗，则需要减小前面两种颜色的数值。举个例子：我们设置黄色，是红色和绿色混合，这样基础黄色的Hex就是 #FFFF00，如果要让黄色变淡，就把蓝色加进来，比如 #FFFF88，如果要让黄色变深，可以设置为 #CCCC00，调整红绿的数值不同，可以让颜色偏红或者偏绿。

RGB

在CSS中，可以通过 rgb(R, G, B[, A]) 或 rgba(R, G, B, A) 使用rgb数值表示颜色。

透明度参数的数值范围是0~1。

使用示例：color:rgb(255, 0, 153), color:rgba(255, 0, 153, .8)

HSL

HSL颜色模式通过色相(hue)、饱和度(saturation)、亮度(lightness)来表示颜色。

RGB数值转换到HSL数值

首先把RGB数值映射到[0, 1]区间, 即数值除以255。

Hue

hue的数值范围是degree [0, 360], 0 or 360表示红色，120是绿色，240是蓝色。

$M = max(R, G, B)$

$m = min(R, G, B)$

浓度(Chroma) $C = M - m$

$H' = \begin{cases} N/A, & if \ C = 0 \\ (G - B) / C, & if \ M = R, G > B \\ (G - B) / C + 6, & if \ M=R, G < B \\ (B - R) / C + 2, & if \ M = G \\ (R - G) / C + 4, & if \ M = B;\end{cases}$

$H = 60 * H'$

Lightness

数值范围[0, 1]

$L = 1/2 * (M + m)$

Saturation

数值范围[0, 1]

$S = \begin{cases}0, & if \ L = 1 \ or \ L = 0 \\ C / (1 - |2 * L - 1|), & otherwise\end{cases}$

计算示例

对于 R 191 G 64 B 191

首先进行放缩
$R = 191/255 = 0.75$
$G = 64/255 = 0.25$
$B = 191/255 = 0.75$

计算得出
$M = R = 0.75, m = 0.25, C = 0.5$
$(G - B) / C = -1 < 0$
$H' = -1 + 6 = 5$
$H = 5 * 60 = 300$

$L = 0.5 * (0.75 + 0.25) = 0.5$

$S = 0.5 / (1 - |2 * 0.5| - 1) = 0.5$

代码

function rgb2hsl(r, g, b) {
  let result = {};
  r = r / 255;
  g = g / 255;
  b = b / 255;
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let c = max - min;
  let hue = 0;
  let lightness = 0;
  let saturation = 0;
  if (c !== 0) {
    let h = 0;
    let segment = 0;
    switch (max) {
      case r:
        segment = (g - b) / c;
        // var shift = 0 / 60;       // R° / (360° / hex sides)
        // if (segment < 0) {          // hue > 180, full rotation
        //   shift = 360 / 60;         // R° / (360° / hex sides)
        // }
        // hue = segment + shift;
        h = segment += segment < 0 ? 6 : 0;
        break;
      case g:
        segment = (b - r) / c;
        h = segment + 2; // 120 / 60;
        break;
      case b:
        segment = (r - g) / c;
        h = segment + 4; // 240 / 60
        break;
    }
    hue = h * 60;
  }
  lightness = 0.5 * (max + min);
  if (lightness === 1 || lightness === 0) {
    saturation = 0;
  } else {
    saturation = c / (1 - Math.abs(2 * lightness - 1));
  }
  result.h = hue;
  result.s = saturation;
  result.l = lightness;
  return result;
}

在CSS中可以使用 hsl(H, S, L[, A]) 或 hsla(H, S, L, A) 使用hsl数值表示颜色。

透明度参数的数值范围是0~1。

如果H的值不在0~360之间，则有类似转换：-120=240, 480=120, etc.

HSV

HSV通过色相(hue)、饱和度(saturation)、明度(Value)来表示颜色。又叫HSB（Brightness）。

RGB转换到HSV

其中chroma和hue的计算方法和RGB转换到HSL的计算方法相同。

$V = M$

$S = \begin{cases}0, & if \ V = 0 \\ \frac{C}{V}, & otherwise \end{cases}$

计算示例

对于 R 191 G 64 B 191

同样进行放缩。

使用上文计算结果

$C = 0.5, H = 300$

然后可以算出

$V = M = 0.75$

$S = 0.5 / 0.75 = 0.67$

总结

RGB VS HSL

在平常网页编写中，rgb和hsl是比较常用的表示颜色的方法。通过比较发现，hsl其实会比rgb相对容易控制。

使用hsl的时候，我们可以想象到一个360度的调色盘，0度是红色，60度是黄色，120度是绿色，180度是青，240度是蓝色，300度是品红，再通过调节饱和度来调节颜色的深浅，通过调节亮度来调节颜色是趋向于黑还是趋向于白。通过小数值的调整，我们可以比较容易的找到和给定颜色相邻的几种颜色。

而对于rgb来说，在不借助其他工具的情况下，我们虽然可以一定程度上使用红、黄、蓝不同的数值来组合出特定的颜色，但要进行比较细微的控制和调整，是很难一下子写出来的。

HSL VS HSV

• hsl和hsv有相似的表示方法，但是hsl颜色表示法可以用于在CSS中表示颜色，而hsv不可以。

• 在HSL中，饱和度分量总是从完全饱和色（即非常柔和的几乎白色的颜色）变化到等价的灰色；HSV中，在极大值V的时候，饱和度从全饱和色变化到白色。

• 在HSL中，亮度跨越从黑色过选择的色相到白色的完整范围；在HSV中，V分量只走一半行程，从黑到选择的色相。

三者比较

参考资料

https://en.wikipedia.org/wiki/HSL_and_HSV#HSV

https://en.wikipedia.org/wiki/Web_colors

https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/

https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#HSL%E4%B8%8EHSV%E7%9A%84%E6%AF%94%E8%BE%83

https://mp.weixin.qq.com/s/5-XPFSv8mukCi6gNJTiNeA