Question

How to find the average between RGB colors c1 and c2 in JavaScript

Answer 1

function rgbToHex(r, g, b) {
    return `#${r.toString(16).padStart(2, '0').toUpperCase()}${g.toString(16).padStart(2, '0').toUpperCase()}${b.toString(16).padStart(2, '0').toUpperCase()}`;
}

// Color 1: RGB(255, 100, 50)
const r1 = 255, g1 = 100, b1 = 50;

// Color 2: RGB(50, 170, 200)
const r2 = 50, g2 = 170, b2 = 200;

// Calculate average RGB values
const avgR = Math.floor((r1 + r2) / 2);
const avgG = Math.floor((g1 + g2) / 2);
const avgB = Math.floor((b1 + b2) / 2);

// Get hex representation
const averageColor = rgbToHex(avgR, avgG, avgB);
console.log(`Average Color (hex): ${averageColor}`);

 
     
/*
run:
     
Average Color (hex): #98877D
     
*/

 

70+ SQL courses for beginners and professionals

Answer 2

const c1 = "#FF6432"; // RGB(255, 100, 50)
const c2 = "#32AAC8"; // RGB(50, 170, 200)

let hexColor = "#";
for (let i = 0; i < 3; i++) {
  const sub1 = c1.substring(1 + 2 * i, 3 + 2 * i);
  const sub2 = c2.substring(1 + 2 * i, 3 + 2 * i);
  const i1 = parseInt(sub1, 16);
  const i2 = parseInt(sub2, 16);
  const avg = Math.floor((i1 + i2) / 2);
  const hex = avg.toString(16).toUpperCase();
  const padhex = ('0' + hex).slice(-2);
  
  hexColor += padhex;
}

console.log(`Average Color (hex): ${hexColor}`);

     
/*
run:
     
Average Color (hex): #98877D
     
*/

 

70+ SQL courses for beginners and professionals