color input 的 value 值直接返回标准7位小写十六进制字符串（如"#ff0000"），无需解析；初始值为"#000000"而非空值；应监听change事件而非input事件以确保值完整可靠。
color input 的 value 值就是十六进制字符串
HTML 的 <input type="color"> 元素在 JS 中直接读取 value 属性，得到的就是标准 7 位小写十六进制格式，例如 "#ff0000"。它不是 RGB 数组，也不是十进制数值，不需要手动转换 —— 浏览器已帮你标准化了。
常见错误是试图用 parseInt 或正则去“解析”它，结果反而出错；更隐蔽的问题是没注意初始值：未交互前的 value 是浏览器默认色（通常是 "#000000"），不是空字符串或 undefined。
-
input元素必须有初始value属性，否则部分浏览器（如 Safari）可能返回空字符串或不触发 change - 用户未点击选色就提交表单时，
value仍是初始值，不是“未选择”状态 - 所有现代浏览器（Chrome/Firefox/Edge/Safari 16.4+）都返回带 # 的 7 字符格式，不会出现
"ff0000"或大写
监听 change 事件获取实时颜色值
不要用 input 事件 —— 它在拖拽调色盘时频繁触发且值可能不完整；change 才是语义正确、时机可靠的事件，只在用户确认选择后触发。
示例：
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('change', () => {
console.log(colorInput.value); // 直接输出类似 "#a3c842"
});
- 若需兼容旧版 Safari（
- 移动端 iOS 上，原生 color picker 可能被系统覆盖，但
value行为一致 - 不要依赖
blur或click，它们无法准确捕获颜色确认动作
需要去掉 # 号或转成 RGB 怎么办
如果后续逻辑要传给 Canvas、CSS custom property 或后端 API，常需去除 # 或拆成 RGB 分量。这些转换应显式做，而不是假设输入值“已经干净”。
- 去 # 号：
colorInput.value.slice(1)→"ff0000" - 转 RGB 数字：
parseInt(colorInput.value.slice(1, 3), 16)得 R，同理 G/B - 注意：不能用
colorInput.value.substring(1)处理空值，因为未设 value 时可能为""，需先校验 - 避免用
new Color()或第三方库——原生字符串足够稳定，加一层抽象反而引入兼容风险
服务端接收时要注意什么
前端传过去的 #rrggbb 是可信格式，但服务端不能直接存或渲染 —— 必须校验合法性，防止注入或无效值绕过前端限制。
- 正则校验推荐：
^#[0-9a-fA-F]{6}$，注意大小写兼容（虽然浏览器总输出小写，但别依赖） - 数据库字段建议存为 CHAR(7)，而非整数或 JSON，便于索引和调试
- 若用于 CSS 动态生成，务必用 CSS.escape() 或模板字符串插值，避免拼接漏洞
- 别忽略 alpha 通道：type="color" 不支持透明度，
rgba()需另用其他控件实现
真正容易被忽略的是初始值语义 —— 它不是“无色”，而是“默认黑”，业务逻辑里得明确区分“用户没动过”和“用户选了黑色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
