颜色的十进制与十六进制互转（正则）

[TieMuZhen]

前言

颜色的十进制写法：RGB(255,0,0)
颜色的十六进制写法："#0000FF"

核心

JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

• 16进制转十进制 相对容易些，核心代码如下示例：

parseInt(string, radix)解析一个字符串并返回指定基数的十进制整数，radix：从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。

parseInt("0xFF", 16)，其结果就是255，0x就表明当前是16进制

• 十进制转16进制，核心代码如下：var num=255; num.toString(16);，其结果是FF。16表示数值转换为16进制字符串。

十六进制转十进制

function toRGB(color) {
    var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    match = color.match(regex)
    console.log(match);
    return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color
}

测试结果如下：

match   //  ['#0000FF', '00', '00', 'FF', index: 0, input: '#0000FF', groups: undefined]

console.log(toRGB("#0000FF"))   // 'rgb(0,0,255)'

十进制转十六进制

匹配0-255正则表达式如下

\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b

所以完整代码如下

function addZero(num){
    if(num.length == 1){
        return num.padStart(2, 0)
    }
    return num
}
function trans16(color){
    let reg = /^rgb\((\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b),(\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b),(\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b)\)$/;
    let match = color.match(reg);
    console.log(match);
    let [r, g, b] = [Number(match[3]), Number(match[4]), Number(match[5])] 
    return `#${addZero(r.toString(16))}${addZero(g.toString(16))}${addZero(b.toString(16))}`;
}

测试打印如下

match  // ['rgb(0,0,255)', '0', '0', '0', '0', '255', '255', index: 0, input: 'rgb(0,0,255)', groups: undefined]

console.log(trans16("rgb(0,0,255)"));  // #0000ff