hexToRgb 函数需先处理#号和三字符简写（如#abc→aabbcc），再用正则/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i匹配，确保输入合法且通道完整。
hexToRgb 函数怎么写才不翻车
直接用 parseInt(hex.substring(0,2), 16) 拆两位转十进制是可行的，但必须先处理三字符简写（如 #fff）和开头的 #。漏掉这两步，#999 会变成 rgb(153, 0, 0) —— 因为只取了前两位 99，后面 9 被截断，绿蓝通道全归零。
- 先
hex.replace('#', '')去掉井号，别用slice(1)，否则999这种没 # 的会崩 - 长度为 3 时必须展开：把
#abc变成aabbcc，不是abcc或abcabc - 用正则
/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i匹配更稳，它能自动拒绝#ggg、#1234这类非法输入
RGB 字符串解析常被忽略的细节
rgb(255, 182, 193) 看似简单，但实际解析时容易栽在空格、逗号、单位甚至大小写上。浏览器原生支持 rgba(255,182,193,0.5)，但你自己写的 rgbToHex 若只靠 .split(',')，遇到 rgb(255 , 182 , 193) 就会多出空格导致 parseInt 返回 NaN。
- 必须用正则
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/i提取数字，\s*吃掉任意空格 - RGB 值要强制约束在 0–255：用
Math.min(255, Math.max(0, num))，否则rgb(300, -20, 100)会转出#12c这种无效结果 - 十六进制补零不能省：
10→a是错的，必须是0a；toString(16).padStart(2, '0')是最安全写法
浏览器控制台里快速验证颜色转换
不用跑代码、不装插件，打开 F12 控制台，粘贴这行就能看到浏览器自己算的 RGB：
getComputedStyle(document.body).backgroundColor
它会返回 rgb(255, 255, 255) 或 rgba(0, 0, 0, 0.8) —— 这说明 CSS 中写的 #fff、rgb(255,255,255)、white 在渲染层已被统一归一化。反向验证时，把 rgb(168,194,225) 写进元素 style，再查 style.backgroundColor，就能确认是否转对了。
- 注意：
style.color只读内联样式，getComputedStyle才读最终计算值 - 如果返回的是
rgb(...)但你输的是#A8C2E1，说明转换逻辑没问题；如果返回transparent或空字符串，大概率是元素没渲染或选择器错了
透明度（alpha）让 hex ↔ rgb 转换变复杂
标准 HEX 不带透明度，#A8C2E1 就是纯色。一旦需要 rgba，就得升维到 8 位（#A8C2E1FF）或额外传 opacity 参数。很多函数只支持六位 HEX，遇到 #A8C2E180（半透）就直接报错或截断。
- 若需支持 alpha，hex 字符串长度可能是 4（
#RGBA）或 8（#RRGGBBAA），不能硬判=== 6 - PHP 的
wpjam_hex2rgba和 JS 的hextorgba都把 opacity 当独立参数，这是更可控的做法：hex 保持语义纯净，透明度由调用方决定 - 别用
rgba(r,g,b,opacity)拼接后直接当颜色值用——某些老浏览器不认，CSS 层面建议 fallback：background-color: #A8C2E1; background-color: rgba(168,194,225,0.8);
十六进制和 RGB 转换看着只是进制换算，真正卡住人的永远是边界情况：简写、大小写、空格、超范围值、透明度耦合。写函数时少依赖“用户会输对”，多加一层校验和归一化，比事后 debug 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
