Website Colour Schemes – A Tutorial

Website Colour Schemes

So you’re starting a new website, a new company, or a new brand. You need website colour schemes that work for the web, are professional and look great. Here is Kestrel Design’s easy step-by-step tutorial on how to make a colour scheme.

The basics

This first step for creating website colour schemes is easy. Choose white for your background and combinations of grey and black for your text. There are lots of reasons why you should choose this monochromatic scheme for your main colours. We like this article’s explanation of some of those reasons: Psychology of Black and White and What They Mean for Your Business. Black or grey text on white is easy to read, traditional, and professional looking.

Grey #7A7A7A

Add your brand colour

Next, add your main brand colour(s). Kestrel Design suggests adding at least two – choose a lighter or darker version of your main brand colour if necessary. In the colour scheme below you can see we have added two shades of teal-blue.

If you don’t yet have a brand colour then why not find a colour using this online colour picker tool. The hex code is the code starting with an ‘#’ sign.

Grey #7A7A7A
Teal 2 #84B8B4 (Main brand colour)
Teal 1 #B8E0DE (Main brand colour, lightened)

Add an accent colour or two

Finally, take the complimentary colour from your brand colour. To find the complimentary colour, pick the colour which is opposite to your brand colour from the colour wheel. So the opposite of a blue colour will be orange, the opposite of a red will be green etc. Feel free to move left or right a little to find a colour that feels good to you.

Color Wheel - how to make website colour schemes

In our scheme, that accent colour is orange, and because our teal is quite a muted blue, we have selected a brighter orange to create a highlight. This accent will only be used in very small amounts.

For a second accent, we have chosen a colour that is near to our accent colour on the colour wheel – in this instance a yellow. Again, this colour will only be used in tiny amounts so feel free to make it a bright colour.

Grey #7A7A7A
Teal 2 #84B8B4 (Main brand colour)
Teal 1 #B8E0DE (Main brand colour, lightened)
Orange #FA8925 (Opposite colour)
Yellow #F2DEA0 (Opposite colour’s neighbour)

Using your Scheme

Set your background to white, then make your text grey and black. Try grey for paragraphs and black for headings. Make links, highlight backgrounds and banners your main scheme colours. Finally, add small pops of your accent colours – try using them highlighted text, bold text and call to action buttons.

Having a colour scheme designed for you

Kestrel Design will design a colour scheme as part of your branding, but we can also design a colour scheme for you from scratch or based on your current company logo or branding. Please get in touch with us using the form on the homepage, via Facebook or by emailing

Social Media Workflows – a roundup.

Social Media Workflows – a roundup.

During this week we’ve posted three infographics to show social media workflows to build a strong presence – for daily general use, to promote a new product, and to promote a new video. This post is a quick round up to link to all three.

Free Social Media Workflows

Workflow for maintaining your social media presence: 1st of 3
Workflow for marketing a new product: 2nd of 3
Workflow for marketing a new video: 3rd of 3

The social media workflows are based on having a newsletter which can automate welcome messages based on where the sign up occurred so that free giveaways can be tailored to new subscribers. Kestrel Design recommends TweetDeck to manage your twitter account(s) so that you can easily track mentions, messages and notifications. Multiple accounts on Facebook and Instagram are easily managed via the native apps or Facebook’s website.

The social media workflows also assume you have a blog to post your content, new products and new videos to. A blog post is useful even if your videos and products are elsewhere on the Internet as it provides a focus for your links, a place to encourage new subscribers and a holding area for associated content such as PDF downloads. You can set up your website to handle membership levels to offer content only to paying members if you wish.

So integrate together your blog, newsletter, product pages, video site (such as youTube), twitter, facebook, pinterest, instagram and more by following the social media workflows to create a strong brand and an integrated, cohesive presence.

Tweet this: Social Media Workflows- 3 free infographics to follow for strong management @kestreldesign

Workflow for marketing a new video: 3rd of 3

Workflow for marketing a new video: 3rd of 3

New Video Workflow

We’ve created a set of 3 infographics to show how to maintain a social media strategy as an individual, small brand or small company. This last one is for marketing a video you have created for youTube, vimeo etc. Video is a powerful tool for brand building, getting content seen and for engagement. Here we show how you can build a solid social media presence around that video.

Workflow for marketing a new video


Workflow for marketing a new product: 2nd of 3

Workflow for marketing a new product: 2nd of 3

New Product Workflow

We’ve created a set of 3 infographics to show how to maintain a social media strategy as an individual, small brand or small company. This second one is how to build a solid marketing strategy around a new product. It concentrates on enticing a customer with a freebie that is related to the product. Here the workflow can help you in two ways – entice the customer to purchase the ‘full’ version of the freebie, and it also gains new subscribers for your mailing list.

Workflow for marketing a new product


