将数组十六进制颜色转换为数组 rgb 颜色 [重复]

Posted 2023-02-23

【中文标题】将数组十六进制颜色转换为数组 rgb 颜色 [重复]

【英文标题】：turn array hex colors into array rgb colors [duplicate]

【发布时间】：2014-11-07 23:45:15

【问题描述】：

我有一个像这样的十六进制颜色数组：

var hexColors = [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#f3f3f3",
    "#f3f3f3",
    "#f3f3f3"];

我想把它变成这样：

var rgbColors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);

使用此功能：

 function hexToRgb(hex) 
 var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 hex = hex.replace(shorthandRegex, function(m, r, g, b) 
    return r + r + g + g + b + b;
 );
 var result = /^#?([a-f\d]2)([a-f\d]2)([a-f\d]2)$/i.exec(hex);
 return result ? 
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  : null;

我该怎么办？谢谢！

【参考方案1】：

您过于复杂了：没有必要使用正则表达式两次遍历目标字符串。在第一次迭代中提取所有信息就足够了。像这样：

function hexToRgb(hex) 
  var res = hex.match(/[a-f0-9]2/gi);
  return res && res.length === 3
    ? res.map(function(v)  return parseInt(v, 16) )
    : null;

该函数已准备好在另一个.map 中使用，给出您想要的结果。

var hexColors = [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#f3f3f3",
    "#f3f3f3",
    "#f3f3f3"
];
var rgbColors = hexColors.map(hexToRgb);

Demo

【讨论】：

天哪！我还有很多东西要学习和学习！它完美地工作！非常感谢！

你会如何改变这个函数来做相反的事情？将 rgb 数组即 [255, 255, 255] 更改为 #FFFFFF

【参考方案2】：

var hex = 'ffaadd';   
var rgb = parseInt(hex, 16);    

var red   = (rgb >> 16) & 0xFF;   
var green = (rgb >> 8) & 0xFF;     
var blue  = rgb & 0xFF;   

Bit Operator 在效率和可读性方面让它变得更加聪明。