xpac27/index.html

## index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; font-family: monospace; }
.color
{
    margin: 5px;
    height: 20px;
    width: 500px;
    position: relative;
}
.color span
{
    padding: 3px 5px 0 5px;
    background: white;
    position: relative;
    display: block;
    position: absolute;
    width: 250px;
    height: 100%;
    text-align: right;
}
.color:before
{
    content: " ";
    position: absolute;
    height: 100%;
    top: 0;
    left: 350px;
    right: 0;
    background-image: -moz-linear-gradient(rgba(255,255,255, 0.8) 5%, rgba(255,255,255,0));
}
</style>
</head>
<body>

    <div id="colors"></div>

    <script type="text/javascript">
    $(function()
    {
        var placeholder = $('#colors');
        $.each({
            'black'           : [  0,   0,   0],
            'dark_grey'       : [100, 100, 100],
            'grey'            : [184, 184, 184],
            'light_grey'      : [226, 226, 226],
            'very_light_grey' : [240, 240, 240],

            'orange'          : [255, 174,   0],
            'red'             : [186,  55,  42],
            'purple'          : [185,  89, 185],
            'pink'            : [239, 109, 222],
            'yellow'          : [250, 250,   0],
            'green'           : [174,  255,  0],
            'blue'            : [  0,  80, 174],
            'brown'           : [ 91,  46,   0],

            'light_orange'    : [255, 200, 140],
            'light_red'       : [236, 161, 154],
            'light_purple'    : [212, 175, 212],
            'light_pink'      : [251, 185, 242],
            'light_yellow'    : [255, 238, 158],
            'light_green'     : [174, 255, 174],
            'light_blue'      : [158, 192, 255],
            'light_brown'     : [180, 152, 123]
        },
        function(i, e)
        {
            console.log(e);
            placeholder.append('<div class="color" style="background-color: rgb(' + e[0] + ',' + e[1] + ',' + e[2] + ');"><span>' + i + ' (' + e[0] + ',' + e[1] + ',' + e[2] + ')</span></div>');
        });
    });
    </script>

</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style type="text/css">
	* { margin: 0; padding: 0; font-family: monospace; }
	.color
	{
	margin: 5px;
	height: 20px;
	width: 500px;
	position: relative;
	}
	.color span
	{
	padding: 3px 5px 0 5px;
	background: white;
	position: relative;
	display: block;
	position: absolute;
	width: 250px;
	height: 100%;
	text-align: right;
	}
	.color:before
	{
	content: " ";
	position: absolute;
	height: 100%;
	top: 0;
	left: 350px;
	right: 0;
	background-image: -moz-linear-gradient(rgba(255,255,255, 0.8) 5%, rgba(255,255,255,0));
	}
	</style>
	</head>
	<body>

	<div id="colors"></div>

	<script type="text/javascript">
	$(function()
	{
	var placeholder = $('#colors');
	$.each({
	'black' : [ 0, 0, 0],
	'dark_grey' : [100, 100, 100],
	'grey' : [184, 184, 184],
	'light_grey' : [226, 226, 226],
	'very_light_grey' : [240, 240, 240],

	'orange' : [255, 174, 0],
	'red' : [186, 55, 42],
	'purple' : [185, 89, 185],
	'pink' : [239, 109, 222],
	'yellow' : [250, 250, 0],
	'green' : [174, 255, 0],
	'blue' : [ 0, 80, 174],
	'brown' : [ 91, 46, 0],

	'light_orange' : [255, 200, 140],
	'light_red' : [236, 161, 154],
	'light_purple' : [212, 175, 212],
	'light_pink' : [251, 185, 242],
	'light_yellow' : [255, 238, 158],
	'light_green' : [174, 255, 174],
	'light_blue' : [158, 192, 255],
	'light_brown' : [180, 152, 123]
	},
	function(i, e)
	{
	console.log(e);
	placeholder.append('<div class="color" style="background-color: rgb(' + e[0] + ',' + e[1] + ',' + e[2] + ');"><span>' + i + ' (' + e[0] + ',' + e[1] + ',' + e[2] + ')</span></div>');
	});
	});
	</script>

	</body>
	</html>