Question

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

Answer 1

function rgbToHex(r: number, g: number, b: number): string {
    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: number = 255, g1: number = 100, b1: number = 50;

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

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

// Get hex representation
const averageColor: string = 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: string = "#FF6432"; // RGB(255, 100, 50)
const c2: string = "#32AAC8"; // RGB(50, 170, 200)

let hexColor: string = "#";

for (let i: number = 0; i < 3; i++) {
    const sub1: string = c1.substring(1 + 2 * i, 3 + 2 * i);
    const sub2: string = c2.substring(1 + 2 * i, 3 + 2 * i);

    const i1: number = parseInt(sub1, 16);
    const i2: number = parseInt(sub2, 16);
    const avg: number = Math.floor((i1 + i2) / 2);

    const hex: string = avg.toString(16).toUpperCase();
    const padHex: string = hex.padStart(2, '0');

    hexColor += padHex;
}

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

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

 

70+ SQL courses for beginners and professionals