CSS中的三位十六进制颜色如何转换为六位格式？

三位十六进制颜色#rgb是六位格式#rrggbb的语法糖，需先扩展为六位再解析；扩展规则为每位字符重复一次，如#f33→#ff3333；JS中须显式处理，否则parseInt或正则会误读数值。

三位十六进制颜色必须先扩展再解析

三位写法（如#f33）不是独立颜色模型，而是六位格式的语法糖；浏览器内部一律转为六位处理。不手动扩展就直接传给parseInt或正则匹配，会错读数值——比如#f33若按三位直接拆，f被当15，但实际应扩展为ff3333，红=255，绿=51，蓝=51。

#rgb到#rrggbb的扩展规则很简单

每位字符重复一次：第一位→红，第二位→绿，第三位→蓝，各自复制成两位。

1. #f33 → #ff3333
2. #abc → #aabbcc
3. #05c → #0055cc

注意大小写无关，#F33和#f33结果一致；但0不能省略，#f3（两位）或#f333（四位）都是非法值，CSS 会忽略。

JS里别用正则硬切，优先用字符串操作

常见错误是写str.substr(1,1)取单字符再拼接，但没校验长度或忽略#前缀缺失场景。更稳妥的做法：

1. 先用str.startsWith('#')判断是否带#，没有就补上
2. 用str.length === 4判断是否为三位格式（带#共4字符）
3. 扩展时用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 处理颜色字符串时，永远假设输入可能是三位，且必须主动扩展。