Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I've read a bunch of blog posts and stuff on web design, but don't have any formal education or experience/training.

In experimenting with my first website, I've found that having 3 colors works best. At first I tried just black and white, but that didn't look good. Then I added a color (blue nav bar), and it still looked like it needed more. Then I added a second color, and that looked much better, even when it was just a small element like a button or something. Finally, adding a third also had a notable benefit. Beyond that, the marginal value of colors drops off considerably, and even might become negative.

Is there a consensus about this? If so, what is it?

Also, is there some sort of reason for this? (I know it's hard to articulate why some things are aesthetically pleasing, so I wouldn't think so, but I'd still like to here theories!)

share|improve this question

migrated from ux.stackexchange.com Feb 8 at 13:06

This question came from our site for user experience researchers and experts.

add comment

6 Answers 6

As mentioned by others, the number of colors you can use will depend on the type of website you want to create, the product/s and your personal choices. There is no wrong, just maybe a couple of flexible rules you should keep in mind.

These are some monochromatic / 3 tone websites that work quite well.

Completely monochromatic - Black, white and one single shade of grey to separate elements:

Source

I find this previous one particularly interesting, as the use of color is absolutely minimal. Nonetheless, it looks great. The choice of typography and the images make up for a palette.

One color, one or two shades of dark grey - Black and light green:

Source

Again, good use of typography, with some nice variation, and a background with a subtle texture that lifts the whole thing up.

Couple of shades on color background - Grey(s) on pink:

Source

Striking-color background and a nice contrast with the content. This site proves, for me, that you don't need to go 100% flat (single color humongous square tile) to be simple and polished.

Multiple shades - Black (dark purple?), white and lilac:

Source

Focusing mainly on text, this site only uses shades of lilac/purple. However, it does look a bit plain imho.

I think the main challenge when creating monochromatic sites is not to lose the user's interest. You need something that is slightly unexpected and/or beautiful, be it typography or illustration. And you definitely need good contrast, the more readable something is, the more appealing it seems.

The other element I'd definitely consider is familiarity. For example, you want your buttons to look like buttons, and you want your users to identify them easily. It's not that easy to make a button as obvious using only one color, you will need to add identifiers, such as... a border, for example. So I guess you might encounter a little more difficulty from a usability point of view.

share|improve this answer
add comment

You should use as many colors as you need, if you need any at all, and no more and no less.

Remember that "color" can refer to shades of gray, too. Or is it 'grey'?

It's all opinion, a feel, a designer's design. If it works for you, then it's good.

share|improve this answer
    
actually... grey shades would be considered tones... not color as there is a clearly defined absence of color within all shades of true grey. –  Phlume Feb 8 at 17:31
    
@Phlume That's why I put color in quotes. Some call the look of something its 'color'. –  Rob Feb 8 at 21:45
add comment

Color defines the look and aesthetic of your site. But color can and should also be used to guide the user through your website. E.g. important buttons or headings could have a "Highlight-Color" to guide the users eyes towards them, links could and should have a different color than normal text or headings, and so on. So the number of colors you use should also be influenced by the content and the functionality that your site has. ;)

share|improve this answer
add comment

This is a big question and I think the best answer is: It depends.

I consider color to be only one of many tools to create a clear hierarchy. You could just use black and white and utilize size, font-weight and placement to create a clear flow. However, if the site is more complex with many buttons or actions you may need a highlight color. Perhaps black and white does not effectively communicate the liveliness or emotion of the site. So for me, it all depends.

I will say that in most cases 3 is a good starting number and you can add or subtract as the design and ui demands it.

share|improve this answer
add comment

There are many theories, and opinions, about colour combination, complimentary colours, balancing weight with dark and light colour, use of white space, and so on.

You may get different answers, but the best one, the one that really works you already have it. On your site, three is the right combination.

Some very nice sites work very well with only 2 colours, some with two and a subtle change on hover state, some with a whole rainbow. It depends on your content, the spirit of your site, the balancing of all the elements, contrast, etc, etc.

share|improve this answer
add comment

Also, is there some sort of reason for this?

I imagine there's no one reason, but lots of theories. Here's mine:

On any visual design project, if using color, having at least 3 to go with accounts for the 'big three':

  • primary color
  • secondary color
  • emphasis/highlight color

In generic terms of information layout, you typically want some level of contrast or hierarchy (primary and secondary) and you often want an emphasis color for that really important item such as a call to action.

And quite often, once you have all of that, you may realize you need no more (the old 'keep is simple, silly' mantra.)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.