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

十六进制颜色转RGB格式

<style>
        .artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { padding: 4px 6px; background: lightblue; }
</style>

<div class="artBox">
        <p>标准的十六进制颜色使用 <mark>#3e94af</mark> 这样的结构表示，<mark>#</mark> 是前缀，后面是6位数的十六进制数值。数值分成三组，每组两位数，分别代表 r、g、b 即红、绿、蓝三种颜色的成分，故十六进制颜色的表达结构可以抽象为<mark>#RRGGBB</mark>。依此原理，可以理解十六进制颜色的构造是一种混合方式，即将红绿蓝三种颜色按顺序和不同的比例混合而得。十六进制数值为 0~9a~f，注意十六进制颜色每一种色料使用两位数表示，凑足六位数，再加个#号前缀。</p>
        <p>传统的十六进制颜色有用#号加三位数表达的，例如 #3a9，它实际上是 #33aa99 的简写。要将十六进制颜色转为rgb颜色值，我们先得解决颜色值是标准表达法还是简写表达法，同时将#号剔除掉。以下是处理这个问题的工具函数：</p>
        <div class="codebox">
<txt-green>// 处理十六进制颜色 : @param str 为待处理字串</txt-green>
const fullHex = (str) => {
        let newStr = str.replace('#', ''); <txt-green>// 删掉#号(如有)</txt-green>
        <txt-green>// 若是简写形式补全为六位数</txt-green>
        if (newStr.length === 3) {
                return newStr.split('').map(i => i.repeat(2)).join('');
        }
        return newStr; <txt-green>// 否则返回去除#号后的字串 </txt-green>
};
        </div>
        <p>还得准备一个进制转换的工具函数，这里用到的是十六进制转十进制，像这样，没有做参数合法性检测，需要时可以自行加入：</p>
        <div class="codebox">const Hex2Dec = (str) => parseInt(str, 16);</div>
        <p>函数名 Hex2Dec 是简写形式的语义化名称，Hex 是 Hexadecimal(十六进制)的缩写，2是 to(到) 的意思，Dec 是 Decimal(十进制)的简化。函数处理传入的参数 str 字串，使用JS内置函数 parseInt 将其转为十六进制数值并返回结果。</p>
        <p>接下来就可以将十六进制颜色字串转rgb格式了。rgb颜色表达格式格式为 <mark>rgb(R, G, B)</mark>，R红色，G绿色，B蓝色，数值为十进制，每一种成分取值空间是 0~255（含头尾边界）。这样，我们就可以有如下实现思路：用函数 fullHex() 处理十六进制颜色字串为符合要求的十六进制数值格式，将该数值字串两两分为一组，得到 rr、gg、bb 三个十六进制数值字串，再用 Hex2Dec() 函数将这些字串一一转为十进制，最后拼接成rgb格式的颜色值。函数如下：</p>
        <div class="codebox">
<txt-green>// 十六进制颜色转rgb</txt-green>
const HexColor2Rgb = (str) => {
        const ar = <txt-blue>fullHex</txt-blue>(str).match(/.{2}/g).map(a => <txt-blue>Hex2Dec</txt-blue>(a));
        return 'rgb(' + ar.join(', ') + ')';

        <txt-green>// 调用函数示例：</txt-green>
        console.log(HexColor2Rgb('#7B68EE')); <txt-green>// rgb(123, 104, 238)</txt-green>
};
        </div>
        <p>要点：一，弄清两种结构的十六进制表达法，将简写形式转为全写形式；二，拆分十六进制数值为两两一组，每一组都转换为十进制后再拼接为rgb格式。</p>
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

马黑黑 发表于 2025-11-18 12:07

健壮的函数应该对传参做合法性检测。上述自定义函数出于简化目的基本都不对传参做此类检测。特此说明。

红影 发表于 2025-11-18 13:19

十六进制数值为 0~9a~f，对十六进制很陌生，(0-9对应0-9,A-F/a-f对应10-15)，反正15以上就开始进位了，好在它和rgb的表达顺序一样，都是#RRGGBB的表述，把它的值分组转化成十进制并赋予给rgb格式，就完活了。只是十六进制转十进制感觉好难啊，还好有电脑语言可以转化{:4_187:}

红影 发表于 2025-11-18 13:21

上来还需要把简写的补齐了，然后才能转换，还得弄掉#。
这些都能用代码实现呢。学习了{:4_187:}

马黑黑 发表于 2025-11-18 19:13

红影 发表于 2025-11-18 13:19
十六进制数值为 0~9a~f，对十六进制很陌生，(0-9对应0-9,A-F/a-f对应10-15)，反正15以上就开始进位了，好在 ...

进制转换过去是高中课程里有的。编程语言，如果没有内置的转换函数，也可以编写一个，使用别人编写的省事。而JS，虽然也没有内置转换函数，但可以绕过换算，灵活使用内置其它方法来实现转换工作

马黑黑 发表于 2025-11-18 19:14

红影 发表于 2025-11-18 13:21
上来还需要把简写的补齐了，然后才能转换，还得弄掉#。
这些都能用代码实现呢。学习了

编程语言都是很强大的，只需灵活运用

杨帆 发表于 2025-11-18 20:37

马黑黑 发表于 2025-11-18 19:14
编程语言都是很强大的，只需灵活运用

是，先得有个实现转换的完整示例，才谈得上使用甚至灵活运用{:4_173:}

马黑黑 发表于 2025-11-18 20:42

杨帆 发表于 2025-11-18 20:37
是，先得有个实现转换的完整示例，才谈得上使用甚至灵活运用

{:4_190:}

红影 发表于 2025-11-18 22:49

马黑黑 发表于 2025-11-18 19:13
进制转换过去是高中课程里有的。编程语言，如果没有内置的转换函数，也可以编写一个，使用别人编写的省事 ...

这个内置的转换函数真方便，电脑直接完成了{:4_173:}

红影 发表于 2025-11-18 22:50

马黑黑 发表于 2025-11-18 19:14
编程语言都是很强大的，只需灵活运用

还需记住它们啊，记不住怎么去用啊{:4_173:}

马黑黑 发表于 2025-11-19 12:37

红影 发表于 2025-11-18 22:50
还需记住它们啊，记不住怎么去用啊

使用的人其实无需怎么去记忆

马黑黑 发表于 2025-11-19 12:37

红影 发表于 2025-11-18 22:49
这个内置的转换函数真方便，电脑直接完成了

也不能说直接。一切得有人去指挥。
页: [1]
查看完整版本: 十六进制颜色转RGB格式