input[type="color"]始终返回小写7位十六进制字符串（如"#ff00aa”），不支持透明、简写或命名色；取值需剥离"#"后转rgb，再按wcag公式计算亮度以确保可访问性。
input type="color" 返回的始终是 7 位十六进制字符串
input[type="color"] 的 value 属性永远返回形如 "#ff00aa" 的 7 字符字符串（含 #），即使用户选的是透明色（实际不支持透明）、简写色（如 #f0a）或非标准格式，浏览器也会自动标准化为大写？不，是**小写 + 7 位**（Chrome/Firefox/Safari 均返回小写）。它不会返回 rgb()、hsl() 或命名色（如 "red"），也不会响应手动设置非 7 位格式的值（设成 "#f0a" 会自动补全为 "#ff00aa"）。
常见错误现象：
– 直接用 element.value === "red" 判断失败
– 用 parseInt(value, 16) 报错（因为开头有 "#"）
– 传给 Canvas fillStyle 没问题，但想算亮度/对比度时没剥离 #
实操建议：
- 取值后统一用
value.slice(1)或value.replace(/^#/, '')剥离#，再处理六位 hex - 需要转 RGB？用
parseInt(hex.substring(0,2), 16)分别取 r/g/b，别忘了补零校验（虽然input总给足 6 位） - 不要尝试监听
input事件去“过滤”非法输入——它根本不会让你输非法内容，所有交互都由浏览器控件完成
转 RGB 时注意 parseInt 的基数必须显式传 16
JavaScript 的 parseInt("ff", 10) 会当十进制解析，结果是 ff → NaN；漏掉第二个参数 parseInt("ff") 会按“自动推断”规则，以 "0x" 开头才识为 hex，否则默认 10 进制——所以 parseInt("ff") 仍是 NaN。这是最常踩的坑。
正确做法：
- 拆分六位 hex：假设
hex = "ff00aa"，则r = parseInt(hex.slice(0,2), 16)，g = parseInt(hex.slice(2,4), 16)，b = parseInt(hex.slice(4,6), 16) - 可封装成函数：
function hexToRgb(hex) {<br> const c = hex.slice(1);<br> return {<br> r: parseInt(c.slice(0,2), 16),<br> g: parseInt(c.slice(2,4), 16),<br> b: parseInt(c.slice(4,6), 16)<br> };<br>} - 不推荐用正则或
Number(`0x${c}`)——前者易错，后者对非 6 位输入容错差（而input[type=color]固定给 6 位，但代码健壮性仍建议用parseInt）
需要 HSL 或亮度计算？先转 RGB 再算，别试图直解 hex
没有浏览器 API 能直接从 #rrggbb 得到 HSL 或相对亮度（relative luminance），必须经过 RGB 中转。尤其要注意 WCAG 2.1 的亮度公式：L = 0.2126 * R′ + 0.7152 * G′ + 0.0722 * B′，其中 R′ 等是 gamma 校正后的值（需先除以 255，再按 sRGB 规则分段处理），不是简单线性缩放。
使用场景：
- 根据背景色自动切换文字色（白 or 黑）→ 必须算相对亮度
- 生成相近色（如加 20% 饱和度）→ 必须转 HSL
- 做颜色对比度检查 → 必须用 WCAG 公式，不能只看 RGB 差值
性能提示：这些计算本身极轻量，但若在 input 的 change 事件里高频调用（比如拖拽调色盘），建议加防抖；不过 type="color" 实际只在确认选择后触发一次 change，无需过度优化。
移动端 color input 的兼容性与 fallback 方案
iOS Safari 直到 iOS 16.4 才原生支持 input[type="color"]，更早版本会降级为文本框（显示 #ff00aa 且可编辑，但无取色器）；部分安卓 WebView 也有类似问题。不能假设所有用户都能点开调色盘。
实操建议：
- 用
CSS @supports (color: color())或特性检测document.createElement('input').type = 'color'后查type是否仍为"color"来判断支持度 - fallback 不要只加 placeholder——应提供一组预设色按钮（
button+ 内联style="background:#xxx"），点击后同步赋值给input并触发input事件 - 服务端永远不要信任前端传来的颜色值——需二次校验是否匹配
/^#[0-9a-fA-F]{6}$/，防止篡改
真正麻烦的不是转换逻辑，而是得同时应付浏览器自动标准化、移动端降级、以及 WCAG 合规性这三件事——它们各自独立，又常常被当成一回事处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
