``````*{margin:0;padding:0;}
.colorblock{
font-size:11px;
width:12.5%;
font-family:Courier New;
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/>");
}
}

``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.