HTML5 的 <input type="color"> 默认返回 7 位小写十六进制字符串（如 "#a3c2e8"），需手动解析为 RGB 对象；可用 slice() 去 # 后分段 parseInt(..., 16) 转换，再用于亮度判断、色彩检测或反色生成等业务逻辑。
HTML5 的 <input type="color"> 默认返回十六进制字符串（如 "#ff0000"），不是 RGB 数值；需手动解析转换才能用于业务逻辑。
理解 color 输入框的原始输出
用户选择颜色后，input.value 始终是 7 位小写十六进制字符串（如 "#a3c2e8"），不支持透明度，也不直接提供 R、G、B 数字。这是浏览器规范行为，无法通过属性修改。
将 #RRGGBB 转为 RGB 数值对象
用 JavaScript 提取并转换即可，推荐简洁可靠的解析方式：
- 用正则或
.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}`);
});
业务中常见处理场景
拿到 RGB 数值后，可直接用于多种逻辑：
-
亮度判断：用加权公式
0.299*r + 0.587*g + 0.114*b计算相对亮度，决定文字颜色是否反色 - 色彩相近检测：与预设色值计算欧氏距离，判断是否属于“暖色系”或“品牌主色”范围
-
生成对应灰度/反色：如
rgb(255−r, 255−g, 255−b) -
传给后端或 Canvas API：多数接口和绘图上下文接受
r,g,b分离参数
注意边界情况
虽然 color 输入框本身会限制输入（只允许合法十六进制），但仍建议简单校验：
- 检查
value.length === 7 && value[0] === '#' - 若需兼容旧浏览器或手动赋值，可加
isNaN(r) || isNaN(g) || isNaN(b)防错 - 无需处理 alpha（透明度）——
type="color"不支持 alpha，返回值永远无第 8–9 位
