Question

我正在尝试为不同的颜色模型显示每个颜色通道，类似于this site。

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

为了显示RGB和HSL，我显然只使用了rgb()和hsl()。例如，要在hsl中显示整个范围的s（aturation），我会做这样的事情：

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

将其应用于线性渐变，然后在画布上显示。似乎addColorStop仅支持关键字，十六进制，rgb / a和hsl / a。那么我怎么能用可用的颜色模型直观地表示其他颜色模型？

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

Answer 1

目前浏览器或画布不支持HWB。它包含在CSS模块4级中，但在任何地方都不受支持。

虽然很容易与颜色模型进行转换。

我将这些JavaScript函数转换为来自this code的RGB和HWB之间的转换（通过一些调整来标准化H和＆＃34;去标准化＆＃34; RGB）。他们都返回一个对象：

＆＃13;

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

＆＃13;

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

＆＃13;

要将其用作颜色停止等的输入，请执行以下操作：

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 + ")"
}

如何使用RGB或HSL显示HWB / HSB / CMYK通道

1 个答案: