color input 的 value 属性必须为严格7位小写十六进制格式（#rrggbb），不支持缩写、命名色、rgb等格式；js赋值需补零转换；移动端可能被系统重置；value始终返回无透明度的标准格式，且仅在松手时触发change事件。
color input 的 value 属性必须是 7 位十六进制格式
HTML <input type="color"> 默认显示浏览器默认色（通常是 #000000），但初始化颜色必须用标准的 7 字符格式（#RRGGBB），哪怕你想设成红色——写 "red"、"#f00" 或 "rgb(255,0,0)" 都会被忽略，输入框仍显示黑色。
浏览器只认严格匹配 /^#[0-9a-fA-F]{6}$/ 的字符串。少一位、多一位、含字母超出范围、大小写混用（部分旧版 Safari 对大小写敏感）都会 fallback 到默认值。
-
<input type="color" value="#ff0000">✅ 正确 -
<input type="color" value="#f00">❌ 不生效（3 位缩写不支持） -
<input type="color" value="red">❌ 被忽略 -
<input type="color" value="#FF0000">✅ 大写也行（但建议小写统一）
JavaScript 动态设置 color input 值时需补零和校验
用 JS 赋值时，常见错误是直接传 rgb() 字符串或没补零的十六进制数。比如从 getComputedStyle(el).backgroundColor 拿到 rgb(255, 99, 71)，必须转成 #ff6347 才能生效。
手动转换容易漏补零（如 12 → "0c"，不是 "c"），推荐用以下安全写法：
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}
// 使用示例：
const el = document.querySelector('input[type="color"]');
el.value = rgbToHex(255, 99, 71); // → "#ff6347"
移动端 color input 的 value 初始化可能被系统覆盖
iOS Safari 和部分 Android 浏览器在页面加载时会重置 value，尤其当 input 在 DOM 中较早渲染、但 JS 初始化稍晚时。单纯靠 HTML 属性不可靠。
- 确保 JS 在 DOM ready 后立即设置
el.value - 避免依赖 CSS 自定义样式影响初始值读取（某些自定义主题会干扰原生控件状态）
- 如果用框架（如 React/Vue），注意不要让 state 初始值为空字符串或
undefined，否则首次 render 时value=""会触发 fallback
color input 的 value 值永远返回 7 位小写十六进制
无论用户在拾色器里选什么（HSV、HSL、命名色、透明度滑块），input.value 只返回标准 #rrggbb 格式，且不含 alpha —— 它根本不支持透明色。即使你设 value="#ff000080"（带 alpha），读出来仍是 "#ff0000"。
这意味着：不能靠它存/取带透明度的颜色；不能用它做颜色对比或计算（比如判断是否“接近白色”得自己解析 hex）；监听 change 事件拿到的值永远是规范格式，可直接用于 CSS background-color 等属性。
真正容易被忽略的是：这个控件没有 input 事件的实时反馈（只有 change），而且用户拖动拾色器时不会触发，直到松手才触发一次 —— 如果你需要实时预览，得用其他方案（比如监听 input 的 polyfill 或第三方库）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
