Choosing the right colors for your website or blog is more than just picking a few favorite colors and tossing them in. Colors should match the mood of your site and combinations should be well thought out.
There is also a balance to picking colors that not only please you, but serve your audience as well. Follow this guide and you’ll soon be on your way to choosing a great website palette that everyone can be happy with.
Stick to a 3-Color Palette
In general, it’s best to keep to a 3 color palette for your website aside from black, grey and white. Any more than this and your site may start to look chaotic.
Start by picking 2 colors that go well together, then pick a third color as your accent color (more on this in a bit…)
To choose the first two colors, start with the colors in your logo if you have one. This will keep your branding consistent. If your logo doesn’t have colors or you don’t really have a logo, you’ll have a little more work to do in choosing your colors.
Rather than choosing your favorite colors, you want to think about the function of each color you choose first, as opposed to the aesthetic quality. Choose colors that reflect the “feel” of your website, colors that are appropriate for your audience.
When choosing colors for your designs, be deliberate; don’t use colors without purpose.”
-Source: Shannon Noack
How do you choose colors that are appropriate for your audience?
Colors have a mood.
For example warm colors evoke outgoing, energetic and happy feelings:
Cool colors tend to have a calming or reserved effect:
Neutral colors on the other hand don’t evoke much emotion:
Colors can also change moods as you brighten or darken them or pair them with other colors.
For example, a light blue could reflect peace and freedom, but a bright aqua becomes happy.is considered to be reserved and trustworthy, which explains why a lot of banking and financial sites use it. A
Now if you were to pair the aqua blue with an orange, you‘d be conveying a fun energy! Perfect for a site about beaches!
Colors and Their Meanings
Different colors can have drastically different meanings. Even still, shades (colors mixed with black) or tints (colors mixed with white) of one hue (pure color) can completely change those meanings. Also the colors you choose to pair them with can also create entirely different meanings.
Gender has a huge influence on color preferences:
Women in general respond better to softer colors and tints, while men prefer brighter colors and shades.
Take a peek at the True Colors Infographic by KISSmetrics for more details about gender color preferences.
Start looking at sites in your niche or main topic to identify common color schemes
Or look at packaging designs for products in your niche category. For example, if your site is about eco or natural living, you’ll most likely see a trend of greens and/or brown color schemes.
Do a little research on your niche on the web and don’t worry about looking like everyone else. The idea here is to get a feel for the basic color schemes that seem to attract the type of market you’re going for. Then you can play around with varying tints and shades to get the perfect color combination for your audience that’s not a copy of what everyone else is doing!
Look Towards the Photographs You Use in Your Site
For example, if you tend to use a lot of photos with a retro, Instagram look, you’ll probably want to use softer, vintage colors for your color palette.
To help you find color schemes based on a favorite photo, Pictaculous has a great tool for this: Upload a photo and it will spit out a palette of the colors used in that photograph, complete with the hexadecimal numbers (see right) for those colors.
Which brings me to my next suggestion…
Browse Color Scheme Sites for Inspiration
In addition to Adobe Kuler and Color Lovers mentioned above, take a look at these great color tools and resources. You may just find a color palette already created that really speaks to you (and your audience).
They are 6 character codes, 0-9 and A-F, with a hashtag (#) in front of them.
The first two characters define the Red values, the next two characters define the Green values and the last two characters define the Blue values.
The lowest value that can be given is #000000 (black) and the highest is #FFFFFF (white).
Choose Your First Two Colors
When choosing your first two colors, it’s best to pick colors that are adjacent to each other on the color wheel.
These are called analogous colors. Choosing colors that are a slice or two over from each other will automatically blend well together.
The colors you choose should also be on the same “ring” (hue, shade or tint) or within a ring or two from each other.
Choose An Accent Color
Next, you’ll choose an accent color. This color will make your color palette “pop” and should be used in areas you want to draw attention to, such as emphasizing a call-to-action button or a sign up form.
This color should be brighter, bolder or darker in order to stand out from the first two colors you’ve chosen.
An easy way to choose an accent color is to choose a complimentary color. Complimentary colors are those that are on opposite sides of the color wheel.
Taking a look at my website here, you’ll notice that my main colors are mint green and spring green and my accent color is orange.
Although orange is not technically a compliment of green (pink is), it is near by on the color wheel and I’ve made it brighter to help it stand out a bit more without being too jarring.
The orange draws attention to the things I want you to notice when you’re visiting my site, like my email opt-in forms, call-to-action buttons and the headline on the home page.
Color Picking Tools to Help You Find Analogous or Complimentary Color Schemes
Web Colour Data will give you the hex codes used in any site as well as the colors used on the color wheel so you can see where they are in comparison to each other. Shown at right is the color data for my site.
It also shows you other sites which use similar colors. Try plugging your site in to see what other sites use similar colors and if you like the look and feel of those. Pay attention to the sites’ target audiences.
Another great tool is the Color Wizard. If you have one color that you’re sure you want to use but are having trouble picking colors to go with it, you can plug that number’s hex code into this tool and discover all sorts of color schemes based on the parameters you choose.
Finally, Add Tints + Shades
Now that you’ve chosen your 3 main colors (3 analogous colors OR 2 analogous colors + 1 complimentary color) start using these colors throughout your site.
You may find that you need darker (shades) and lighter (tints) versions of these 3 main colors to create contrast or draw more or less attention to something.
Play around with the colors until you find something you really like, but try not to use too many variations of your 3 main colors, else your color scheme starts to look too chaotic.
Please share your color scheme with us below (list your hex colors or provide a link in your comment)!
Do you have questions, comments or need a little guidance? Please comment below, I make every effort reply as soon as possible.
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!