三位十六进制颜色#rgb是六位格式#rrggbb的语法糖，需先扩展为六位再解析；扩展规则为每位字符重复一次，如#f33→#ff3333；js中须显式处理，否则parseint或正则会误读数值。
三位十六进制颜色必须先扩展再解析
三位写法（如#f33）不是独立颜色模型，而是六位格式的语法糖；浏览器内部一律转为六位处理。不手动扩展就直接传给parseInt或正则匹配，会错读数值——比如#f33若按三位直接拆，f被当15，但实际应扩展为ff3333，红=255，绿=51，蓝=51。
#rgb到#rrggbb的扩展规则很简单
每位字符重复一次：第一位→红，第二位→绿，第三位→蓝，各自复制成两位。
-
#f33→#ff3333 -
#abc→#aabbcc -
#05c→#0055cc
注意大小写无关，#F33和#f33结果一致；但0不能省略，#f3（两位）或#f333（四位）都是非法值，CSS 会忽略。
JS里别用正则硬切，优先用字符串操作
常见错误是写str.substr(1,1)取单字符再拼接，但没校验长度或忽略#前缀缺失场景。更稳妥的做法：
- 先用
str.startsWith('#')判断是否带#，没有就补上 - 用
str.length === 4判断是否为三位格式（带#共4字符） - 扩展时用
char.repeat(2)比手拼char + char更清晰
示例函数片段：
function expandHex(str) {
if (!str.startsWith('#')) str = '#' + str;
if (str.length === 4) {
return '#' + str[1].repeat(2) + str[2].repeat(2) + str[3].repeat(2);
}
return str;
}
扩展后才能安全转RGB或HSL
所有下游转换（比如hexToRgb、hexToHsl）都依赖六位数值。如果跳过扩展直接算，#f33会被当成f33（即十进制3763），完全偏离预期色值。
现代 CSS 支持hsl(from ...)语法，但它也要求输入是有效颜色值——传#f33进去没问题，因为浏览器已自动扩展；但 JS 里做逻辑计算时，这一步必须由你显式完成。
容易被忽略的是：压缩工具（如 cssnano）可能把#aabbcc压回#abc，但反过来不会自动补全；所以 JS 处理颜色字符串时，永远假设输入可能是三位，且必须主动扩展。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
