javascript中两种十六进制颜色的平均值

好吧，我想我会把这个扔出去，让大家好好想想

给定一个函数（用javascript编写），该函数要求两个字符串的格式类似于十六进制颜色（ex#FF0000）

返回一个十六进制颜色，它是传递的两种颜色的平均值

function averageColors(firstColor,secondColor)
{
  ...
  return avgColor;
}

--编辑--

平均值将被定义为

---

如果传递的颜色是黄色，而第二个是浅紫色，则返回的颜色将是中橙色

我讨厌听起来像是破了的jQuery记录，但是有一个

---

闻起来像是家庭作业，但这是我的线索

取R、G和B的每一个十六进制值，并取它们的平均值。如有必要，转换为十进制进行计算

函数d2h（d）{返回d.toString（16）.padStart（2，'0'）；}

函数h2d（h）{返回parseInt（h，16）；}

---

然后返回一个包含三个元素的串联值的字符串。

如果不想处理大量不必要的内容，只需要几行POJ即可：

// Expects input as 'nnnnnn' where each nn is a 
// 2 character hex number for an RGB color value
// e.g. #3f33c6
// Returns the average as a hex number without leading #
var averageRGB = (function () {

  // Keep helper stuff in closures
  var reSegment = /[\da-z]{2}/gi;

  // If speed matters, put these in for loop below
  function dec2hex(v) {return v.toString(16);}
  function hex2dec(v) {return parseInt(v,16);}

  return function (c1, c2) {

    // Split into parts
    var b1 = c1.match(reSegment);
    var b2 = c2.match(reSegment);
    var t, c = [];

    // Average each set of hex numbers going via dec
    // always rounds down
    for (var i=b1.length; i;) {
      t = dec2hex( (hex2dec(b1[--i]) + hex2dec(b2[i])) >> 1 );

      // Add leading zero if only one character
      c[i] = t.length == 2? '' + t : '0' + t; 
    }
    return  c.join('');
  }
}());

---

这是我的功能，希望对你有所帮助

function averageColors( colorArray ){
    var red = 0, green = 0, blue = 0;

    for ( var i = 0; i < colorArray.length; i++ ){
        red += hexToR( "" + colorArray[ i ] + "" );
        green += hexToG( "" + colorArray[ i ] + "" );
        blue += hexToB( "" + colorArray[ i ] + "" );
    }

    //Average RGB
    red = (red/colorArray.length);
    green = (green/colorArray.length);
    blue = (blue/colorArray.length);

    console.log(red + ", " + green + ", " + blue);
    return new THREE.Color( "rgb("+ red +","+ green +","+ blue +")" );
}

//get the red of RGB from a hex value
function hexToR(h) {return parseInt((cutHex( h )).substring( 0, 2 ), 16 )}

//get the green of RGB from a hex value
function hexToG(h) {return parseInt((cutHex( h )).substring( 2, 4 ), 16 )}

//get the blue of RGB from a hex value
function hexToB(h) {return parseInt((cutHex( h )).substring( 4, 6 ), 16 )}

//cut the hex into pieces
function cutHex(h) {if(h.charAt(1) == "x"){return h.substring( 2, 8 );} else {return h.substring(1,7);}}

