You don’t need to be a classically trained or highly qualified designer to pick great colors for your website. You just need a sense of adventure and a basic understanding of what works and what doesn’t.
Pair it up with some reference material to bring you up to speed on current research findings with regards to employing color psychology in your marketing communication and you will be set.
So, grab a coffee and read on to learn how to leverage the power of color to create more engaging and effective websites and more engaging communications in general.
Important Considerations When Choosing Website Colors
Does Your Website Need to Sync With an Existing Color Scheme?
If you’re lucky enough to have employed a professional designer to develop your company logo or stationery such as business cards etc. you probably already have a style card containing color references. These specific references should be passed onto your web designers to eliminate guesswork when building your website color palette and match them up with your existing brand colors.
This also has the added benefit of creating a great flow between your offline and online marketing materials. At the same time, it improves the consistency of your communications with new prospects, existing customers, and business partners.
What’s the Purpose of the Website?
If you’re trying to portray a certain image or create a certain emotional connection with your website visitors, it’s worth taking some time to plan around these objectives by brushing up on the psychology of color before you begin your design.
In general, each color evokes a specific mood. A brighter, warmer color such as red, orange or yellow have a tendency to energize a user and make them more alert. While darker, cooler shades such as green, blue and purple tend to have a more relaxing and tranquil effect on the user.
So, how does this apply to your website design? If you’re a funky, edgy and active brand, such as www.glowvibegolf.com employ brighter, more vibrant colors to create an energetic mood. But if you’re a spa or wellness clinic like www.officialmedispa.com, you’re better off using a more muted color palette made up of cooler, more calming colors.
What Kind of Photos and Graphics Will You Incorporate Into the Site?
If you plan on building your website around a certain set of images, then it’s probably best to build up a color palette based on the content of your images. Or, if your images are regular photos and don’t quite mesh with your existing palette, consider using a color photo filter to tweak your images for better cohesion and integration with your color choices. This image photo filter technique is something that is often overlooked and exactly the kind of attention that can take your web design from good to great.
The type of graphics, photos and images you use on your website make a large impact, so make sure that they convey the right message and set the right mood for your audience. Set the right tone, create the right mood and deliver the right message and you’ll be well on your way to a great website design that leaves a favorable lasting impression on you users.
Is It Time to Update Your Colors to Leverage Modern Design Trends?
Sometimes, it will be necessary to rethink your color palette. Design trends come and go, and if your business created an identity that was subject to one of these, then it may be time to consider an update.
What worked for your company before may no longer be applicable. Design styles, user preferences and consumer opinions change and if you’ve fallen out of touch, color is a great way to reinvigorate and reconnect with your marketplace.
Don’t make the mistake of being overly attached to a logo or wordmark which is out of date, echoing this through your new website design is a recipe for poor messaging which holds very little emotional impact and hence, poor engagement and conversions. If it’s time to update your logo colors, review the infographic Coulour Psychology in Logo Design before you do, it’s invaluable guidance.
How Many Colors Should you Use?
As a general guide you should pick three different colors and use them in ratios of 60%, 30% and 10% respectively.
The 60% will be the primary color of your site and set the overall tone of your design.
The 30% should contrast with the 60% to create a visually striking effect.
The 10% is an ‘accent color’, which should complement either your primary or secondary color.
Leverage Shades and Tones for Greater Variety
In many cases, you will need to diversify your palette beyond your three basic elements. Rather than add a fourth and fifth color to your site and risk spoiling the harmony of the design, try leveraging different shades and tones of your existing colors to create additional color options.
For example, the image below, courtesy of www.flatuicolorpicker.com, portraits different shades of blue.
Use Free Color Picker Tools to Help You Choose an Effective Color Scheme
Coolors.co – A great looking and simple color palette generator with some cool features, including the ability to lock-in color choices while generating new ones and the ability to save them for future reference.
ColorLovers.com – AA community-based platform for sharing color ideas and inspiration. A never-ending assortment of amazing color palettes grouped by theme makes it easy to find some inspiration.
Design-Seeds.com – If you’re planning on using one main hero image as a source of inspiration for your color palette, then you need to check out their site.
Adobe Color CC – Formerly Adobe Kuler. This is a great tool if you’re selecting your color palette from scratch and want to experiment with different color rule combinations to find your ideal color scheme.
3 Strategies for Generating Colour Palettes
1) Start with a Blank Canvas
If you’re building a new brand, or rebranding, starting with a blank canvas can be a good way to start fresh. In cases like these use color tools such as Adobe Color CC or Coolors.co to experiment with various color combinations and color harmonies until you find your ideal color palette. The built-in design rules ensure a harmonious result built up with colors that work well together.
2) Start with an Image
If you’re building your website around the main hero image, or central image concept, then it’s often a good idea to generate the website color palette from that image. Sites like Design-Seeds.com are a great place to explore image based color palettes, or generate new ones based on images you already have.
3) Start with Business Goals
If you have pre-existing intellectual property documents or assets such as a logo, use it as a starting point for the development of your website color palette. Then, it’s probably best to base your color selection on business goals and values you’re trying to communicate with your audience. In instances such as these, having a color psychology chart or well-designed infographic on hand can guide you through the process.
In the infographic below you the find the psychology of colours pertaining to Call-To-Actions. And For more Information on Colors in Web Design check out The Art of Colour Coordination Infographic.
Give Colors the Attention They Deserve
Well, there you have it, time to refill your coffee cup, roll-up your sleeves and crack open a fresh perspective on just how important colors can be when used intelligently in web design projects. Color is a subtle, but very powerful aspect of your web design, give it the attention it deserves. By setting the right mood, creating the right emotional tone with your users, you’ll be well on your way to a website which is both attractive and highly functional. Back this up with quality copy and conversion centered design for a website which converts like gangbusters.