CSS 颜色函数 hwb

hwb

1. hwb 是 CSS 中的一种颜色函数，用于指定一种颜色的色相、白度和黑度，其中 h 表示色相（Hue，red=0deg=360deg=-1turn=1turn、blue=-120deg=240deg、lime=480deg=120deg，与 HSL 和 HSV 中的色调坐标相同），取值范围为 0 到 360 度，表示颜色在色轮上的位置，0 度表示红色，120 度表示绿色，240度表示蓝色；w 表示白度（Whiteness），取值范围为 0% 到 100%，表示色彩中白色的占比；b 表示黑度（Blackness），取值范围为 0% 到 100%，表示色彩中黑色的占比。
2. 此颜色模型使用的时候先选择一个主色，然后再和白色和（或）黑色“混合”以产生所需的颜色。由于 hwb 更符合人类的直观感觉，因此，hwb 模型的颜色更容易脑补出来。它可以用来替代 hsl 函数，例如 hwb(0 0% 30%) 是红色加入 30% 的黑色，相当于 hsl(0 100% 30%)，就是偏深一点的红色。
3. 要注意的是，hwb 函数不像以前的颜色函数使用逗号分隔其值，如果指定可选的 alpha 透明度值，需要在前面加上正斜杠 /。

rgb 和 hwb 互转

下面使用 JS 实现 RGB 和 HWB 之间的颜色转换（出自这里）。

// RGB [0, 255]
// HWB [0, 1]
function rgb2hwb(r, g, b) {
  
  r /= 255;
  g /= 255;
  b /= 255;
  
  var f, i,
      w = Math.min(r, g, b);
      v = Math.max(r, g, b);
      black = 1 - v;
  
  if (v === w) return {h: 0, w: w, b: black};
  f = r === w ? g - b : (g === w ? b - r : r - g);
  i = r === w ? 3 : (g === w ? 5 : 1);

  return {h: (i - f / (v - w)) / 6, w: w, b: black}
}

// HWB [0, 1]
// RGB [0, 255]
function hwb2rgb(h, w, b) {
  
  h *= 6;
  
  var v = 1 - b, n, f, i;
  if (!h) return {r:v, g:v, b:v};
  i = h|0;
  f = h - i;
  if (i & 1) f = 1 - f;
  n = w + f * (v - w);
  v = (v * 255)|0;
  n = (n * 255)|0;
  w = (w * 255)|0;

  switch(i) {
    case 6:
    case 0: return {r:v, g:n, b: w};
    case 1: return {r:n, g:v, b: w};
    case 2: return {r:w, g:v, b: n};
    case 3: return {r:w, g:n, b: v};
    case 4: return {r:n, g:w, b: v};
    case 5: return {r:v, g:w, b: n};
  }
}
console.log(rgb2hwb(255, 0, 0)); // {h: 1, w: 0, b: 0}
console.log(hwb2rgb(1, 0, 0)); // {r: 255, g: 0, b: 0}