Workflow for maintaining your social media presence: 1st of 3

Workflow for maintaining your social media presence: 1st of 3

Social Media Workflow

We’ve created a set of 3 infographics to show how to maintain a social media strategy as an individual, small brand or small company. This first one is how to keep up a general social media presence daily if possible, but at the very least once a week. The infographics describe how you should spend your time when dedicating time to grow your followers or customers.

Workflow for maintaining your social media presence

How to Design and Color a Profitable Landing Page

Brian Jens writes this fantastic guest post at Kestrel Design all about designing a great website landing page. Find out the purpose of a landing page, the ideal structure and a glance into design colour theory.

What is a Landing Page

The ultimate purpose of any landing page is to make visitors commit a target action – subscribing, buying goods, ordering services, or any other. As a rule, a landing page is the first page that visitors see when coming from search engines, social networks, and advertising banners.

Since the main objective of a landing page is to call visitors to a specific action, all measures are focused on this single purpose. The impact on the user is enhanced by certain design elements of the site and text messages. Almost every website owner knows how to create a landing page, but very few can do it in the most effective way.

Being a designer at DesignContest, I’m often questioned about how design influences on landing page effectiveness indicators and how to design a landing page to make it profitable. To help you a little bit, I’m going to share what I’ve got from years of experience. So, let’s start.

Any landing page undergoes some Search Engine Optimisation (SEO), that is, it got optimized for certain keywords which lead visitors to the page. As a rule, the target result of such visit is to convert a visitor into a client of the company.

Thus, landings are very effective for promoting any specific types of products or services, as the user’s attention is narrowed to a specific proposal, in contrast to the classical sites, where attention is dispersed on the whole area of activity of the company. The logics of landing pages is built in such a way as to quickly supply the user with all the necessary information to make a decision.

The Logics of Landing Page Structure

  1. Intuitive and short title. This is a short text at the top of the page, by which a user immediately understands the theme of the website. The title must correspond to the search phrase by which the client has come to you; otherwise, he may get confused and leave the website.
  2. Clear and short Call to Action (CTA). It’s a red line going through the whole landing page. The key point is to highlight the steps that the user must pass to perform the desired action. Be sure to make CTA buttons visible and understandable.
  3. Eye-catching design. The design of a landing page should attract attention and focus users on the most important information. There are some important tips on landing page design:
    1. Large and readable fonts of headers.
    2. A lot of free space and no superfluous elements.
    3. Buttons, arrows, and other bright and eye-catching graphical elements.
    4. Contrast colors for certain components of the page.
    5. The proper order of graphical elements regarding visitors’ behavior.
  4. Proof of necessity of goods or services.
    1. Clarification of the guarantees, the pros, and the way of solving problems with the help of the presented product or service.
    2. Feedback from satisfied customers.
    3. Awards and certificates confirming universal recognition.
  5. Selling texts. You can make a beautiful design and thought-out logic of the page, but if the text does not inspire potential clients, then CTA won’t work, and everything else will come to nothing.
  6. A sense of shortage.
    1. Special discounts or events that are about to end.
    2. The number of remaining goods for sale at the moment.
    3. Counters for the number of days/hours/minutes remaining to the end of the offer.
  7. A free/trial version of the product or test period. If such option is possible in your business, then safely offer customers the ability to test the product before purchasing.

Color of CTA Buttons

Of course, one can’t ignore color perception since human subconsciousness determines the level of sales to a large extent. CTAs work best in bright and attractive colors like red, yellow, and green. Shades may vary, but such combination is the most appropriate to boost conversion.

Sometimes, to draw the attention of a visitor to the desired area, you have to direct the client to the desired area with the help of graphic elements. Icons, arrows, and pictures may have a positive impact on the conversion, but it is important to limit the number of such buttons to the reasonable.

The situations are different: sometimes it’s more effective to use shades of purple or any other color. You should proceed from a combination of factors and be flexible in decisions. One of the best approaches to find out colors that work best is A/B testing. Only practice will help you to identify the best color that will have a positive impact on sales.

Landing pages are increasingly gaining popularity; they are convenient for the promotion of certain types of products because they allow you to differentiate the audience quickly on a variety of criteria and get suitable information for a particular audience. Often, landing pages can be used as a separate introductory stage to collect data from potential customer data, to plan future marketing campaigns, and to define the needs of an average target customer. Large companies can produce dozens of landing pages for their individual products, services, and separation of different audiences.

I hope you’ve got an understanding of what landing page is, and how to make it profitable. Feel free to share your personal experience in creating and adjusting landing pages.

About our guest poster Brian Jens:

For many years, Brian Jens had been a freelance designer, but finally, he employed at DesignContest. However, Brian did not give up carrying out an in-depth research of design market. Feel free to share your ideas with Brian and get articles of great value as a reward.