Lateral Code » inspiration

Creating Your Own Color Schemer

Karthik Viswanathan — Sat, 28 Feb 2009 08:09:52 +0000

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:





Color Schemer



	The quick brown fox jumped over the lazy dog.

#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:

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:





Color Schemer




	The quick brown fox jumped over the lazy dog.

That’s all there is to it!

You may view the demo or download the files.

Poll: What are your feelings about Lateral Code?

Karthik Viswanathan — Sat, 28 Feb 2009 01:42:54 +0000

Throughout our history, we have written about many CSS, HTML, JavaScript, and PHP topics. In order to obtain input from you, our visitors, we would like to have a poll.

Post a comment to this post to make your ideas known!

What topics have you enjoyed reading on our site? We can create similar posts to satisfy your interests.
Do you have any ideas for future writings? This can spark new ideas in us!
Are any web-related questions baffling you? If so, give us a chance to answer them!
How do you feel about the current site? Is it up to your standards? We don’t mind making changes!

Answering these questions or just expressing feelings will help us better understand what you are looking for. Please drop us a comment with feedback. Thank you!

15 Amazing NASA Images

Karthik Viswanathan — Sat, 10 Jan 2009 22:15:18 +0000

Nature. Space. Galaxies. What better to represent our world with than amazing photographs of the universe? Nothing can compare to this true beauty.

NASA, or the National Aeronautics and Space Administration, has placed daily images depicting the vast universe from many standpoints. These images may be used for a variety of purposes, as stated in the NASA image guidelines.

Here are 15 images that “wow”ed us:

40 Inspirational Quotes

Karthik Viswanathan — Fri, 09 Jan 2009 06:29:07 +0000

Quotes can spark feelings of happiness, fear, jealousy, love, and more. In this article, we will present 50 inspirational quotes that may be that “spark” to create/improve your own website.

There is no wrong interpretation of a quote. Beauty is in the eye of the beholder.

Time is what we want most, but… what we use worst. - William Penn
When you come to the end of all the light you know, and it’s time to step into the darkness of the unknown, faith is knowing that one of two things shall happen: Either you will be given something solid to stand on or you will be taught to fly. – Edward Teller
No bird soars too high if he soars with his own wings. – William Blake
To accomplish great things, we must not only act, but also dream; not only plan, but also believe. – Anatole France
The healthy and strong individual is the one who asks for help when he needs it. Whether he’s got an abscess on his knee or in his soul. -Rona Barrett

When you have to make a choice and don’t make it, that is in itself a choice. -William James
A man’s dreams are an index to his greatness. – Zadok Rabinwitz
National borders aren’t even speed bumps on the information superhighway. -Tim May
Eighty percent of success is showing up. -Woody Allen
Success seems to be largely a matter of hanging on after others have let go. -William Feather
If passion drives you, let reason hold the reins. -Benjamin Franklin
Shoot for the moon. Even if you miss, you’ll land among the stars. -Les Brown
The road leading to a goal does not separate you from the destination; it is essentially a part of it. -Charles DeLint
The impossible is often the untried. -Jim Goodwin
Fall seven times, stand up eight. -Japanese Proverb
The road to success is dotted with many tempting parking places. -Author Unknown
Five minutes of today are worth as much to me as five minutes in the next millennium. – Ralph Waldo Emerson
Look at a day when you are supremely satisfied at the end. It’s not a day when you lounge around doing nothing; its when you had everything to do, and you’ve done it. - Margaret Thatcher
Quality is remembered long after the price is forgotten. – Gucci Slogan
Quality is never an accident; it is always the result of high intention, sincere effort, intelligent direction and skillful execution; it represents the wise choice of many alternatives. – William A Foster
Plan your work for today and every day, then work your plan. – Norman Vincent Peale
You always pass failure on the way to success. – Mickey Rooney
Choose a job you love, and you will never have to work a day in your life. – Confucius
In three words I can sum up everything I’ve learned about life: It goes on. – Robert Frost
Vision without action is merely a dream. Action without vision just passes the time. Vision with action can change the world. – Joel A Barker
There is no such thing as a long piece of work, except one that you dare not start. – Charles Baudelaire
It’s always too soon to quit. – Norman Vincent Peale
Thinking will not overcome fear but action will. – W Clement Stone
Success usually comes to those who are too busy to be looking for it. – Henry David Thoreau
We must always change, renew, rejuvenate ourselves; otherwise we harden. – Johann Wolfgang Von Goethe
We are made wise not by the recollection of our past, but by the responsibility for our future. – George Bernard Shaw
Wisdom consists of the anticipation of consequences. – Norman Cousins
Not everything that counts can be counted, and not everything that can be counted counts. – Albert Einstein
Every man takes the limits of his own field of vision for the limits of the world. – Arthur Schopenhauer
If you think you can, you can. And if you think you can’t, you’re right. – Henry Ford and Mary Kay Ash
You have reached the pinnacle of success as soon as you become uninterested in money, compliments, or publicity. – Thomas Wolfe
Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful. – Albert Schweitzer
One moment of patience may ward off great disaster. One moment of impatience may ruin a whole life. – Chinese Proverb
It’s faith in something and enthusiasm for something that makes a life worth living. – Oliver Wendell Holmes
Courage is going from failure to failure without losing enthusiasm. – Winston Churchill

Sources:

http://www.quotegarden.com/
http://www.saidwhat.co.uk/
http://www.quoteland.com/
http://www.wisdomquotes.com/