How To Create Easy Color Schemes

There are Three Ways To Begin

1. Pick your colors first and then build your site with them in mind - this is best if you are picking a pre-made template.

2. Create your site first, in grayscale, and add colors after you've finished to locate the areas where your dominant color should go more easily. This is a lot easier to do if you are using a simple template or creating your site from scratch.

3. Use a pre-made layout without worrying about color, and then change the colors later.

Choosing A Dominant Color

What is a dominant color? The main color you plan to use on your site - and usually the color you use for your logo, menu tabs, call to action buttons, titles & headlines, and other areas you especially want your users to notice . This will be your "brand color" - the color ALWAYS associated with your brand. Some examples:

• Red: Coca-Cola, Target, Heinz

• Yellow: Best Buy, Cheerios, Nikon

• Orange: Nickelodeon, The Home Depot, Fanta

• Blue: Facebook, Adidas, Walmart

• Gray: Apple, Nissan, Nintendo

So how do you choose a dominant color? Well, you learn a little bit about the science of color, and decide what you want your site to convey to visitors using color.

Choose Accent Colors

Accent colors are used in other areas of your site, such as the current menu tab, subtitles, and to highlight secondary information. Remember: Don't add too many colors, as they can be overwhelming. Many studies have been done on the use of color on websites, and most people agree that they prefer no more than three colors on a site (social media icons, images and videos excluded).

Use Contrast Appropriately

If you want users to be able to read your website, you have to use contrast - that is, a dark color against a light color, or vice versa. Keep in mind, that generally dark on light text is easier to read and is less likely to cause eye strain, so you may wish to use light on dark sparingly if you have a website with lots of text. Not sure if your choices are contrasting enough? You can find an easy "pass/fail" contrast checker tool here.

Choose A Background Color

When choosing a background color, you need to think about what kind of website you have. If you have a lot of text, a light colored background is best because of the reasons we just discussed. If you have a website for photography, generally white or black are best because they make the photos the focus of your site. If your website is for a business in the fashion, design, restaurant, beauty or creative industries, you can pretty much use whatever background you want, including backgrounds with multiple colors and bold patterns. The number one rule though is to always make sure your background doesn't make it hard to read your text or see your graphics.

Tools for Creating Color Schemes

Coolors.co makes choosing a color scheme as easy as clicking the spacebar! You can also adjust the colors if you find one you like, but it's just too light/dark or maybe a tad on the orangey side.

Like a color from another website, but not sure what the codes are to use it on your site? Just use Colorzilla to sample the color and get the codes to add it to your website!

Need different shades of the same color? Use the Adobe Color CC tool (by selecting the "Shades" option) to generate several shades of your dominant color.