CCode for Artists - Miles DeCoster

Coding a color palette

This script uses nested "for loops" to create a grid of 3960 (360*11) divs and assigns each div a backgound color using HSL color values.

The loops are nested, so the outer loop runs 360 times. The nested loop runs 11 times each time the outer loop runs for a total of 3960 iterations. Each time through the loop another swatch is added and then assigned a color with a unique set of HSL values. Though the values are unique the colors are not, as a lightness value of 0% is always black and a value of 100% is always white. Hence each row represents a specific degree on the Hue scale, a Saturation of 100% and a Lightness value going from 0% to 100%.


<script>
$(document).ready( function() {
	// use a loop to create a grid of divs with a class of "swatch" appended to the div with id of "palette"
	// assign the swatches in each row a color using a unique hue number (0-360), a saturation of 100%, and a
    // lightness value from 0 to 100% in increments of 10
	swatchCount=0;
	var lightness=['0%','10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'];
	sat="100%";
	for (var k=0; k<360; k++) {
			for (var i=0; i<11; i++) {
				$('#palette').append("<div class='swatch'></div>"); 
				$('.swatch').eq(swatchCount).css('background-color', 'hsl('+k+','+sat+','+lightness[i]+')'); 
				swatchCount++;
			}
	}
	// copy the color information from the swatch clicked on and apply it to the target div
	$('.swatch').click(function() {
		myColor=$(this).css('background-color');
		$('#target').css('background-color', myColor);
		$('#info').html($(this).css('background-color'));
	});
});
</script>