十六进制与 RGB 颜色互转工具

解析三位和六位十六进制颜色为 RGB 通道，并把校验通过的 RGB 对象转换回小写十六进制字符串。

功能说明

设计稿常给出十六进制颜色，而 Canvas 与部分 API 需要分离的 RGB 通道。该工具支持三位缩写和六位十六进制，输出 0 到 255 的整数通道；反向转换会补零并生成带井号前缀的小写字符串，便于直接写入样式或配置。

关键代码

hexToRgb 去掉可选井号，把三位缩写扩展为六位，用正则校验后 parseInt 并按位拆出红绿蓝。rgbToHex 检查每个通道是否为 0 到 255 的整数，再用 toString(16) 转成两位十六进制并拼接。

const value = Number.parseInt(expanded, 16);
return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };

使用注意

不支持带透明度的八位十六进制，也不解析 rgb() 函数字符串。输入两端空白会被去除，但中间空格无效。rgbToHex 拒绝小数与越界值，缺少通道时会因为 undefined 校验失败。返回值只表示颜色，不包含 CSS 颜色名映射。

验证方式

断言 hexToRgb(“#ff8800”) 返回 { r: 255, g: 136, b: 0 }，hexToRgb(“#f80”) 结果相同。rgbToHex({ r: 255, g: 136, b: 0 }) 返回 #ff8800。非法长度抛 RangeError，通道为 256 或小数抛 RangeError，传入数字抛 TypeError。