Simple JavaScript color tool

M-374 LX · Post by **M-374 LX** » Thu Aug 01, 2013 3:04 am

Here is a simple tool to find hexadecimal color values for the Genesis I have written in JavaScript:

<html>
<head>
<script>
function getColor()
{
	var r = parseInt(document.getElementById('r').value);
	var g = parseInt(document.getElementById('g').value);
	var b = parseInt(document.getElementById('b').value);

	r = r > 7 ? 7 : r;
	g = g > 7 ? 7 : g;
	b = b > 7 ? 7 : b;

	r = isNaN(r) || r < 0 ? 0 : r;
	g = isNaN(g) || g < 0 ? 0 : g;
	b = isNaN(b) || b < 0 ? 0 : b;

	var bg = (((b + 1) * 32) - 1) | ((((g + 1) * 32) - 1) << 8) | ((((r + 1) * 32) - 1) << 16);
	var gencol = (r << 1) | (g << 5) | (b << 9);

	document.getElementById('colview').style.backgroundColor = '#' + bg.toString(16);
	document.getElementById('hex').value = '0x' + gencol.toString(16).toUpperCase();

	document.getElementById('r').value = r;
	document.getElementById('g').value = g;
	document.getElementById('b').value = b;
}
</script>
</head>

<body onload="getColor();">
Each color value ranges from 0 to 7<br />
<br />
R: <input id="r" type="text" onblur="getColor();" /><br />
G: <input id="g" type="text" onblur="getColor();" /><br />
B: <input id="b" type="text" onblur="getColor();" /><br />
<br />
Hex: <input id="hex" type="text" />
<br /><br />
<div id="colview" style="width: 128px; height: 128px; background-color: #000000; border: 1px solid;"></div>
</body>
</html>

To use the tool, simply copy the code above to a text editor (such as the Notepad on Windows), save it with the .html extension and open the saved file with your web browser.