1. Web Design
  2. Design Theory

Selecting Your Own Color Scheme

This post is part of a series called Design School for Developers.
Understanding the Qualities and Characteristics of Color
Working With Brand and Design Guidelines

By now you should have a good idea of what color is, what each of the colors mean and have a good understanding of the different types of color scheme available to you. However, knowing all of that doesn't help if you have no idea where to get started, or how to put that information into action.

The Impact of Color in Your Projects

Color is one of those things that seems really simple - but can be really difficult to get just right. And, as it's one of the really visual, focal parts to any design, then it's so, so easy to notice when something doesn't quite sit right. If such a major part of your design doesn't feel right, or represent your company, service or brand well, then it can make all the difference between users that stay and explore and those that disappear.

Owing to this, when you're choosing a color scheme you need to be really aware of the impact that color can have in your design - both good and bad.

It's absolutely fine to roll with your own color schemes and stray away from the default types (such as complementary), but when you're just starting out in working with creating your own color schemes you're probably better sticking with the main color scheme types. That way, it makes it more difficult - though not impossible - to take a wrong step and end up with a bad color scheme.

Choosing Suitable Color Schemes

First up, we'll look at how you can start choosing a suitable color scheme for your project.


What you need to be thinking about here is what colors are suited to your brand, company or industry on the whole. There's a fantastic infographic over at Column Five Media which talks about the colors used in the top 100 brands around the world.


Not only is this really interesting, as we get a look at what colors are used in some top brands and companies around the world, but it gives us a fascinating insight into which colors work best - or are more often used - in particular industries.

As you can see in the infographic, all of the main colors available to you are suited for different industries - and the colors that may be suitable all come down to the general interpreted meanings that we discussed in the previous articles.

What I love to do is create mind-maps exploring the different tones and ideas that I have for a project - and look at the kind of message that the brand might want to project online. Then, compare this mind-map of ideas to the color meanings and see which match up the most - and that can help you to see which colors might be best suited for the project or brand.

How Many Colors Should I Use?

Sometimes, this question really is a matter of preference. However, it's worth nothing that in the Column Five Media infographic, out of the top 100 brands only 5% chose to use more than two colors in their main color schemes.

Note: In only fairly recent times, when printing budgets were more relevant than online exposure, the amount of process colors used in brand printed material was a very real consideration.

That said, use as many colors as you feel is suitable - in some instances, you could use color to differentiate between sections on a website. In that sort of instance you may have up to four or five different colors to include in your color scheme, which can match up to each of the sections.

Although the ultimate choice is down to you, I would recommend that you at least work with two or three colors in your main color scheme - not including a neutral light or dark color for text or backgrounds. Having two or three colors in your color scheme simply affords you the chance to experiment and offer more of a contrast between areas than if you were to work with varying shades and tints of one color.

Choosing Color Schemes From Photos

Have you ever looked at a photo and thought how magical or breathtaking the colors appeared? Sometimes, these beautiful colors can be translated into a usable color scheme that you can put into action. All it takes to choose a great color scheme from a photo is a little practice and a lot of patience - for if you're a perfectionist like me, then you'll spend a while tweaking the colors until they're just right.

Choosing Your Photo

The key to choosing a good photo to work with is to find one that has variety and one that you perhaps find quite striking. It doesn't matter whether your picture is more vintage or monochromatic in style (i.e. with a similar hue or color running through the whole image) or whether it's more vibrant and has many colors - you can still find a usable color scheme somewhere within it.

Once you have a photo - or a few, if you want to try creating several schemes at once - open it up in your favourite graphics program and just go crazy. I have a template that I like to use in Photoshop (containing just a few small rectangular shapes) as a starting point for where I put the colors I choose.

When choosing a color scheme from a photo, I try to stick to one color scheme type (such as monochromatic or complementary) and then try to pick out colors that might match that style in the photo. So for example, I'll look at the photo and try and see what colors stand out to me most - it doesn't mean they're bright, they may be muted or only a small part of the photo, but I will try and pick out the few colors that make the photo what it is to me.

In this photo due to all the similar purple tones weve been able to quite easily pick out a monochromatic colour scheme

In this photo, due to all the similar purple tones, we've been able to quite easily pick out a monochromatic colour scheme.
This photo is quite busy and we could therefore spend time creating a more custom colour scheme that adheres to a couple of rules but also fits together well

This photo is quite busy, and we could therefore spend time creating a more custom color scheme that adheres to a couple of rules, but also fits together well.

Once I've started looking at the photo a little more, and I have more of an understanding of the style I'm after, I'll continue to play around - simply with the eye picker tool - to see what colors work together best. It can be a case of choosing just one color as a focus, with two other colors that can be used as more of an accent.

Then, start putting these colors into the template and move them around until you're happy with the positioning and the hierarchy of the colors. I often also try to work with getting both a dark (near or almost black) and light (nearer white) color alongside the main focal colors that I can choose. This can then help with balancing out the colors and structure on a page, as well as providing possible text colors if none of your main colors in your scheme are suitable.

Honestly, the main aim here is to just play around - sometimes the colors you come out with won't be suitable and sometimes you won't be able to find a decent color scheme in the photo - but make sure you experiment with the colors until you create a color scheme that feels more uniform and will create a good harmony in your design.

Adobe Kuler iPhone App

If you're struggling with creating your own colors schemes from photos, Adobe have also recently released an iPhone app for Adobe Kuler, and with it comes a super neat way of choosing color schemes from photographs. You can switch to camera mode and choose from your existing photos or you can take a photo of something directly where you are.


What's brilliant about the Adobe Kuler app is that it offers you a really innovative way of choosing colors. If you're taking a photo directly from the Kuler app in the "Live" view then you'll start to see little circles moving all over the photo that you can see. What's happening here is that the app is constantly searching and picking out what it deems to be the most valuable colors in that photo as it stands, then putting them together into a little color scheme for you.


If you're not confident about choosing your own color schemes from photos then using the Kuler app is a great way of helping you understand what makes a good color scheme from a photo. Feel free to take plenty of photos - with both fewer, more muted colors and many, bright and colorful colors - and use the Kuler app to really analyse why these color schemes work and why the app has picked them.

Then, in time you can start to work on creating your own color schemes from photos and be more confident about the choices you then make.

Further Reading

For more detailed instructions on using the iOS Kuler app, take a look at Capture Colors With the Adobe Kuler App for the iPhone by Vectortuts+ editor Sharon Milne.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.