Color theory for web design isn’t just about making a site look pretty. The wrong choice of color can drive people away for other good reasons, like eye strain or losing where you are on the site. If the colors you choose make the site hard to use, you’re going to lose customers.

If you’re struggling to come up with a color scheme for your website, here is a very simple guide you can follow to create a five-color design that will be pleasing to use until you settle on a final design. Give us a call if you are still not sure.

The Core Color

First, select a core color to represent your brand. Easier said than done since there are millions of available colors. Here’s how to narrow it down. First, don’t worry about exact shades just yet. Stick with your standard list of primary and secondary colors. Next, cut out any colors that are used heavily in your competitor’s branding. Choose a core color from the remaining list.

Now, select a shade. In general, the lighter the color the greater the impression of something new and fresh. The darker the color, the more corporate and conservative of an impression you give. There is no right or wrong choice.

If you already have a logo, choose the main color out of that and you’ll be set.

Black, White, and Light Gray

If you examine website designs, almost all of them have these colors somewhere in them. White backgrounds and black text are the easiest to read for the eyes. Yes, it is possible to go the other way but without taking special care with the balance of the colors it can cause eyestrain. Stick with a white background and black (or dark gray) text.

The light gray color is to segment off different areas of text. So you could have a white background with several divisions of your site in light gray for highlighting, then black text on top. However, there are many shades of gray. How do you choose one that will work?

A simple way to do it is to go to a site like Dribbble.com and put in the hex values of the base color you selected. Then look to see what other sites have done and take the gray values of the ones you like the best. Make sure it’s a light gray, though; you need to be able to read text that’s on top of the gray shade you select.

Accent Color

The last color you need is an accent color for things like CTAs or anything you really want to highlight. Go to Palleton.com and enter in your core color’s RGB value in the box on the bottom left of the color wheel. Then click the “add complementary” slider in the upper right of the color wheel. You’ll see another color appear that’s the opposite of the core color. Instant accent.

However, if it’s too much of a contrast you can click the wheel buttons along to the top edge to get other complementary color designs. The box on the right will show the other colors in contrast to your core color. Find one you like and record the values.

If you use these five colors on your site, you really can’t go wrong. White for background, black/dark gray for text, light gray for divisions, a core color for branding, and an accent color for CTAs is all you need to have a beautiful and simple color scheme that you can make yourself.