Color difference

by MegaScience

CSS

div.colorBlock {
  display: inline-block;
  width: 50px;
  height: 50px;
}

JavaScript

/*var toColor = function ( d ) {
       var c = Number(d).toString(16);
       return "#" + ( "000000".substr( 0, 6 - c.length ) + c.toUpperCase() );
    },
    white = 0xFFFFFF,
    red = 0xFF0000,
    green = 0x00FF00,
    result = toColor( white - red - green );
const toColor = d => {
	const c = Number(d).toString(16)
	return `#${"000000".substr( 0, 6 - c.length ) + c.toUpperCase()}`
}
0xFF190404 - 0xFF030000 = */

const toColor = d => `#${Number(d).toString(16).toUpperCase().padStart(6, '0')}`
//const toHex = s => s.replace('#', )
const addColorBlock = d => {
	const div = document.createElement('div')
	div.classList.add('colorBlock')
	div.style.backgroundColor = d
	document.body.appendChild(div)
}
const arr = []
//arr.push('#FF190404')
//arr.push('#FF030000')
//arr.push(toColor(0xFF190404 - 0xFF030000))
arr.push('#190404')
arr.push('#030000')
arr.push(toColor(0x190404 - 0x030000))
arr.push('#284b2c'.toUpperCase())
arr.push(toColor(0x284b2c + (0x190404 - 0x030000)))
console.log(arr)
for(const c of arr) addColorBlock(c)