JS颜色代码与RGB的相互转换

目录

• 转化原理
• 拓展案例
• 转换代码
  • RGB To Code
  • Code To RGB
• 进制转化方法
  • n进制转10进制
  • 10进制转16进制

转化原理

• 核心思想：十进制转十六进制。

• 举例：RGB=>分别转为16进制，例如R(255)G(180)B(0)

  • 第一步：255转16进制，FF（15*16+15*1）
  • 第二步：180转16进制，B4（11*16+4*1）
  • 第三步：0转16进制，00
  • 颜色代码为FFB400

• 说明：16进制对应为0123456789ABCDEF

拓展案例

题目描述：

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入
   示例1
   输入 'rgb(255, 255, 255)'
   输出#ffffff

解决方案如下：

//方式1
function rgb2hex1(sRGB) {
    return sRGB.replace(/^rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)$/,function($0,$1,$2,$3){
        return '#'+('0'+(+$1).toString(16)).slice(-2)+('0'+(+$2).toString(16)).slice(-2)+('0'+(+$3).toString(16)).slice(-2);
    });
}

//方式2
function rgb2hex2(sRGB) {
    return sRGB.replace(/^rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)$/,function($0,$1,$2,$3){
        return '#'+toHex($1)+toHex($2)+toHex($3);
    });
}
function toHex(str){
    return ('0'+(+str).toString(16)).slice(-2);
}

//方式3
function rgb2hex3(sRGB){
    var result=['#'];
    if(!/rgb\(\d+(,\s*\d+){2}\)/.test(sRGB)){
        return sRGB;
    }
    sRGB.replace(/\d+/g,function($0){
        result.push(('0'+(+$0).toString(16)).slice(-2));
    });
    return result.join('');
}

let rgb = 'rgb(255, 255, 255)';
console.log(rgb2hex1(rgb));
console.log(rgb2hex2(rgb));
console.log(rgb2hex3(rgb));

输出结果：

#ffffff
#ffffff
#ffffff

[Done] exited with code=0 in 0.155 seconds

转换代码

RGB To Code

//RGB To Code
function RGBToCode($1, $2, $3){
    return '#'+('0'+(+$1).toString(16)).slice(-2)+('0'+(+$2).toString(16)).slice(-2)+('0'+(+$3).toString(16)).slice(-2);
}
console.log("RGB To Code=》" + RGBToCode(255, 255, 255));

> RGB To Code=》#ffffff

Code To RGB

//Code To RGB
function CodeToRGB(code){
    let result = [];
    result.push(parseInt(code.substring(1, 3), 16));
    result.push(parseInt(code.substring(3, 5), 16));
    result.push(parseInt(code.substring(5) , 16));
    return result;
}
console.log("Code To RGB=》" + CodeToRGB('#fb8edc'));

> Code To RGB=》251,142,220

进制转化方法

n进制转10进制

//将n进制的a转化为10进制
parseInt(a, n)

10进制转16进制

//将10进制的a转化为n进制
a.toString(n)