将数组十六进制颜色转换为数组rgb颜色

turn array hex colors into array rgb colors

本文关键字：数组 颜色 rgb 转换 十六进制      更新时间：2023-09-26

我有一个十六进制颜色数组，如下所示：

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;
}

我该怎么办？谢谢

您过度复杂化了这一点：不需要使用regex在目标字符串上运行两次。在第一次迭代时提取所有信息就足够了。像这样：

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);

演示

var hex = 'ffaadd';   
var rgb = parseInt(hex, 16);    
var red   = (rgb >> 16) & 0xFF;   
var green = (rgb >> 8) & 0xFF;     
var blue  = rgb & 0xFF;

位运算符使它在效率和可读性方面都更聪明。

相关文章：