*{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/>");
      }
    }