How do you choose colors in a webpage?

It always confuses me on how to choose colors. I read some posts on Smashing Magazine so I know the color ring the color scheme, but I never know how to choose among them.

How do you choose colors? Is there any guideline? Or you just go after you intuitions?

Shaan Suleman's photo

Hello @jiyinyiyong,

While there are no formal guidelines for selecting colors, there are certain conventions you can follow. The colors you use will depend on the visual language of the product you are designing and who you it is for.


General advice:

• Ensure there is enough contrast between text (foreground) and background
• Use color to distinguish interactive elements like links from body text
• Make sure colors match overall visual language of the brand/product and;
• Look at color psychology charts, and the conventional meanings of colors (eg. red means danger, so use this color to show error states, etc.)


Resources:

Show +1 replies
Marco Alka's photo

funny, how facebook is listed for "Trust" in the last link^^

Shaan Suleman's photo

@jiyinyiyong examining existing websites and analyzing the colors they use is a great way to start. However, choosing colors from zero would fall under what is called an "Atomic Design" approach. This approach may pose many challenges. My advice is to limit yourself to 2-4 colors and work from there :)

hahahaha @maruru I didn't even notice! I should've mentioned that there are exceptions to this chart haha!

Rodrigo Garcia's photo

You could literally select any color you want and almost all the colours you want BUT you should not choose more than 3 or 4. What a lot of people recommend is to select your main color as a highlight and then choose a darker color of the highlight; then you select kind of a light or dark color for the background with their complementary colours.

Take for example hashnode: They use a very light grey for background and shadows, also for cards headers and links, they only use a green-blueish color as a highlight for their logo and the darker version of the same color for the name. They basically just use one color, the complementaries of that same color and a light grey and if you ask me is a very nice color selection and it really works 'cause it does not distracts you from the main content.

Rodrigo Garcia's photo

Also you could use this tool from Adobe to select complementary colours or find it from users; https://color.adobe.com

Brandon's photo

When creating a color scheme it's important to have some neutral grayscale colors, some high saturation high chroma colors, some contrasting ( complimentary ) colors ( if your main color is blue, add a yellow/orange to contrast it ), and some analogous colors ( if your main color is blue, green is an example of an analogous color ). This information can be found by studying the color wheel theory.

In addition to what's already been said, bright highly saturated contrasting colors will draw attention. Use them very sparingly on areas of high importance ( ex: calls-to-action such as "sign up" ). Most colors should be neutral ( grayscale, black, white, etc ) with splashes of chroma on important things.

PS: When using colors, it's important to keep in mind the color-blind people :) Don't use color alone to indicate something.

PPS: If you're in a rush, there are plenty of websites out there with premade color schemes, such as

https://coolors.co/browser/best/1

http://www.degraeve.com/color-palette/index.php

http://www.0to255.com/BED85D

http://bada55.io/

https://yeun.github.io/open-color/

Candis W's photo

This is a great site I've used to help me choose colors for a project: Palettable.io