Colour Scheme Designer

ezguide
easy to follow step by step guides

Summary

The colour scheme designer is a powerful but very simple tool enabling you to personalise the colours in your website by creating a professional colour scheme to use throughout your pages

Introduction

All designs come with a standard colour scheme created by our designers to achieve a professional harmonious effect and to suit the imagery used in the design. The latest designs, such as Social colourMAX also come with alternative themes including different imagery and colour schemes to match. You are not however restricted to the colours in these schemes, and this Colour Scheme Designer allows you to change them to suit your own images (see the EZ Guide Customising a Logo) or just to match your business colours or personal preferences. This guide contains the following sections.

What do we mean by Colour Scheme?

Designing a colour scheme is not exactly the same thing as just choosing colours as you go through your website. If you pick colours on an ad hoc basis as you write and update your website contents, its very easy to end up with a mishmash of style that is untidy and offputting for your visitor. Much better and more professional, is to think ahead about the types of content you will be using, and choose a colour for each that you apply consistently. The Colour Scheme Designer makes this very easy to do, by allowing you to set colours for these frequently used elements of typography:

  • Sub Headings - Use these to summarise what follows in a new section. Click for more information about Sub Headings.
  • Standard Text - Used in your paragraphs and bullet lists
  • Linknotes - You want links to stand out so people know they can be clicked. Click for more information about Linknotes.
  • Quote Boxes - Testimonials, quotes or key messages need their own space to stand out and to make it clear they are separate from normal text. Click for more information about Quote Boxes.
  • Emphasised Text - You will occasionally want to emphasise a certain word or phrase either within a paragraph of text, or as a minor subheading. Click for more information about Emphasised Text.
  • Menu colours - The menu requires a consistent colour scheme to aid navigation and make clear which page is active.

Using the Colour Scheme Designer you can set a colour for each of these, and then by using the appropriate code in your content you can create subheadings, Linknotes, emphasised text etc.

Caution

Remember that each typographic style has a purpose and if you use it for that purpose you will enhance the professionalism and readability of your website. However, you can make a website look worse by using these styles inappropriately.For example, just because you find Quote Boxes an attractive feature don't overuse them or use them for normal text. Similarly don't emphasise everything or you end up with nothing emphasised! Remember, less is often more, and its better to allow your words to communicate your message rather than distracting the reader with unnecessary frills.


Remember - Less is often more.
 

First Use

The first time you use the Colour Scheme Designer you will be presented with a message like this.

Just click Create a new colour scheme and the designer will appear below. Note that our system has a storage area to hold only one set of colours, and which is linked to a specific design. So if you set a colour scheme for one design , say Social colourMAX, and then switch design to say Mobile colourMAX, the Mobile colourMAX design will be shown with standard colours not your customised colours. If you were then to customise the colours for Mobile colourMAX and switch back to Social colourMAX, the colours would revert to standard. In other words you can't have two customised sets of colours for two different designs.

Layout of the Designer

Now you will see the designer, looking something like this.

The explanatory text in the right hand panel should tell you everything you need to know and the basic usage is very straightforward. Roll your mouse over the preview on the left and click the colours you want to change. A colour picker will pop up in the right hand panel allowing you to change the colour which will update live in the preview. When you are happy with the colour pick OK. For example here's a screenshot as we change the blue heading area to a darker shade.

Once you have made all your changes click Save Changes at the top of the page.

Limitations

Although there is a lot of flexibility with the designer, some limitations were necessary to avoid overcomplicating the system and for technical reasons. After a while you will find there are two types of situations where you don't have complete control over colour.

  1. Linked Colours This occurs where the same colour is used in two parts of the website. It varies according to the design. In the above example, the dark blue footer bar is the same colour as the heading area. If you click and change either one, both will change.
  2. Locked Colours Some colours are simply not changeable. In the above example the area behind the text is locked to white.

You will find that if you try to change a linked colour or locked colour a message will appear in the right hand window like this.

Not happy with limitations?

If it is important that you have complete control over colours there is an alternative, which is to use the services of one of our design partners. It probably is not worth it if you want to change just one colour due to the effort involved in recoding the design, planning and coding for all scenarios (such as differences for mobile) and testing for unexpected side effects.  However, if you want something highly individual and distinctive our designers have a lot of flexibility to create a design to meet your needs.

More Colours With Spectrum

