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.
migrated from ux.stackexchange.com Aug 16 '13 at 14:22
This question came from our site for user experience researchers and experts.
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.
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.
Colours in a Nutshell 1
Number of Colours
Aesthetic choices on the colour wheel are often:
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.
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.
There is no substantive evidence for colour symbolism, and it varies greatly between cultures.
 Lidwell et al., 2003. Universal Principles of Design. Rockport.
As far as UX is concerned with your color palette, there are a few basic rules to follow.
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.
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.
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.
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