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 have read some articles about web design, all of them recommend to choose a color palette first. I know colors are most important thing for professional web look. COLOURlovers, a web for color palettes. It has thousands of color palettes. I am beginner to web designing so, I don't know how to properly use palettes. Working with one and ending up with ugly colors on screen. Is there any technique to properly use color palettes? Which color should be used for links, for background, for header, for footer e.t.c out of given palette colors.

share|improve this question

migrated from ux.stackexchange.com Aug 16 '13 at 14:22

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

add comment

6 Answers 6

This is a dreadfully broad question but there is one thing I can say with a fair amount of certainty:

UI design does not start with the color palette.

You may have a brand that has a color palette. They may even have UI guidelines defined. But the most important thing is to layout your information and work through the interaction of the page. Color supports the brand but it also supports the interaction. When you have your data and actions positioned, you can use color to influence the users decisions.

share|improve this answer
add comment

I see visual design as the top layer of UX, and being part of aesthetic it is a very important one. But I agree that the question will be better answered by the graphic design community.

Also, if I'm perfectly honest, many designers don't pick palettes from arbitrary sets; instead, they often 'borrow' one from a site they like, and less often they use photos.

Anyhow:

Colours in a Nutshell 1

Number of Colours

  • Use colours conservatively.
  • Limit the palette to about five colours (one glance limit).
  • Consider accessibility (don't impart information by colour only, for those with limited vision).

Colour Combinations

Aesthetic choices on the colour wheel are often:

  • Analogues (adjacent)
  • Complementary (opposing)
  • Triadic
  • Quadratic
  • Colours found in Nature

Prefer warm colours for foreground element, and cold for background. Light gray is a safe colour (non-competing, good for grouping).

You can see these options in the scheme selection wheels from this very useful site.

ColorSchemeDesigner screenshot

Saturation

  • Saturated
    • Attention
    • Excitement
    • Dynamic
  • Desaturated
    • Performance
    • Efficiency
    • Professional
    • Serious (darks)
    • Friendly (brights)

Which colours you should use for links? It depends how much you want people to click on them. A link such as 'Like me' would probably get a warm saturated colour, whereas an informative link such as 'Powered by phpBB' (you don't want people to leave your site to the phpBB site) would probably get a cold desaturated colour.

Colour Wheel

Symbolism

There is no substantive evidence for colour symbolism, and it varies greatly between cultures.

[1] Lidwell et al., 2003. Universal Principles of Design. Rockport.

share|improve this answer
    
This chart can help you to work out what differenet colours mean to different cultures i.stack.imgur.com/CxABj.png. Also some colours have been used to mean one thing so often that they have become synonomys with that, such as green means yes or ok and red means no, cancel or delete. –  KitP Aug 29 '13 at 10:00
add comment

As far as UX is concerned with your color palette, there are a few basic rules to follow.

  • DO use colors that contrast to indicate importance or relevance to items on-screen.
  • DO use colors that convey information. A red box with an "X" in it is pretty ubiquitous in its translation as "Close". Having your "Close" box suddenly be green might throw people off.
  • BEWARE the double-meaning problem with colors. This is when one color is primarily used to mean one thing (if all links are teal), and then you start using it for other things (if suddenly all your image captions are teal). It'll throw users off.
  • IN THE END just be sure to make the experience cohesive, intuitive, and easy to use. This is mostly the UX side of things (where things are, how they act, etc.), but the finishing touches to proverbially "seal the deal" are what you're asking about. Colors can come last. Get the site together, decide how things work, and then paint it.
share|improve this answer
add comment

I would say design it first without much thought to color (just use browser defaults for link colors and such).

The trick is to get a page up with a good representation of the layout coded in such a way that it's easy to try different color schemes. Then you want to have an understanding of color technology (color models, RBG, HVL and HSL) as well as the basics of color theory and usability issues (readable contrast, discernible links, etc.).

With some grounding in those 3 areas, just try different themes and see how they look applied to your design. You can start with someone else's theme (from colourlovers.com or a scheme design program) or your own. The important thing is to be able to tweak it (using knowledge of color models) and try different things. On top of understanding the issues outlined here and in other answers, it just takes practice.

share|improve this answer
    
+1 for explaining why OP can safely ignore color palettes at first. He can decide on the colors once he figures/maps out the interactions and content in the website. –  mary Aug 15 '13 at 8:58
add comment

I disagree with most of what is being said about UX being separate from colors. I see all of them as key elements of the final product. In terms of what colors look well together, that is hard to say. Often it is really the balance of colors and not really the color of the colors. Also, factor in the degree to which images will provide colors to the site.

Honestly, I find I like site that tend to use muted colors in MOST places but uses bold colors in 5-10% which makes the color stand out more in my mind. Two things to remember. First, while many people say design is subjective, everybody agrees on an ugly design. Design for something that is good enough, first, and then look to make it great after that.

share|improve this answer
    
The answers and comments are just saying that color is not the first or more important step in UX; as the OP mistakenly assumes in his question. –  mary Aug 15 '13 at 8:56
    
@mary use not choice –  timpone Aug 15 '13 at 13:32
add comment

Make sure color is the last layer you apply unless you have a color palette to start out with, in which case feel free to follow whatever guidelines your company employs during your design process.

If you're starting out fresh and the company doesn't really have a color palette yet, I would recommend the company decide on a brand palette first that should involve some input from the upper levels of management as well.

Resources

Adobe Kuler - This tool does a great job of showing you where the colors you're picking lie on a color wheel, whether they're complementary or the same shade of each other etc.

Web Color Data - If you go to a website and like the color scheme, you can use this tool to extract the colors used. It also does a pretty great job of telling you what percentages of each of the colors are being used.

Other things to keep in mind

  1. Make sure the colors work well together. Get a good mix of "hard" and "soft" colors. i.e., make sure all your colors aren't primary and compete for visual attention. Of course, you won't know this off the bat, but having them on a swatch in one of the color palette tools helps. Each color on a palette is almost never used in equal quantities.
  2. There are always some colors that are used more than others. I would suggest writing yourself a little guideline of how much you should use your "bolder" colors in percentages.
  3. Alongside color, make sure you're keeping an eye on fonts, font sizes, layout and all that other good stuff that gives a website a professional look and feel.
share|improve this answer
add comment

Your Answer

 
discard

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