Question

说明

编写一个以2种颜色作为参数并返回平均颜色的函数。

参数将是两个6位十六进制字符串。不需要验证。
返回值应为6位十六进制字符串。
十六进制字符串表示RGB中的颜色，就像CSS中的
平均颜色应通过取每种成分的算术平均值来确定：红色，绿色和蓝色。

代码

 const avgColor = (str1, str2) => {
    return (str1 + str2) / 2
 }

问题

十六进制是这样的0000ff吧？

我不确定需要为每个组件取算术平均值并列出3种颜色时是什么意思。您如何平均取弦？

Answer 1

为了计算十六进制字符串值的平均值，您需要：

将十六进制字符串转换为整数（类似于parseInt('0000ff', 16)）
拆分颜色分量
计算每种颜色成分的平均值
从颜色成分重建最终值
将结果转换回十六进制字符串（带填充），您可以参考问题How to convert decimal to hexadecimal in JavaScript。

完整代码段的示例类似于

const avgColor = (str1, str2) => {
    // Convert the hexadecimal string to integer
    const color1 = parseInt(str1, 16);
    const color2 = parseInt(str2, 16);

    let avgColor = 0;
    for (let i = 0; i < 3; i++) {
        // Split the color components
        comp1 = (color1 >> (8 * i)) & 0xff;
        comp2 = (color2 >> (8 * i)) & 0xff;
        // Calculate the average value for each color component
        let v = parseInt((comp1 + comp2) / 2) << 8 * i;

        // Reconstruct the final value from the color components
        avgColor += parseInt((comp1 + comp2) / 2) << 8 * i;
    }

    return decimalToHex(avgColor, 6);
}

// Reference from https://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hexadecimal-in-javascript
function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;

    while (hex.length < padding) {
        hex = "0" + hex;
    }

    return hex;
}

console.log(avgColor("0000ff", "ff0000"))

Answer 2

十六进制是这样的0000ff吧？

是的

为了详细说明，“十六进制字符串”的每个两个字符代表十六进制的颜色（每位16个数字），而不是十进制的（每位10个数字）。因此，前两个字符代表颜色的红色值，后两个字符代表颜色的绿色值，后两个字符代表颜色的蓝色值。将这些值组合在一起将得到最终的颜色。

为了进一步详细说明，“ ff”十六进制值等于256作为十进制值。十六进制数字从0-9开始，然后继续到a，b，c，d，e和f，然后再次环绕到0，因此十六进制的“ 0f”数字等于十进制的16。十六进制的“ 10”数字等于十进制的17。十六进制从0到17的计数看起来像这样：

“ 00”，“ 01”，“ 02”，“ 03”，“ 04”，“ 05”，“ 06”，“ 07”，“ 08”，“ 09”，“ 0a”，“ 0b” ，“ 0c”，“ 0d”，“ 0f”，“ 10”。

Answer 3

这是一个普通的JS函数：

您必须先将十六进制字符串分成三个颜色分量，然后再将其转换为平均值：

function calcAvg(hex1,hex2) {

  //parsed into decimal from hex
  //for each color pair
let hexC11 = parseInt(hex1.slice(0,2), 16);  
let hexC12 = parseInt(hex1.slice(2,4), 16);
let hexC13 = parseInt(hex1.slice(4,6), 16);
let hexC21 = parseInt(hex2.slice(0,2), 16);
let hexC22 = parseInt(hex2.slice(2,4), 16);
let hexC23 = parseInt(hex2.slice(4,6), 16);

  //calculate mean for each color pair
let colorMean1 = (hexC11 + hexC21) / 2;
let colorMean2 = (hexC12 + hexC22) / 2;
let colorMean3 = (hexC13 + hexC23) / 2;

  //convert back to hex
let colorMean1Hex = colorMean1.toString(16);
let colorMean2Hex = colorMean2.toString(16);
let colorMean3Hex = colorMean3.toString(16);

  //pad hex if needed
if (colorMean1Hex.length == 1)
  colorMean1Hex = "0" + colorMean1Hex;
if (colorMean2Hex.length == 1)
  colorMean2Hex = "0" + colorMean2Hex;
if (colorMean3Hex.length == 1)
  colorMean3Hex = "0" + colorMean3Hex;

  //merge color pairs back into one hex color
let avgColor = colorMean1Hex +
    colorMean2Hex +
    colorMean3Hex;

  return avgColor;
}

let avg = calcAvg("999999","777777");
console.log(avg);

Answer 4

您可以使用以下代码段进行操作：

function avg(a,b){
  const regex=/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ //regular expression to parse string
  a=regex.exec(a).slice(1)  //create array from string 'a' using regex
  b=regex.exec(b).slice(1)  //create array from string 'b' using regex
  let output=''
  for(let i=0;i<3;i++){
    const value=Math.floor(
       (
         parseInt(a[i],16) + //parse decimal from hexadecimal
         parseInt(b[i],16)   //parse decimal from hexadecimal
       )/2                   //perform averaging
     ).toString(16)          //convert back to hexadecimal
     output += (value.length<2?'0':'') + value //add leading zero if needed
  }
  return output
}

Answer 5

如果可以使用jQuery，则有一个jQuery插件-

$.xcolor.average(color, color)

寻找颜色的平均值？ -十六进制字符串

5 个答案: