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

Question

我正在尝试显示不同颜色模型的每个颜色通道，类似于此站点。

该站点显示 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 函数以在 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 + ")"
}

Answer 2

2022 年的 Chrome 101 中增加了对 HWB（色调白度黑度）的支持。

规格在CSS 颜色模块级别 4中列出：

执行：

hwb() = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )

 function hwbToRgb(hue, white, black) { white /= 100; black /= 100; if (white + black >= 1) { let gray = white / (white + black); return [gray, gray, gray]; } let rgb = hslToRgb(hue, 100, 50); for (let i = 0; i < 3; i++) { rgb[i] *= (1 - white - black); rgb[i] += white; } return rgb; }

 function rgbToHwb(red, green, blue) { var hsl = rgbToHsl(red, green, blue); var white = Math.min(red, green, blue); var black = 1 - Math.max(red, green, blue); return([hsl[0], white*100, black*100]); }