因為想試試HTML API的drag跟drop，於是我想到不然來做一個A色+B色=C色好了。
因為一個顏色有RGB三色，所以顏色的相加是由兩色的RGB各自相加再除以2。
舉例:把A的R+B的R再/2，就會是C的R
首先一個顏色有RGB所以用迴圈把RGB分別取出，再把他們轉成以16位元為單位的數字，做相加再除2
var c1 = “#FF0000”;
var c2 = “#012549”;for(var i = 0; i<3; i++) {
var sub1 = c1.substring(1+2*i, 3+2*i); //取A色RGB
var sub2 = c2.substring(1+2*i, 3+2*i); //取B色RGB
var v1 = parseInt(sub1, 16); //把R G B轉成16位元的數字
var v2 = parseInt(sub2, 16); //把R G B轉成16位元的數字
var v = Math.floor((v1 + v2) / 2); //相加再除2
console.log(‘v’, v); //R G B各自相加除2後的值
//R = 80, G = 12, B = 24
}
再來把RGB這三個數字轉回字串，並轉為大寫，須注意要以16位元轉。
var c1 = “#FF0000”;
var c2 = “#012549”;for(var i = 0; i<3; i++) {
var sub1 = c1.substring(1+2*i, 3+2*i);
var sub2 = c2.substring(1+2*i, 3+2*i);
var v1 = parseInt(sub1, 16);
var v2 = parseInt(sub2, 16);
var v = Math.floor((v1 + v2) / 2);
var sub = v.toString(16).toUpperCase(); //轉回字串，並轉為大寫
}
這時候只要把，RGB三個字串加一起然後前面加個#就完成了
例： # + ‘80’ + ‘12’ + ‘24’
但是這裡有一點要注意，就是因為是16位元，有可能轉出來的字串只有一個字
var a = 11;
a.toString(16); // ‘b’這樣在最後組合RGB的時候會造成色碼不足的問題，於是要在每個字串的前面+0然後從後面取字串的2位。
var sub = ‘b’;
(‘0’+sub).slice(-2); // ‘0b’這樣一來就大功告成。
var c1 = “#FF0000”;
var c2 = “#012549”;var c = “#”;
for(var i = 0; i<3; i++) {
var sub1 = c1.substring(1+2*i, 3+2*i);
var sub2 = c2.substring(1+2*i, 3+2*i);
var v1 = parseInt(sub1, 16);
var v2 = parseInt(sub2, 16);
var v = Math.floor((v1 + v2) / 2);
var sub = v.toString(16).toUpperCase();
var padsub = (‘0’+sub).slice(-2);
c += padsub;
}document.getElementById(“c1”).style.backgroundColor = c1;
document.getElementById(“c1”).innerHTML = c1;
document.getElementById(“c2”).style.backgroundColor = c2;
document.getElementById(“c2”).innerHTML = c2;
document.getElementById(“c”).style.backgroundColor = c;
document.getElementById(“c”).innerHTML = c;