函数平均颜色（colorArray）{
变量红色=0，绿色=0，蓝色=0；
对于（var i=0；i

按指定百分比混合两种十六进制颜色的快速/肮脏/方便/ES6方法：

//将两种十六进制颜色按一定量混合在一起
函数blendColors（colorA、colorB、amount）{
const[rA，gA，bA]=colorA.match（/\w\w/g）.map（（c）=>parseInt（c，16））；
const[rB，gB，bB]=colorB.match（/\w\w/g）.map（（c）=>parseInt（c，16））；
常量r=数学舍入（rA+（rB-rA）*数量）.toString（16）.padStart（2，'0'）；
常量g=数学舍入（gA+（gB-gA）*数量）.toString（16）.padStart（2，'0'）；
常量b=数学四舍五入（bA+（bB-bA）*数量）.toString（16）.padStart（2，'0'）；
返回“#”+r+g+b；
}
日志（blendColors（'00FF66'，'443456'，0.5））这是函数

function avgColor(color1, color2) {
  //separate each color alone (red, green, blue) from the first parameter (color1) 
  //then convert to decimal
  let color1Decimal = {
    red: parseInt(color1.slice(0, 2), 16),
    green: parseInt(color1.slice(2, 4), 16),
    blue: parseInt(color1.slice(4, 6), 16)
  }
  //separate each color alone (red, green, blue) from the second parameter (color2) 
  //then convert to decimal
  let color2Decimal = {
    red: parseInt(color2.slice(0, 2), 16),
    green: parseInt(color2.slice(2, 4), 16),
    blue: parseInt(color2.slice(4, 6), 16),
  }
  // calculate the average of each color (red, green, blue) from each parameter (color1,color2) 
  let color3Decimal = {
    red: Math.ceil((color1Decimal.red + color2Decimal.red) / 2),
    green: Math.ceil((color1Decimal.green + color2Decimal.green) / 2),
    blue: Math.ceil((color1Decimal.blue + color2Decimal.blue) / 2)
  }
  //convert the result to hexadecimal and don't forget if the result is one character
  //then convert it to uppercase
  let color3Hex = {
    red: color3Decimal.red.toString(16).padStart(2, '0').toUpperCase(),
    green: color3Decimal.green.toString(16).padStart(2, '0').toUpperCase(),
    blue: color3Decimal.blue.toString(16).padStart(2, '0').toUpperCase()
  }
  //put the colors (red, green, blue) together to have the output
  let color3 = color3Hex.red + color3Hex.green + color3Hex.blue
  return color3
}
console.log(avgColor("FF33CC", "3300FF"))
// avgColor("FF33CC", "3300FF") => "991AE6"

console.log(avgColor("991AE6", "FF0000"))
// avgColor("991AE6", "FF0000") => "CC0D73"

console.log(avgColor("CC0D73", "0000FF"))
// avgColor("CC0D73", "0000FF") => "6607B9"

要进行检查，可以使用此链接和中点1，然后混合
这次聚会很晚了，但我个人正在寻找一种方法来平均未定义的十六进制值。根据答案，我想出了这个。当然，你添加的颜色越多，他们得到的棕色/灰色就越多，但是，也许这会有帮助


/**
*对十六进制颜色数组求平均值。返回一个十六进制值（带前导#）
*
*@param{Array}colors-十六进制字符串的数组，例如[“#001122”、“#001133”、…]
*/
函数平均十六进制（颜色）{
//将所有十六进制代码转换为整数数组，例如[R，g，B]，[R，g，B]，…]
让数字=颜色。映射（函数（十六进制）{
//拆分为单独的R、G和B
让split=hex.match（/[\da-z]{2}/gi）；
//转换为整数值
返回split.map（函数（toInt）{
返回parseInt（toInt，16）；
});
});
//通过平均所有值来减少数组，从而得到平均值[R，G，B]
让平均数=数字。减少（函数（总数、数量、索引、数组）{
返回total.map（函数（小计、子索引）{
//如果达到最后一种颜色，则求其平均值并返回十六进制值
if（index==array.length-1）{
让result=Math.round（（小计+金额[子索引]）/array.length）；
//如果只有一个字符，则添加前导0
返回result.length==2？“”+结果：“0”+结果；
}否则{
返回小计+金额[子索引]；
}
});
});
//将它们作为单个十六进制字符串返回
返回“#”+平均值。联接（“”）；
}
日志（平均十六进制（[“#FF110C”、“#0000AA”、“#55063d”、“#06551e”）；
//预期：#571b44，另见https://www.colorhexa.com/ 然后输入“#FF110C+#0000AA+#55063d+#06551e”
以下是一组紧凑的相关（相互依赖的）函数：

十六进制⟷ RGB颜色转换：
生成随机十六进制颜色：
color1→ 

平均值→ 

颜色2→ 

键入十六进制颜色或自动随机数
您如何定义“平均值”？这可能有多种含义，这取决于你在什么颜色空间工作等等。@Amber，我更新了这个问题，以澄清关于这个问题的明显的家庭作业味道…不，对不起@Marc B没有家庭作业，只是一个个人项目。我希望我的CS程序能教会我JS:/Good call@Deleplace。我更新了函数adding.padStart（）。谢谢你，我对你敬而远之，RobGHmm，现在我看到@Endorox正是这么做的……警告，这段代码没有对输入有效性进行任何检查。它假定它将始终接收格式良好的6位十六进制颜色。只有在你能确定它会一直收到的情况下才可以使用它。它只是如此…“冗长”
function hexToRgb(h){return['0x'+h[1]+h[2]|0,'0x'+h[3]+h[4]|0,'0x'+h[5]+h[6]|0]}
function rgbToHex(r,g,b){return"#"+((1<<24)+(r<<16)+(g<<8)+ b).toString(16).slice(1);}

function avgHex(h1,h2){a=hexToRgb(h1);b=hexToRgb(h2); return rgbToHex(~~((a[0]+b[0])/2),~~((a[1]+b[1])/2),~~((a[2]+b[2])/2));}

function rndHex(){return'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);}