本文主要介绍用Javascript实现RGB三原色与Hex十六进制色互转的思路以及编写代码。

在线颜色表、颜色选择器、RGB和Hex互转链接:
https://www.tidnotes.ga/color

RGB三原色与Hex十六进制色基本就是十进制数和十六进制数的不同表达形式,所以在处理两者转换的方法可以简单的认为是进制的转换问题。

进制转换有不少的方法,本文采取js的简单的转换方法。

转换思路

  1. 取得rgb或hex的十进制数或十六进制数。
  2. 将十进制数和十六进制数互换。
  3. 将互换后的结果加上rgb或hex的特有标识。

想取rgb或hex的十进制数或十六进制数,可以利用正则的方法获取;或者直接利用两者的特点,根据分割特点来读取相应的数即可。

代码

rgb色转hex色部分

利用match()方法,读取出rgb的数字部分(/\d+/g 是正则里取所有连着的数字);然后将十进制数换算为十六进制的字符,不足两位则补零;最后输出“#xxxxxx”的hex形式。

function rgb2hex(rgb) {
    var rgb = rgb.match(/\d+/g);
    function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); }
    return rgb = "#" + hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
}

hex色转rgb色部分

同样利用match()方法,/[\d\w]{2}/g 是取两个两个的字母或数字的任意组合,排除符号;然后将十六进制换算为十进制;最后输出“rgb(xxx,xxx,xxx)”的rgb形式。

function hex2rgb(hex) {
    var hex = hex.match(/[\d\w]{2}/g);
    function rgb(x) { return parseInt(x, 16); }
    return hex = "rgb(" + rgb(hex[0]) + "," + rgb(hex[1]) + "," + rgb(hex[2]) + ")";
}

最后

本文中,进制数的转换主要用了parseInt()toString()两个方法完成的,同样适合其他进制的转换,这是我觉得最为简单的方法。本文rgb色和hex色的互换是分为两个函数来写,如果想要自动识别然后互转的话,可以自行将上面两个函数组合起来。还有什么疑问可以在下方留言,本人会在能力之下进行解答。

本文由 小TiD笔记 发布在小TiD笔记,转载此文请保持文章完整性,并请附上文章来源(小TiD笔记)及本页链接。

原文链接: https://www.tidnotes.ga/2019/11/js-rgb-hex-exchange.html