Identifiable Colors

by Noah_M

HTML

<div id="title">The following 16 colors are easiest for most people to tell apart</div>
<div id="subtitle">Research shows that people also feel calm when looking at them.  They are excellent choices to use in charts and graphs.</div>

<div id="sixteen_most_distinguishable_colors" />

CSS

*{font-family:sans-serif;}
#title{font-size:24px;color:#000;padding-bottom:4px;}
#subtitle{font-size:16px;color:#666;padding-bottom:20px;}
#sixteen_most_distinguishable_colors{font-size:16px;color:#fff;}

JavaScript

svar size = 110;

var palette = ["396AB1", "82A3DB", "3E9651", "94CA6B", "948B3D", "DCD280", "DA7C30", "F1A75C", "922428", "B68570", "CC2529", "E36E90", "6B4C9A", "B087C7", "535154", "909595"];

for (var i=0; i<palette.length; i++) {
    $("#sixteen_most_distinguishable_colors").append('<div style="padding:12px;margin:1px;float:left;width:'+size+'px;height:'+size+'px;background:#'+palette[i]+';">#'+palette[i]+'</div>');
}

$("#sixteen_most_distinguishable_colors").append('<br/>');