如何将CSS的HWB颜色转换为RGB格式？-css教程-PHP中文网

hwb转rgb是rgb空间内的坐标变换，需经归一化、极值计算、色相分段判断三步：h定主色方向，w/b控制白/黑拉伸；输入须校验范围且w+b≤1，h=0时返回灰阶，h≠0时按色相区间插值得r/g/b，再×255取整。

如何将css的hwb颜色转换为rgb格式？

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