HWB转RGB是RGB空间内的坐标变换，需经归一化、极值计算、色相分段判断三步：H定主色方向，W/B控制白/黑拉伸；输入须校验范围且W+B≤1，H=0时返回灰阶，H≠0时按色相区间插值得r/g/b，再×255取整。
HWB转RGB的数学逻辑是什么
HWB不是简单查表就能换算的格式，它本质是RGB空间里的坐标变换：H（色相）决定主色方向，W（白度）和B（黑度）决定往纯白或纯黑方向“拉伸”程度。中间必须经过归一化、极值计算、色相分段判断三步，不能靠位运算或字符串拼接速成。
用JavaScript实现HWB→RGB转换的要点
核心函数 hwb2rgb 需要处理三个关键条件：
- 输入值范围必须校验：H ∈ [0, 1)，W ∈ [0, 1]，B ∈ [0, 1]，且 W + B ≤ 1，否则结果无意义
- H为0时直接返回灰阶，避免除零错误；H非0时需先取整确定色相区间（i = 0~5），再用小数部分f插值
- 最终r/g/b需乘以255并取整，但要注意浮点误差——
Math.round()比Math.floor()更稳妥
示例代码片段：
function hwb2rgb(h, w, b) {
if (w + b > 1) return { r: 0, g: 0, b: 0 }; // 无效输入兜底
const v = 1 - b;
if (v === 0) return { r: 0, g: 0, b: 0 };
if (w === v) return { r: w * 255, g: w * 255, b: w * 255 };
h *= 6;
const i = Math.floor(h);
const f = h - i;
const n = w + f * (v - w);
let r, g, bVal;
switch (i % 6) {
case 0: r = v; g = n; bVal = w; break;
case 1: r = n; g = v; bVal = w; break;
case 2: r = w; g = v; bVal = n; break;
case 3: r = w; g = n; bVal = v; break;
case 4: r = n; g = w; bVal = v; break;
case 5: r = v; g = w; bVal = n; break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(bVal * 255)
};
}浏览器原生不支持HWB→RGB的CSS转换
CSS本身没有提供类似 color-mix() 那样把HWB直接转成RGB字符串的能力。你写的 color: hwb(120 20% 10%) 在Computed面板里显示的rgb()值，是浏览器渲染引擎内部计算的结果，无法通过CSS变量或calc()反推出来。
立即学习“前端免费学习笔记（深入）”；
这意味着：
-
getComputedStyle(el).color返回的是已解析的rgb(…)或rgba(…)字符串，但这是只读值，不能反向生成HWB - 若需在JS中动态生成对应RGB，必须自己实现
hwb2rgb，不能依赖CSSOM - Chrome DevTools取色器长按切换格式时，
hwb()只能转出近似rgb()，存在四舍五入误差，尤其当W/B值含小数时
实际项目中容易忽略的边界情况
真实页面里HWB颜色往往嵌套在变量或函数中，比如 color: hwb(from var(--base) h w b)，这时你拿到的不是原始HWB三元组，而是经过相对颜色计算后的中间值。直接套用标准转换函数会出错。
更麻烦的是透明度处理：hwb(0 0% 0% / 0.7) 的alpha不参与HWB到RGB的色域映射，但最终rgb()结果必须带alpha通道。所以完整流程是：先算出r/g/b整数，再合并alpha——不是在hwb2rgb里加第四个参数，而是在外层包装一层rgba输出。
