web-safe palette

Web-safe colour palette
A dynamic web palette.

Home
›
Code snippets
›
Javascript
›
Web-safe colour palette

Source code and example of a web colour palette in Javascript. The example is pre-firefox but still works on most browsers. It displays the hex values of the colours as well as the web safe palette. You will need a 1 bit transparent 1x1 pixel called pixel.gif for it to function properly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>web colour</TITLE>
<SCRIPT language="JavaScript">
// v 1.4 - netscape 6 compatability
// v 1.3 - fixed bug in "Blue" value of RGB - thanks to Bernie Basel
// v 1.2 - added netscape compatability for both converter and large colour box.
// v 1.1 - added hex/rgb converter
// v 1. - initial palette translator

buttonColour = "FFFFFF";
borderColour = "FFFFFF";
used =1;
oApp = navigator.appName;
oVer = navigator.appVersion;

ie = (oApp.indexOf("Microsoft")!=-1);
ns4 = (oApp.indexOf("Netscape") != -1 && oVer.indexOf("4") != -1);
ns6 = (oApp.indexOf("Netscape") != -1 && oVer.indexOf("5") != -1);

function init(){
	if (ie)
	{
	 document.all.bigcolour1.style.top = 90;
	}
}

function doChange(num,colour,bigbox)
{

f = eval('document.a'+used+'.src = "pixel.gif"');
	g = eval('document.a'+num+'.src = "pixel2.gif"');
	used = num;
	buttonColour = colour;
	f;
	g;

if (ie) { document.all.bigcolour1.style.backgroundColor = colour;}
	if (ns4){ document.layers["bigcolour1"].bgColor = colour;}
	if (ns6){ document.getElementById("bigcolour1").style.backgroundColor = colour;}
	return;
}

function showName(colourcode)
{
	get1 = parseInt("0x"+colourcode.substr(0,2));
	get2 = parseInt("0x"+colourcode.substr(2,2));
	get3 = parseInt("0x"+colourcode.substr(4,2));

if (ie)
	{
		document.all.namer.innerHTML = "HEX:#"+colourcode;
		document.all.namer2.innerHTML = "<br>RGB:"+get1+","+get2+","+get3;
	}
	if (ns4)
	{
		nl1 = document.layers["namer"];
		nl2 = document.layers["namer2"];

nl1.document.open();
		nl1.document.write("<font class=\"main\">HEX:#"+colourcode+"</font>");
		nl1.document.close();

nl2.document.open();
		nl2.document.write( "<font class=\"main\">RGB:"+get1+","+get2+","+get3+"</font>");
		nl2.document.close();
	}
	if (ns6)
	{
		document.getElementById("namer").innerHTML = "HEX:#"+colourcode;
		document.getElementById("namer2").innerHTML = "<br>RGB:"+get1+","+get2+","+get3;
	}
}
//-->
</SCRIPT>

<STYLE type="text/css">
body {font-family:Verdana;font-size:11px;colour:#000000}
.main {font-family:Verdana;font-size:11px;colour:#000000}
</STYLE>
</head>
<BODY bgcolor="#ffffff" onLoad="init()">

<table width="100%" border="0" cellspacing="0" cellpadding="2">
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>Web palette</td>
  </tr>
  <tr class="main"> 
    <td><a href="javascript:history.go(-1)">&lt;&lt; back</a></td>
  </tr>
</table>
Web Palette of 216 colours.<br>

<table border=0 cellpadding=2 cellspacing=0 width=500>
  <tbody> 
  <tr> 
    <td> 
      <table border=1 bordercolor=#000000 cellpadding=2 
                  cellspacing=0 width=30>
        <tbody> 
        <tr> 
<SCRIPT language="JavaScript">
c = new Array();

c[1] = "FF";
c[2] = "CC";
c[3] = "99";
c[4] = "66";
c[5] = "33";
c[6] = "00";
d = 0;

for (i=1;i <=6;i++){
	if (i >1){
	document.write( "</tr>\n<tr>\n");
	}
	for (m=1;m <=6;m++){		
		for (n=1;n <=6;n++){	
			d++;
			colour = c[i] + c[m] + c[n];
			 document.write("<td bgcolor=\"#"+colour+"\" width=12 class=\"text\"><a href=\"#\" onClick=\"doChange("+d+",'"+colour+"','1')\" onMouseOver=\"showName('"+colour+"');\"><img src=\"pixel.gif\" width=12 height=12 name=\"a"+d+"\" border=0></td>\n");
		}
	}
}
</SCRIPT>
        </tr>
        </tbody> 
      </table>
    </td>
  </tr>
  </tbody> 
</table>
<br>
<div id="namer" style="position:absolute; width:479px; height:25px; z-index:1; left: 15px; top: 210"></div>
<div id="namer2" style="position:absolute; width:479px; height:5px; z-index:1; left: 15px; top: 220"></div>
<div id=bigcolour1  style="position:absolute;BACKGROUND-COLOR: #ffffff; HEIGHT: 95; WIDTH: 120px; left: 680; top: 90;"><img height=95 src="pixel.gif" width=120></div>
</BODY></HTML>