hex与rgb是同一数值的不同进制表示，hsl需经rgb中转；hex→rgb需归一化长度、校验非法字符、扩展简写并用parseint(x,16)转换；rgb→hex须补零至两位，不可直接tostring(16)。
HEX 和 RGB 本质是同一套数值，只是进制不同；HSL 是另一套坐标系，转换必须经过 RGB 中转，不能跳步。
HEX → RGB 的字符串解析要处理简写和校验
常见错误是直接用 substr 或正则硬切，结果遇到 #abc 或 #12345678（带 alpha）就崩。正确做法是先归一化长度：
- 匹配
/^#?([a-f\d]{3}|[a-f\d]{6}|[a-f\d]{8})$/i，排除非法字符和长度 -
#abc扩展为#aabbcc，不是拼接而是每位重复一次 - 提取后用
parseInt(x, 16)转十进制，注意parseInt("ff", 16) === 255，别漏掉基数参数 - 如果输入是
#rrggbbaa，第 7–8 位是 alpha，需单独提取并除以 255 归一化
RGB → HEX 必须补零且不依赖 toString(16)
直接 r.toString(16) 对于 r = 10 得到 "a"，但 HEX 要求两位，"0a" 才合法。常见翻车点：
- 没做
r 判断，导致 <code>#f00变成#f00（错）或#0f0000（更错） - 用
padStart(2, "0")最稳妥，(r).toString(16).padStart(2, "0") - 值超出 [0, 255] 区间时，应 clamp：比如
rgb(300, -20, 128)→r = Math.max(0, Math.min(255, 300)) - 简写逻辑要严格：仅当
r % 17 === 0 && g % 17 === 0 && b % 17 === 0（即0x00、0x11…0xff）才可缩成三位
HSL 转换必须走 RGB 中间态，且归一化不可省略
浏览器里 hsl(210, 70%, 60%) 渲染时，内部一定先转成 RGB 再送显卡。手写转换时最常漏掉这步：
-
rgbToHsl函数输入必须是[0, 1]区间，不是[0, 255]—— 否则亮度分母max + min会超限，s算出负数 - 灰色判定不能用
max === min，浮点误差会让0.3333333333333333 !== 0.33333333333333337，得用Math.abs(max - min) - HSL 的色相
H输出单位是度（0–360），但公式中间算出来是弧度或分数，最后必须 ×60 并Math.round() - HEX → HSL 实际是两步：
hexToRgb→rgbToHsl，少一步结果全错
rgba() 转 HEX 需要背景假设，没有唯一解
rgba(0, 0, 0, 0.2) 本身不对应某个 HEX 值，它只在叠加到特定背景上才有确定颜色。若默认背景为白色：
- 按公式
result = opacity * foreground + (1 - opacity) * background计算每个通道 - 黑色前景
(0,0,0)+ 白色背景(255,255,255)→(51,51,51)→#333 - 但若背景是灰色
#ccc，结果就是#b3b3b3，所以必须明确背景色才能转 - 多数工具默认白底，但生产环境千万别假设——CSS 里
rgba()的语义就是“半透明”，不是“某种灰”
真正容易被忽略的，是所有转换都绕不开的边界值：全黑 #000、全白 #fff、纯灰 #888、简写 #000 和 #000000 是否等价、alpha 为 0 时的处理逻辑。这些地方不加 guard，函数在真实项目里跑几轮就挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
