Creating Your Own Color Schemer

It is very easy for designers to lose inspiration after they’ve exhausted many ideas. They want to see something new. Typical layouts become trivial and too common. Many color combinations seem plain and boring. In order to remedy this problem, a color schemer may be created.

By a color schemer, we do not mean a full fledged, scientifically proven generator. There is a very simple way to obtain new and exciting colors: randomness. Using JavaScript and HTML, it is possible to create a random color generator which can be very helpful in finding new inspiration.

Generating random colors? It may not sound too interesting. These were exactly our thoughts. On the contrary, once we experienced such a generator for ourselves, examining new color combinations became easy and fun. Looking at the bad colors that were produced gave us some entertainment.

You may view a demo of this random schemer before we start.

The first step is to set up some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Color Schemer</title>
</head>
<body>
<div id="schemer">
	<p>The quick brown fox jumped over the lazy dog.</p>
</div>

<div id="output">
	<p id="color"></p>
	<button type="button" id="change">Change!</button>
	<button type="button" id="submit">Display Colors!</button>
</div>
</body>
</html>

#schemer is the canvas where we will produce random colors. #output controls user input and displays the outputted colors when necessary.

Because there is a minimal amount of CSS required, it can all be placed in-line:

<style type="text/css">
body {
	font: 17px/27px 'Trebuchet MS', Helvetica, Sans-Serif;
}

#schemer {
	margin: 100px;
	width: 400px;
	height: 77px;
	padding-top: 23px;
	text-align: center;
	background: #000;
	color: #fff;
}

#output {
	width: 400px;
	height: 50px;
	margin: -75px 0 0 100px;
	text-align: center;
}
</style>

This positions the text, buttons, and canvas in the right area. It also sets up the dimensions of the canvas.

All that’s left now is the JavaScript:

var schemer = document.getElementById('schemer');
var color = document.getElementById('color');
var swap = document.getElementById('change');
var submit = document.getElementById('submit');

schemer.style.backgroundColor = 'rgb(0, 0, 0)';
schemer.style.color = 'rgb(255, 255, 255)';

function change() {
	var bgColor = 'rgb( ' + rand() + ', ' + rand() + ', ' + rand() + ' )';
	var textColor = 'rgb( ' + rand() + ', ' + rand() + ', ' + rand() + ' )';

	schemer.style.backgroundColor = bgColor;
	schemer.style.color = textColor;
}

change() will be called whenever we want to generate a random color. In this case, every time the user clicks the #change button, this function should be called.

The definition of rand() used in the above snippet is very simple:

function rand() {
	return Math.floor( Math.random() * 256 );
}

It generates a random number between 0 and 255. Three of these numbers are then used to create a random color defined in RGB.

When the #submit button is clicked, the user should be able to view the colors involved in the randomly generated color combination:

function display() {
	var bgColor = schemer.style.backgroundColor;
	var textColor = schemer.style.color;

	color.innerHTML = 'Background Color: ' + bgColor + ', Text Color: ' + textColor;
}

swap.onclick = function() { change(); }
submit.onclick = function() { display(); }

display() adds text to the #color paragraph in order to display the generated color.

Here is the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Color Schemer</title>
<style type="text/css">
body {
	font: 17px/27px 'Trebuchet MS', Helvetica, Sans-Serif;
}

#schemer {
	margin: 100px;
	width: 400px;
	height: 77px;
	padding-top: 23px;
	text-align: center;
	background: #000;
	color: #fff;
}

#output {
	width: 400px;
	height: 50px;
	margin: -75px 0 0 100px;
	text-align: center;
}
</style>
</head>
<body>
<div id="schemer">
	<p>The quick brown fox jumped over the lazy dog.</p>
</div>

<div id="output">
	<p id="color"></p>
	<button type="button" id="change">Change!</button>
	<button type="button" id="submit">Display Colors!</button>
</div>

<script type="text/javascript">
	window.onload = function()
	{
		var schemer = document.getElementById('schemer');
		var color = document.getElementById('color');
		var swap = document.getElementById('change');
		var submit = document.getElementById('submit');

		schemer.style.backgroundColor = 'rgb(0, 0, 0)';
		schemer.style.color = 'rgb(255, 255, 255)';

		function change() {
			var bgColor = 'rgb( ' + rand() + ', ' + rand() + ', ' + rand() + ' )';
			var textColor = 'rgb( ' + rand() + ', ' + rand() + ', ' + rand() + ' )';

			schemer.style.backgroundColor = bgColor;
			schemer.style.color = textColor;
		}

		function rand() {
			return Math.floor( Math.random() * 256 );
		}

		function display() {
			var bgColor = schemer.style.backgroundColor;
			var textColor = schemer.style.color;

			color.innerHTML = 'Background Color: ' + bgColor + ', Text Color: ' + textColor;
		}

		swap.onclick = function() { change(); }
		submit.onclick = function() { display(); }
	}
</script>
</body>
</html>

That’s all there is to it!

You may view the demo or download the files.

Leave a Reply

Creating Your Own Color Schemer