How to Select the Perfect Color Scheme for Your Website
Colors play an important role in conveying specific emotions and associations, so it's important that you put some serious thought goes into choosing the perfect color palette for your business website. The colors you choose evoke feelings before the viewer even has time to read your business's tagline. Picking your color scheme is a key part of building your website and your business's online reputation.
In order to make the most educated decision about your site's color choices, here are some tips to ensure you engage viewers from the first second they land on your site.
1. The colors should reflect your overall business not just your website
Your website is an extension of your business, so your chosen color palette should be in line with your branded colors. Whether it's the colors in your logo or colors used in your marketing materials, make sure you use those same tones on your website. Consistency is key for building a recognizable brand, and when all of your materials match or are complementary, it can improve the public perception of your business.
Target is a prime example of a business with consistent brand colors across its print and digital marketing efforts. The website clearly features the logo and incorporates the suite of colors associated with the brand: red, white, and black. Other colors are present, but there's enough white space to allow the branded colors to stand out on the page. In any print piece, these three core colors will stand out and communicate Target's underlying mission and identity.
Image courtesy of Target
Keep your business's vision and brand promise in mind while selecting colors for your website.
2. Choose a dominant color for your brand
If you don't have branded or pre-set colors for your business, determine the stand out color for your brand - this is the color that will be the beacon of your brand and become associated with your business.
As you can probably guess, Target's red is the dominant branded color. This is the kind of quick recall you're looking to build when selecting your dominant color.
Colors have meanings, which vary based on culture, so picking the perfect color scheme for your business goes beyond aesthetics. Evoking the proper emotions, feelings, and sentiments from your color choice is of equal importance to the words you put on your page. Thankfully you don't have to figure out which colors mean what - Avangate put together the following list of common color associations and took the leg work out of deciphering which colors best suit your brand identity.
- Red: energy, passion, excitement, power; also implies aggression, danger.
- Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression.
- Yellow: light, optimism, happiness, brightness, joy.
- Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity.
- Orange: friendliness, warmth, approachability, energy, playfulness, courage.
- Violet: wisdom, sophistication, celebration.
- White: purity, cleanliness, youth, freshness, peace.
- Black: power, elegance, secrecy, mystery.
- Gray: security, maturity, reliability.
- Pink: romance a feminine color.
- Brown: comfort, strength, stability, credibility.
Reference these common meanings when choosing the website's primary color.
3. Add 1-2 accent colors to complete your color palette
Based on your choice of dominant color, your website should include one or two accent colors to round out the palette. These colors should be used for navigation panels, Call to Actions, and other places where you want to draw the viewer's eye and have them do something on your site.
Accent colors are often seen on buttons, such as Sign Up or Read More, and in drop down menus.
How do you know which colors actually complement your dominant color? There are tools that let you design a color palette that is aesthetically pleasing and on-brand.
ColorJack and AdobeCC allow you to create your own color palette off of your dominant color. You can even start with these tools when deciding upon a dominant color. These resources give you a variety of palette choices based off of your color preferences and give you the exact Hex codes so you'll always get the precise color you want when you're relaying your branded colors to designers or outside vendors.
Image courtesy of ColorJack
Image courtesy of AdobeCC
If you're feeling stuck, check out these 50 inspirational color palettes from Digital Telepathy - they're certain to get your creative juices flowing and assist you in creating a custom website palette.
4. Background color to complete design
Your website's background color is the last component of your color scheme. The background color needs to work in tandem with your other colors and provide a strong contrast against each of them. When a good background color is utilized, viewers can easily read the text, see the logo or design elements, and understand the website's message. A background color should be complementary and not compete with the other branded colors.
It's very common for white to be used as a background color because it builds in essential white space and creates the illusion of space for the reader. If white isn't the best fit for your business, then try other softer colors so they don't detract from your dominant and accent colors.
5. Use your colors proportionately
The 60-30-10 rule is a design philosophy that provides proportion to your color scheme. It dictates that the dominant color should represent about 60% of your website's space, while the secondary and tertiary accent colors should cover about 30% and 10% of your page, respectively. If your dominant color is turquoise, it doesn't mean 60% of your site needs to be that color. Instead use the rule as a ratio when utilizing your suite of colors. It will help maintain a balance, while incorporating your background color, and other images and graphics you choose to incorporate into your site.
Once your website's color palette is set, you're ready to roll. Get those colors into your website builder and bring your vision to life through your site. You'll be amazed what the perfect suite of colors can do for your business.
Main image via Pixabay
Follow Julie Chomiak on Twitter