HTML5 中怎么用 color 类型获取 RGB 格式的颜色数值用于业务逻辑-H5教程-PHP中文网

html5 的默认返回 7 位小写十六进制字符串（如 "#a3c2e8"），需手动解析为 rgb 对象；可用 slice() 去 # 后分段 parseint(..., 16) 转换，再用于亮度判断、色彩检测或反色生成等业务逻辑。

html5 中怎么用 color 类型获取 rgb 格式的颜色数值用于业务逻辑

HTML5 的 <input type="color"> 默认返回十六进制字符串（如 "#ff0000"），不是 RGB 数值；需手动解析转换才能用于业务逻辑。

理解 color 输入框的原始输出

用户选择颜色后，input.value 始终是 7 位小写十六进制字符串（如 "#a3c2e8"），不支持透明度，也不直接提供 R、G、B 数字。这是浏览器规范行为，无法通过属性修改。

将 #RRGGBB 转为 RGB 数值对象

用 JavaScript 提取并转换即可，推荐简洁可靠的解析方式：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用正则或 .slice() 去掉 # 号
每两位字符转为 16 进制整数：parseInt(str, 16)
封装成 { r, g, b } 对象，便于后续计算或传参

示例代码：

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.slice(0, 2), 16);
  const g = parseInt(clean.slice(2, 4), 16);
  const b = parseInt(clean.slice(4, 6), 16);
  return { r, g, b };
}

// 使用
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', () => {
  const rgb = hexToRgb(colorInput.value); // { r: 255, g: 0, b: 128 }
  console.log(`R=${rgb.r}, G=${rgb.g}, B=${rgb.b}`);
});