In the above simple example we picked a different shade of blue from the palette of options, but you can get even more fine tuning of colour by clicking the more button which reveals the spectrum colour chooser.

With the spectrum open, you can click anywhere in the graduated colour box and drag the black circle where you like to select the exact shade you want. You will spot that moving to the right makes the colour richer and more vivid, whereas to the left the colour is greyer and more muted. Similarly moving up makes the colour lighter or paler until it is almost white and moving down makes it darker until it is virtually black. In the top left the colour is always white and in the bottom right its always black.

In the above example all the colours are shades of blue, but if you'd like a shade of red just drag the slider bar up or down the right hand rainbow column. This slider bar changes the hue, and the spectrum changes the shade. It will take a little getting used to, especially if you're looking for earthy colours like brown - move the slider to around the red/yellow border and you'll find brown in the orangey shades of the spectrum.

Creating Harmony

Now that you know how to change inidivual colours, you need to give some thought about your overall colour scheme. Here are a few tips:

  • Start with your main image. Pick one or two colours from there so that the colour scheme matches the picture
  • Stick with just one or two hues, and create different shades of them for a professional harmonious colour
  • For a professional clinical image choose more muted colours with the occasional vivid colour as an accent. If you want to express more vibrancy or personality use more vivid colours

Tip - Choosing shades of a similar colour

Follow the steps in this example to see how you can create a palette of harmonious colours. Let us assume we want an earthy green looking design overall to match a landscape scene photograph.

  1. We'll start with the heading area. Click more to open the spectrum and drag the vertical slider to the green area. Now pick a nice deep shade of green.
  2. Now we'll work on the Linknotes/Accent colour which also changes the "action" boxes Call and Email, so click on the linknote text. Note that the green I chose in step 1 is now in the top row of my palette underneath the heading Current colours in design. Click to select it and then choose a more vivid shade to convey action.
  3. Let's make the active menu button the same, so click that and select the bright green we just chose
  4. Subheadings can be an earthier shade of the same green so click the subheading text in the preview, choose the same green as step 3, and move towards the bottom left a little in the spectrum to choose  a more muted colour.
  5. Text will also be based on the green too, but I'll go more bottom right for a blacker version
  6. For emphasised text we'll got for an even earthier colour but for variety I'll move the slider up to the orange/yellow hues and then pick an autumnal colour
  7. Finally the menu text will be based on the same green hue as earlier but a pale grey version

If you follow the above example you'll end up with something like this. Don't forget to click Save Changes at the end !

We'd recommend following this example through, as it is a good procedure for creating an overall look that works. Once the scheme is done, it is a simple matter of using the appropriate codes for Quote Boxes, Emphasised Text, and making use of separate paragraphs for subheadings and your content will automatically style in a consistent professional manner.

You have a colour scheme, now what?

As soon as your new colour scheme is saved, you will see most of the colours on your live website update immediately. Here are a few tips to ensure everything works just as you are expecting.

Remove HTML codes for <FONT COLOR

If you have coloured any items of text using the above HTML code, now is the time to remove it as it will override the new consistent style you have created. In addition the HTML code FONT is being phased out as valid HTML and in future will stop being recognised by browsers, in favour of this new style of colouring. If you want to colour individual items of text use the <EM> code as explained below.

Use Paragraphs to make Subheadings

A subheading is just a line of text to introduce and summarise a section, but it helps if all subheadings have a consistent style for ease of reading. You can use the HTML codes for bold and big, but its much better if you create paragraphs using the Paragraph Control Tool and then give each paragraph a subheading in the dedicated subheading field (see below for an example). This way all your subheadings will have a standard enlarged size and will be automatically coloured according to your new colour scheme.

Use the EM code to emphasise text with colour

When colouring text, consistency is important to ensure a professional appearance that aids reading rather than obstructs. So even if you have a fondness for the vibrant and multi coloured, remember your readers. By defining a single colour for emphasised text, you no longer need to think about what colour to choose for emphasised text, you just wrap the text in the EM code and all emphasised text will take that colour from your scheme (see below for example). In future if you decide to change the colour of emphasised text, change it once in this Colour Scheme Designer and it will change throughout your website, which makes life much easier!

Linknotes and Quoteboxes

The other typographical elements which the Colour Scheme Designer allows you to choose colour for are Linknotes (clickable links to other pages of your website or other websites) and Quoteboxes. We have more information about creating and using these in other guides. See the Quoteboxes guide or visit the Linknotes section of our Help Guide.