View source
<!DOCTYPE html>
<html>
<head>
<title>Color Test</title>
<style>
#color {
position: fixed;
top: 0;
left: 250px;
}
</style>
<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
var colors = [
'aliceblue',
'antiquewhite',
'aqua',
'aquamarine',
'azure',
'beige',
'bisque',
'black',
'blanchedalmond',
'blue',
'blueviolet',
'brown',
'burlywood',
'cadetblue',
'chartreuse',
'chocolate',
'coral',
'cornflowerblue',
'cornsilk',
'crimson',
'cyan',
'darkblue',
'darkcyan',
'darkgoldenrod',
'darkgray',
'darkgreen',
'darkgrey',
'darkkhaki',
'darkmagenta',
'darkolivegreen',
'darkorange',
'darkorchid',
'darkred',
'darksalmon',
'darkseagreen',
'darkslateblue',
'darkslategray',
'darkslategrey',
'darkturquoise',
'darkviolet',
'deeppink',
'deepskyblue',
'dimgray',
'dimgrey',
'dodgerblue',
'firebrick',
'floralwhite',
'forestgreen',
'fuchsia',
'gainsboro',
'ghostwhite',
'gold',
'goldenrod',
'gray',
'grey',
'green',
'greenyellow',
'honeydew',
'hotpink',
'indianred',
'indigo',
'ivory',
'khaki',
'lavender',
'lavenderblush',
'lawngreen',
'lemonchiffon',
'lightblue',
'lightcoral',
'lightcyan',
'lightgoldenrodyellow',
'lightgreen',
'lightgrey',
'lightpink',
'lightsalmon',
'lightseagreen',
'lightskyblue',
'lightslategray',
'lightslategrey',
'lightsteelblue',
'lightyellow',
'lime',
'limegreen',
'linen',
'magenta',
'maroon',
'mediumaquamarine',
'mediumblue',
'mediumorchid',
'mediumpurple',
'mediumseagreen',
'mediumslateblue',
'mediumspringgreen',
'mediumturquoise',
'mediumvioletred',
'midnightblue',
'mintcream',
'mistyrose',
'moccasin',
'navajowhite',
'navy',
'oldlace',
'olive',
'olivedrab',
'orange',
'orangered',
'orchid',
'palegoldenrod',
'palegreen',
'paleturquoise',
'palevioletred',
'papayawhip',
'peachpuff',
'peru',
'pink',
'plum',
'powderblue',
'purple',
'red',
'rosybrown',
'royalblue',
'saddlebrown',
'salmon',
'sandybrown',
'seagreen',
'seashell',
'sienna',
'silver',
'skyblue',
'slateblue',
'slategray',
'slategrey',
'snow',
'springgreen',
'steelblue',
'tan',
'teal',
'thistle',
'tomato',
'turquoise',
'violet',
'wheat',
'white',
'whitesmoke',
'yellow',
'yellowgreen'
];
function drawNamedColors() {
var el = document.getElementById('named');
var ctx = el.getContext('2d');
for (var i = 0; i < colors.length; i++) {
ctx.fillStyle = colors[i];
ctx.fillRect(0, i * 5, 100, 5);
}
}
function drawRgbColors() {
var el = document.getElementById('rgb');
var ctx = el.getContext('2d');
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 100; x += 5) {
ctx.fillStyle = 'rgb(0%, ' + x + '%, ' + y + '%)';
ctx.fillRect(x, y, 10, 10);
}
}
ctx.translate(0, 100);
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 100; x += 5) {
ctx.fillStyle = 'rgb(' + x + '%, 0%, ' + y + '%)';
ctx.fillRect(x, y, 10, 10);
}
}
ctx.translate(0, 100);
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 100; x += 5) {
ctx.fillStyle = 'rgb(' + x + '%, ' + y + '%, 0%)';
ctx.fillRect(x, y, 10, 10);
}
}
}
function drawHslColors() {
var el = document.getElementById('hsl');
var ctx = el.getContext('2d');
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 100; x += 5) {
ctx.fillStyle = 'hsl(0, ' + x + '%, ' + y + '%)';
ctx.fillRect(0 + x, y, 10, 10);
}
}
ctx.translate(0, 100);
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 360; x += 18) {
ctx.fillStyle = 'hsl(' + x + ',50%, ' + y + '%)';
ctx.fillRect(x / 3.6, y, 10, 10);
}
}
ctx.translate(0, 100);
for (var y = 0; y < 100; y += 5) {
for (var x = 0; x < 360; x += 18) {
ctx.fillStyle = 'hsl(' + x + ', ' + y + '%, 50%)';
ctx.fillRect(x / 3.6, y, 10, 10);
}
}
ctx.save();
ctx.translate(50, 200);
for (var r = 0; r < 45; r += 5) {
for (var a = 0; a < 360; a += 18) {
ctx.save();
ctx.rotate(a * Math.PI / 180);
ctx.translate(0, r);
ctx.fillStyle = 'hsl(' + a + ', 100%, ' + r + '%)';
var w = Math.max(5, r / 3);
ctx.fillRect(-w / 2, -w / 2, w, w);
ctx.restore();
}
}
ctx.restore();
}
window.onload = function() {
drawNamedColors();
drawRgbColors();
drawHslColors();
};
</script>
</head>
<body>
<canvas id=named width=100 height=730></canvas>
<canvas id=rgb width=100 height=730></canvas>
<canvas id=hsl width=100 height=730></canvas>
<div id=color></div>
</body>
</html>
