« »

This JavaScript let visitors know color code when move mouse on color lines.

Label: DHTML Color Conductor

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

rgb_lines.jpg

Copy All x2

<STYLE type=text/css>TABLE {
	FONT-FAMILY: Verdana, sans-serif; FONT-SIZE: 8pt
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>

var CHAR = new Array ("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var COFP = new Array (15, 31, 47, 63, 79, 95, 111, 127, 143, 159, 175, 191, 207, 223, 239, 255);
var COSP = new Array (240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255);

function HEX(val) {
	for (i = 0; i < COFP.length; i++) {
		for (j = 0; j < COSP.length; j++) {
			cnt = ((COFP[i]+COSP[j]) - 255);
			if (val == cnt) {
				hexcode = CHAR[i] + CHAR[j];
			} 
		}
	}
}

function basicCheck() {
	var X = event.offsetX;
	var Y = event.offsetY;

	if (Y < 16) {
		HEX(X);
		document.all.h1.innerHTML = hexcode;
		document.all.h4.innerHTML = hexcode.charAt(0);
		document.all.r.innerHTML = X;
		document.all.rp.innerHTML = Math.round((X/255)*100);		
		otherCheck();
	} else if ((Y > 17) && (Y < 35)) {
		HEX(X);
		document.all.h2.innerHTML = hexcode;
		document.all.h5.innerHTML = hexcode.charAt(0);
		document.all.g.innerHTML = X;
		document.all.gp.innerHTML = Math.round((X/255)*100);		
		otherCheck();
	} else {
		HEX(X);
		document.all.h3.innerHTML = hexcode;
		document.all.h6.innerHTML = hexcode.charAt(0);
		document.all.b.innerHTML = X;
		document.all.bp.innerHTML = Math.round((X/255)*100);		
		otherCheck();
	}
}

function otherCheck() {

	var hexstring = document.all.h1.innerHTML + document.all.h2.innerHTML + document.all.h3.innerHTML;
	document.all.thumbnail.style.backgroundColor = "#" + hexstring;

	var cNC = checkNamedColor(hexstring);

	if (cNC) {
		document.all.nc.innerHTML = "yes&nbsp;&raquo;&nbsp;<b>" + cname + "</b>";
	} else {
		document.all.nc.innerHTML = "no";
	}

	var cWS = checkWebSafe(hexstring);
	
	if (cWS) {
		document.all.ws.innerHTML = "yes";
	} else {
		document.all.ws.innerHTML = "no";
	}

	var cRS = checkReallySafe(hexstring);

	if (cRS) {
		document.all.rs.innerHTML = "yes";
	} else {
		document.all.rs.innerHTML = "no";
	}

}

function checkWebSafe(val) {

	var CHAR = new Array();
	CHAR[0] = "00";
	CHAR[1] = "33";
	CHAR[2] = "66";
	CHAR[3] = "99";
	CHAR[4] = "CC";
	CHAR[5] = "FF";

	for (i = 0; i < CHAR.length; i++) {
		for (j = 0; j < CHAR.length; j++) {
			for (k = 0; k < CHAR.length; k++) {
				code = CHAR[i] + CHAR[j] + CHAR[k];
				if (val == code) {
					return true;
				} 
			}
		}
	}

}	

function checkReallySafe(val) {

	var RSCP = new Array ("000000", "000033", "0000FF", "00FF00", "00FF66", "00FFCC", "00FFFF", "33FF33",
			      "33FF66", "33FFCC", "33FFFF", "66FF00", "66FF33", "66FFFF", "CCFF66", "FF0000",
		    	      "FF0033", "FF00FF", "FFFF00", "FFFF33", "FFFF66", "FFFFFF");

	for (i = 0; i < RSCP.length; i++) {
		code = RSCP[i];
		if (val == code) {
			return true;
		} 
	}
}	

function checkNamedColor(val) {

	var HC = new Array ("F0F8FF", "FAEBD7", "00FFFF", "7FFFD4", "F0FFFF", "F5F5DC", "FFE4C4", "000000", 
			    "FFEBCD", "0000FF", "8A2BE2", "A52A2A", "DEB887", "5F9EA0", "7FFF00", "D2691E", 
			    "FF7F50", "6495ED", "FFF8DC", "DC143C", "00008B", "008B8B", "B8860B", "A9A9A9", 
			    "006400", "BDB76B", "8B008B", "556B2F", "FF8C00", "9932CC", "8B0000", "E9967A", 
			    "8FBC8F", "483D8B", "2F4F4F", "00CED1", "9400D3", "FF1493", "00BFFF", "696969", 
			    "1E90FF", "B22222", "FFFAF0", "228B22", "FF00FF", "DCDCDC", "F8F8FF", "FFD700", 
			    "DAA520", "808080", "008000", "ADFF2F", "F0FFF0", "FF69B4", "CD5C5C", "4B0082", 
			    "FFFFF0", "F0E68C", "E6E6FA", "FFF0F5", "7CFC00", "FFFACD", "ADD8E6", "F08080", 
			    "E0FFFF", "FAFAD2", "90EE90", "D3D3D3", "FFB6C1", "FFA07A", "20B2AA", "87CEFA", 
			    "778899", "B0C4DE", "FFFFE0", "00FF00", "32CD32", "FAF0E6", "800000", "66CDAA", 
			    "0000CD", "BA55D3", "9370DB", "3CB371", "7B68EE", "00FA9A", "48D1CC", "C71585", 
			    "191970", "F5FFFA", "FFE4E1", "FFE4B5", "FFDEAD", "000080", "FDF5E6", "808000", 
			    "6B8E23", "FFA500", "FF4500", "DA70D6", "EEE8AA", "98FB98", "AFEEEE", "DB7093", 
			    "FFEFD5", "FFDAB9", "CD853F", "FFC0CB", "DDA0DD", "B0E0E6", "800080", "FF0000", 
			    "BC8F8F", "4169E1", "8B4513", "FA8072", "F4A460", "2E8B57", "FFF5EE", "A0522D", 
			    "C0C0C0", "87CEEB", "6A5ACD", "708090", "FFFAFA", "00FF7F", "4682B4", "D2B48C", 
			    "008080", "D8BFD8", "FF6347", "40E0D0", "EE82EE", "F5DEB3", "FFFFFF", "F5F5F5", 
			    "FFFF00", "9ACD32");
	var CN = new Array ("aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", 
  			    "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", 
			    "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", 
			    "cornsilk", "crimson", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", 
			    "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", 
			    "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", 
			    "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", 
			    "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", 
			    "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", 
			    "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", 
			    "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgreen", "lightgrey", 
			    "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", 
			    "lightyellow", "lime", "limegreen", "linen", "maroon", "mediumaquamarine", "mediumblue", 
			    "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", 
			    "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", 
			    "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", 
			    "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", 
			    "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", 
			    "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", 
			    "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", 
			    "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen");

	for (x = 0; x < HC.length; x++) {
		hc = HC[x];
		if (val == hc) {
			cname = CN[x];
			return true;
		} 
	}
}	

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<TABLE align=center border=1 cellPadding=5 cellSpacing=0 width=600>
  <TBODY>
  <TR>
    <TD width=120>&nbsp;HEX 6</TD>
    <TD width=330>&nbsp;#<SPAN id=h1>FF</SPAN><SPAN id=h2>FF</SPAN><SPAN 
      id=h3>FF</SPAN></TD>

    <TD align=middle width=200>Thumbnail</TD></TR>
  <TR>
    <TD width=120>&nbsp;HEX 3</TD>
    <TD width=330>&nbsp;#<SPAN id=h4>F</SPAN><SPAN id=h5>F</SPAN><SPAN 
      id=h6>F</SPAN></TD>
    <TD id=thumbnail rowSpan=6 width=200>&nbsp;</TD></TR>
  <TR>

    <TD width=120>&nbsp;RGB</TD>
    <TD width=330>&nbsp;rgb(<SPAN id=r>255</SPAN>,&nbsp;<SPAN 
      id=g>255</SPAN>,&nbsp;<SPAN id=b>255</SPAN>)</TD></TR>
  <TR>
    <TD width=120>&nbsp;RGB [%]</TD>

    <TD width=330>&nbsp;rgb(<SPAN id=rp>100</SPAN>&nbsp;%,&nbsp;<SPAN 
      id=gp>100</SPAN>&nbsp;%,&nbsp;<SPAN id=bp>100</SPAN>&nbsp;%)</TD></TR>
  <TR>
    <TD width=120>&nbsp;Named Color</TD>
    <TD width=330>&nbsp;<SPAN id=nc>yes&nbsp;Ã�Â»&nbsp;<B>white</B></SPAN></TD></TR>

  <TR>
    <TD width=120>&nbsp;WebSafe Color</TD>
    <TD width=330>&nbsp;<SPAN id=ws>yes</SPAN></TD></TR>
  <TR>
    <TD width=120>&nbsp;ReallySafe Color</TD>
    <TD width=330>&nbsp;<SPAN id=rs>yes</SPAN></TD></TR></TBODY></TABLE>
<HR width=600>

<TABLE align=center width=500>
  <TBODY>
  <TR>
    <TD align=middle><A href="javascript:void(0);" 
      onmousemove=basicCheck();>
    <IMG border=0 src="rgb_lines.jpg" 
      style="CURSOR: hand" width="256" height="53"></A></TD></TR>
  <TR>
    <TD align=middle>[to create your own color just roll over the lines above]</TD></TR></TBODY></TABLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->