Finding average of colors? - hexadecimal strings

Question

INSTRUCTIONS

Write a function that takes 2 colors as arguments and returns the average color.

• The parameters will be two 6-digit hexadecimal strings. This does not need to be validated.
• The return value should be a 6-digit hexadecimal string.
• The hexadecimal strings represent colors in RGB, much like in CSS.
• The average color is to be determined by taking the arithmetic mean for each component: red, green and blue.

CODE

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

QUESTION

Hexadecimal is something like this 0000ff right?

I'm not sure what it means when I need to take the arithmetic mean for each component and lists 3 colors. How do you take an average of strings?

Answer 1

Here's a plain JS function:

You have to split the hex string into it's three color components before converting them to calculate the mean:

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 2

You can do it with this snippet:

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 3

In order to calculate the average of a hexadecimal string value, you need to:

• Convert the hexadecimal string to integer (something similar to parseInt('0000ff', 16))
• Split the color components
• Calculate the average value for each color component
• Reconstruct the final value from the color components
• Convert the result back to hexadecimal string (with padding), you can refer to this question How to convert decimal to hexadecimal in JavaScript .

An example of full code snippet will be something similar to

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 4

Hexadecimal is something like this 0000ff right?

Yes.

To elaborate, each two characters of the "hexadecimal string" represents a color in hexadecimal (16 numbers per digit), rather than decimal (10 numbers per digit). So the first two characters represent the Red value of the color, the second two characters represent the Green value of the color, and the last two characters represent the Blue value of the color. Combining these values results in the final color.

To further elaborate, the "ff" hexadecimal value equals 256 as a decimal value. Hexadecimal digits go from 0-9, then continue to a, b, c, d, e, and f, before wrapping around to 0 again, so a hexadecimal "0f" number, would equal 16 in decimal. A hexadecimal "10" number would equal 17 as a decimal value. Counting from 0 to 17 in hexadecimal would look like this:

"00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0f", "10".

Answer 5

There is a jQuery plugin for this if you can use jQuery -

$.xcolor.average(color, color)