十六进制颜色转RGB格式

马黑黑 · 发表于 2025-11-18 12:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

标准的十六进制颜色使用 #3e94af 这样的结构表示，# 是前缀，后面是6位数的十六进制数值。数值分成三组，每组两位数，分别代表 r、g、b 即红、绿、蓝三种颜色的成分，故十六进制颜色的表达结构可以抽象为#RRGGBB。依此原理，可以理解十六进制颜色的构造是一种混合方式，即将红绿蓝三种颜色按顺序和不同的比例混合而得。十六进制数值为 0~9a~f，注意十六进制颜色每一种色料使用两位数表示，凑足六位数，再加个#号前缀。

传统的十六进制颜色有用#号加三位数表达的，例如 #3a9，它实际上是 #33aa99 的简写。要将十六进制颜色转为rgb颜色值，我们先得解决颜色值是标准表达法还是简写表达法，同时将#号剔除掉。以下是处理这个问题的工具函数：

// 处理十六进制颜色 : @param str 为待处理字串 const fullHex = (str) => { let newStr = str.replace('#', ''); // 删掉#号(如有) // 若是简写形式补全为六位数 if (newStr.length === 3) { return newStr.split('').map(i => i.repeat(2)).join(''); } return newStr; // 否则返回去除#号后的字串 };

还得准备一个进制转换的工具函数，这里用到的是十六进制转十进制，像这样，没有做参数合法性检测，需要时可以自行加入：

const Hex2Dec = (str) => parseInt(str, 16);

函数名 Hex2Dec 是简写形式的语义化名称，Hex 是 Hexadecimal(十六进制)的缩写，2是 to(到) 的意思，Dec 是 Decimal(十进制)的简化。函数处理传入的参数 str 字串，使用JS内置函数 parseInt 将其转为十六进制数值并返回结果。

接下来就可以将十六进制颜色字串转rgb格式了。rgb颜色表达格式格式为 rgb(R, G, B)，R红色，G绿色，B蓝色，数值为十进制，每一种成分取值空间是 0~255（含头尾边界）。这样，我们就可以有如下实现思路：用函数 fullHex() 处理十六进制颜色字串为符合要求的十六进制数值格式，将该数值字串两两分为一组，得到 rr、gg、bb 三个十六进制数值字串，再用 Hex2Dec() 函数将这些字串一一转为十进制，最后拼接成rgb格式的颜色值。函数如下：

// 十六进制颜色转rgb const HexColor2Rgb = (str) => { const ar = fullHex(str).match(/.{2}/g).map(a => Hex2Dec(a)); return 'rgb(' + ar.join(', ') + ')'; // 调用函数示例： console.log(HexColor2Rgb('#7B68EE')); // rgb(123, 104, 238) };

要点：一，弄清两种结构的十六进制表达法，将简写形式转为全写形式；二，拆分十六进制数值为两两一组，每一组都转换为十进制后再拼接为rgb格式。