HTML NAMED COLOR CHART


<!DOCTYPE html>
<html lang="en-us">
<head>
<title>HTML COLOR CHART</title>

<style>


body {height:100%:width:100%;margin:0;}


.banner {
width:100%;
height:50px;
margin:0;
}

.banner h2 {

margin:0;
width:100%;
height:50px;
line-height:50px;
text-align:center;
background-color:#555;
box-shadow:inset 0 0 30px #000;
font-family:sans-serif;
font-size:16px;
font-weight:normal;
letter-spacing:2px;
word-spacing:5px;
color:#EEE;
text-shadow:2px 2px 3px #000;
}


div {
display:block;
width:33.3%;
line-height:80px;
color:#000;
margin:0;
float:left;
}

.headrs {height:40px; line-height:40px;background-color:lime;box-shadow:inset 0 0 15px #000;}
.headrs h1 {color:#FFF; font-size:16px;}

div h1 {
text-align:center;
font-family:sans-serif;
font-size:14px;
font-weight:normal;
margin:0;
color:#000;
}


</style>


<script>
var colors = new Array (
'Black:000000',
'Maroon:800000',
'DarkRed:8B0000',
'FireBrick:B22222',
'Tomato:FF6347',
'Red:FF0000',
'OrangeRed:FF4500',
'DarkOrange:FF8C00',
'Orange:FFA500',
'DarkGoldenRod:B8660B',
'GoldenRod:DAA520',
'LightGoldenRodYellow:FAFAD1',
'PaleGoldenRod:EEE8AA',
'Gold:FFD700',
'Yellow:FFFF00',
'LightYellow:FFFFE0',
'Olive:808000',
'DarkOliveGreen:556B2F',
'OliveDrab:6B8E23',
'YellowGreen:9ACD32',
'DarkGreen:006400',
'Green:008000',
'ForestGreen:228B22',
'LimeGreen:32CD32',
'Lime:00FF00',
'LawnGreen:7CFC00',
'Chartreuse:7FFF00',
'GreenYellow:ADFF2F',
'DarkSeaGreen:8FBC8F',
'SeaGreen:2E8B57',
'MediumSeaGreen:3CB371',
'MediumAquaMarine:66CDAA',
'Aquamarine:7FFFD4',
'LightSeaGreen:20B2AA',
'SpringGreen:00FF7F',
'MediumSpringGreen:00FA9A',
'LightGreen:90EE90',
'PaleGreen:98FB98',
'DarkCyan:008B8B',
'Teal:008080',
'Cyan:00FFFF',
'LightCyan:E0FFFF',
'DarkTurquoise:00CED1',
'Turquoise:40E0D0',
'MediumTurquoise:48D1CC',
'PaleTurquoise:AFEEEE',
'Aqua:00FFFF',
'DarkSlateBlue:483D8B',
'MediumSlateBlue:7B68EE',
'SkyBlue:87CEEB',
'SlateBlue:6A5ACD',
'MidnightBlue:191970',
'DarkBlue:00008B',
'Navy:00080',
'DodgerBlue:1E90FF',
'Blue:0000FF',
'RoyalBlue:4169E1',
'MediumBlue:0000CD',
'BlueViolet:8A2BE2',
'CadetBlue:5F9EA0',
'DeepSkyBlue:00BFFF',
'LightSkyBlue:87CEFA',
'CornflowerBlue:6495ED',
'SteelBlue:4682B4',
'LightSteelBlue:B0C4DE',
'LightBlue:ADD8E6',
'PowderBlue:B0E0E6',
'AliceBlue:F0F8FF',
'Indigo:4B0082',
'DarkOrchid:9932CC',
'DarkMagenta:8B008B',
'Purple:800080',
'MediumPurple:9370DB',
'RebeccaPurple:663399',
'DarkViolet:9400D3',
'Lavender:E6E6FA',
'LavenderBlush:FFF0F5',
'Magenta:FF00FF',
'MediumOrchid:BA55D3',
'MediumVioletRed:C71585',
'Fuchsia:FF00FF',
'Violet:EE82EE',
'DeepPink:FF1493',
'HotPink:FF69B4',
'Pink:FFC0CB',
'Plum:DDA0DD',
'Orchid:DA70D6',
'PaleVioletRed:DB7093',
'Thistle:D8BFD8',
'LightPink:FFB6C1',
'MistyRose:FFE4E1',
'Brown:A52A2A',
'Peru:CD853F',
'Sienna:A0522D',
'IndianRed:CD5C5C',
'Coral:FF7F50',
'LightCoral:F08080',
'DarkSalmon:E9967A',
'Salmon:FA8072',
'LightSalmon:FFA07A',
'Moccasin:FFE4B5',
'NavajoWhite:FFDEAD',
'AntiqueWhite:FAEBD7',
'Azure:F0FFFF',
'Beige:F5F5DC',
'Bisque:FFE4C4',
'BlanchedAlmond:FFEBCD',
'BurlyWood:DEB887',
'Chocolate:D2691E',
'Cornsilk:FFF8DC',
'DarkGray:A9A9A9',
'DarkGrey:A9A9A9',
'DarkKhaki:BDB76B',
'DarkSlateGray:2F4F4F',
'DarkSlateGrey:2F4F4F',
'DimGray:696969',
'DimGrey:696969',
'FloralWhite:FFFAF0',
'Gainsboro:DCDCDC',
'GhostWhite:F8F8FF',
'Gray:808080',
'Grey:808080',
'HoneyDew:F0FFF0',
'Ivory:FFFFF0',
'Khaki:F0E68C',
'LemonChiffon:FFFACD',
'LightGray:D3D3D3',
'LightGrey:D3D3D3',
'LightSlateGray:778899',
'LightSlateGrey:778899',
'Linen:FAF0E6',
'MintCreme:F5FFFA',
'OldLace:FDF5E6',
'PapayaWhip:FFEFD5',
'PeachPuff:FFDAB9',
'RosyBrown:BC8F8F',
'SaddleBrown:8B4513',
'SandyBrown:F4A460',
'SeaShell:FFF5EE',
'Silver:C0C0C0',
'SlateGray:708090',
'Snow:FFFAFA',
'Tan:D2B48C',
'Wheat:F5DEB3',
'White:FFFFFF',
'WhiteSmoke:F5F5F5'

);


function makeHeaders(pos){

var title = '<div class="banner"><h2>HTML NAMED COLOR CHART<\/h2><\/h2>';

if (pos == 'top'){document.write(title);}
var titles = new Array ('Color Pallet','Alphabetical','Reverse Order');

for(i = 0; i < titles.length;i++){
document.write('<div class="headrs"><h1>'+titles[i]+'<\/h1><\/div>');

}
if (pos == 'bottom'){document.write(title);}
}


function drawColorChart(){

makeHeaders('top');

var sorted = colors.slice(0,146);
var sorted = sorted.sort();

var reversed = colors.slice(0,146);
var reversed = reversed.reverse();

for(i = 0; i < colors.length; i++){

var splitted = colors[i].split(':');

if(splitted[0] == "Black") {var textColor = 'white';}
      else {var textColor = "black";}
document.write('<div style="background:\#'+splitted[1]+'"><h1 style="color:'+textColor+'">'+splitted[0]+' \&nbsp\; \#'+splitted[1]+'<\/h1><\/div>');

var splitted = sorted[i].split(':');

if(splitted[0] == "Black") {var textColor = 'white';}
        else {var textColor = "black";}
document.write('<div style="background:\#'+splitted[1]+'"><h1 style="color:'+textColor+'">'+splitted[0]+' \&nbsp\; \#'+splitted[1]+'<\/h1><\/div>');

var splitted = reversed[i].split(':');

if(splitted[0] == "Black") {var textColor = 'white';}
       else {var textColor = "black";}
document.write('<div style="background:\#'+splitted[1]+'"><h1 style="color:'+textColor+'">'+splitted[0]+' \&nbsp\; \#'+splitted[1]+'<\/h1><\/div>');


}
makeHeaders('bottom');
}


</script>
</head>
<body>
<script>
document.open();
drawColorChart();

document.close();

</script>


</body>
</html>