javascript - 如何使用 RGB 或 HSL 显示 HWB/HSB/CMYK channel

Question

我正在尝试显示不同颜色模型的每个颜色 channel ，类似于 this site .

该网站显示 HSB 和 CMYK，但我还想显示 HWB。

为了显示 RGB 和 HSL，我显然只使用了 rgb() 和 hsl()。例如，要在 hsl 中显示 s(饱和度)的完整范围，我会执行以下操作:

hsl(hue, 0, luminosity);
hsl(hue, 50, luminosity);
hsl(hue, 100, luminosity);

将其应用于线性渐变，然后显示在 Canvas 上。看来addColorStop仅支持关键字、hex、rgb/a 和 hsl/a。那么我如何使用可用的颜色模型直观地表示其他颜色模型？

我到处都找过了，但找不到任何东西，希望这不是一个重复的问题。

Answer 1

Update 2023: Now HWB has full support. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb#browser_compatibility

目前浏览器或 Canvas 不支持 HWB。它包含在 CSS 模块级别 4 中，但尚未得到任何支持。

不过，与颜色模型之间的转换很容易。

我将这些 JavaScript 函数转换为在 this code 之间进行 RGB 和 HWB 之间的转换(进行一些调整以标准化 H 和“非标准化”RGB)。它们都返回一个对象:

// 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};
  }
}

// ------ TEST -------
var hwb = rgb2hwb(250,100,10);
var rgb = hwb2rgb(hwb.h, hwb.w, hwb.b);
document.getElementById("hwb").innerHTML = hwb.h.toFixed(2) + "," + hwb.w.toFixed(2) + "," + hwb.w.toFixed(2);
document.getElementById("rgb").innerHTML = rgb.r + "," + rgb.g + "," + rgb.b;

Original RGB: <span>250,100,10</span><br>
rgb2hwb: <span id="hwb"></span><br>
hwb2rgb: <span id="rgb"></span><br>

要将其用作色标等的输入，请执行以下操作:

gr.addColorStop(n, fromHWB(360, 50, 50));
...

function fromHWB(H, W, B) {
    var c = hwb2rgb(H/360, W/100, B/100);
    return "rgb(" + c.r + "," + c.g + "," + c.b + ")"
}