JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

JavaScript

var hexaToNum = {
	a: 10,
  b: 11,
  c: 12,
  d: 13,
  e: 14,
  f: 15,
};

var numToHexa = {
	'10': 'a',
  '11': 'b',
  '12': 'c',
  '13': 'd',
  '14': 'e',
  '15': 'f',
};

// usage
console.log(getAverageColor('FF0000', '1AFF00'));

function getAverageColor(colorOne, colorTwo) {
	var parts = ['red', 'green', 'blue'];
	var partsForOne = getColorParts(colorOne);
  var partsForTwo = getColorParts(colorTwo);
  var averageColor = {};
  
  for(var i = 0; i < parts.length; i++) {
  	var part = parts[i];
  	averageColor[part] = getAverageForPart(partsForOne[part], partsForTwo[part]);
  }
  
  return '' + averageColor.red + averageColor.green + averageColor.blue;
}

function getColorParts(hexadecimal) {
	return {
  	red: hexadecimal[0] + hexadecimal[1],
    green: hexadecimal[2] + hexadecimal[3],
    blue: hexadecimal[4] + hexadecimal[5],
  };
}

function getAverageForPart(partOne, partTwo) {
	var partOneRgb = convertToRgb(partOne);
  var partTwoRgb = convertToRgb(partTwo);
  var rgbAverage = parseInt((partOneRgb + partTwoRgb) / 2, 10);
  return convertToHexa(rgbAverage);
}

function convertToHexa(rgbValue) {
	var firstPartValue = parseRgbDigit(parseInt(rgbValue / 16, 10));
  var secondPartValue = parseRgbDigit(rgbValue % 16);
  return '' + firstPartValue + secondPartValue;
}

function convertToRgb(hexaPart) {
	var firstDigitValue = parseHexaDigit(hexaPart[0]);
  var secondDigitValue = parseHexaDigit(hexaPart[1]);
  return firstDigitValue * 16 + secondDigitValue;
}

function parseHexaDigit(hexaDigit) {
	var result = parseInt(hexaDigit, 10);
  if (isNaN(result)) result = hexaToNum[hexaDigit.toLowerCase()];
  return result;
}

function parseRgbDigit(rgbDigit) {
  if (rgbDigit < 10) return rgbDigit;
  return numToHexa[rgbDigit];
}