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

您所在的位置：网站首页 › js十六进制 › JS颜色代码与RGB的相互转换

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

2024-07-17 16:41| 来源: 网络整理| 查看: 265

目录转化原理拓展案例转换代码RGB To CodeCode 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

rgb 中每个 , 后面的空格数量不固定十六进制表达式使用六位小写字母如果输入不符合 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)

【本文地址】

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

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

今日新闻

推荐新闻