*{margin:0;padding:0;}
.colorblock{
  font-size:11px;
  width:12.5%;
  font-family:Courier New;
  padding:10px 0;
  text-align:center;
  font-weight:bold;
  display:inline-block;
}

function getCorrectTextColor(hex){
		
			/*
			From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast
			
			Color brightness is determined by the following formula: 
			((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
      
      I know this could be more compact, but I think this is easier to read/explain.
			
			*/
			
			threshold = 130; /* about half of 256. Lower threshold equals more dark text on dark background  */
			
			hRed = hexToR(hex);
			hGreen = hexToG(hex);
			hBlue = hexToB(hex);
			
      
			function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
			function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
			function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
			function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

			cBrightness = ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
			  if (cBrightness > threshold){return "#000000";} else { return "#ffffff";}	
		  }
		
		

		
		//test colortable
		var colPairs = new Array("00","22","44","66","99","aa","cc","ff");
		for(i=0;i<colPairs.length;i++){
			for(j=0;j<colPairs.length;j++){
				for(k=0;k<colPairs.length;k++){
					//build a hexcode
					theColor = "#"+colPairs[i]+colPairs[j]+colPairs[k];
					
					//checkf for correct textcolor in passed hexcode
					textcolor = getCorrectTextColor(theColor);
					
					//output div			
					document.write("<div style='background-color:" + theColor + ";color:"+textcolor+";' class='colorblock'>" + theColor + "</div>");
				}
				document.write("<br/>");
			}
		}