Define the colours

1. Define your primary colour

Find your colour!

Which adjective represents you, your products or your company best?

The product or service I offer is …
I’m …

Click on an adjective to find out more about the colour.
Don’t have Flash Player? See a text version.

Evoke associations

Which feeling do you want to evoke in people visiting your website?

I want to make my website visitors feel …

Click on an adjective to find out more about the colour.
Don’t have Flash Player? See a text version.

Take a choice

You now have one or two colours that could be your primary colour.
Choose the one that you like more. You can use the second colour later in addition to the primary colour, if they go well together.
Write down your primary colour as simple text.

2. Find the right hue

Now that you know your primary colour you have 2 possibilities to find the right hue of your colour:

  • Look around in nature for a hue of your primary colour (for example green) and take a picture of it, or surf around on the web and download an image with a hue you like. Than upload the image to www.colorexplorer.com or www.colourhunter.com.
    These tools will show you a colour pallet based on the picture you uploaded. Choose a hue of your primary colour.

 3. Copy the hex code

hex code #009900 Every colour is defined by a RGB value (000000–FFFFFF) such as #009900 called “hex code”. Copy and save the hex code of your primary colour’s hue. You will need this hex code later to create a harmonious colour palette.

4. Create a colour scheme

Insert the hex code of your primary colour into the colour scheme designer www.colorschemedesigner.com and play around with the colours by adjusting the schemes and hues for different models.
Play with your primary colour to create a harmonious colour scheme with maximum 4 additional colours or hues. You can always view a page sample where the colours are applied on a light and a dark page example.

5. Choose three main colours

Define 1-3 colours from the colour scheme you want to use for your website.
Save their hex code. The code looks like #6B9900.
This are now the three colours you will use on your website in addition to the neutral colours black and white. Don’t use more than these three colours.

6. Match the colours to your website elements

Important elements should use more contrast to emphasize and lead the reader’s eye through the page.
Use the “Colorblind” option on www.colorschemedesigner.com to find out which one of your colours has the highest contrast. Choose “Full colour-blindness” to see your colour scheme in a grey scale mode. The darkest colour on the grey scale mode is the one with the highest contrast.

color blindeness scheme
How to match the colours?

  • The page header uses the colour with the highest or second highest contrast. It depends here a bit on the model you chose. Maybe you want to use the colour with the highest contrast only as a highlighting colour for buttons.
  • The global navigation uses the colour with the second highest contrast after the page header. The active (selected) element on the navigation should use a darker or lighter shade of the colour to provide emphasis.
  • The utilities have to be visually weaker than the rest of the page and should use a lighter shade of the page header colour.
  • The scan columns use the colour with the third or fourth lowest contrast. They should be visually weaker than the page header and the navigation.
  • The content area uses a light background colour and black or dark grey as text colour.
  • The page name uses a colour with high contrast. This can be black or dark grey or you can reuse the colour of the page header.
  • The page footer uses a colour with low contrast similar to the content area.

Don’t invent more main colours! It’s very difficult to use more than three colours effectively. Work only with darker and lighter shades of your three main colours.

How to find darker and lighter shades of a colour?

  1. Go to www.colorexplorer.com
  2. Click on “Colour Picker” and create a new palette by adding the hex codes of your main colours with the Colour Picker.
  3. Click on “Add to palette”.
  4. Click on “Colour Matching” and select the colour you want to be the basic colour for the new shades.
  5. Choose the Colour Matching Algorithm “Single Hue” to display some darker and lighter shades of the selected colour.
  6. Copy the hex code of the shade you like.

7. Save the colour codes

Now that you have defined all your colours with their different shades, save their colour hex code. Every colour has a hex code which looks like #225928. You will need this hex code later to change the colours in your design template.
Write down the colour codes you chose for each element and save this document.
This will look like:

  • Page Header: #7f004f
  • Utilities: #801958
  • Global Navigation: #6a9900 and #476600 for the active element
  • Scan Columns: #aacc5b
  • Content Area #e9e9e9
  • Page Title: #7f004f
  • Page Footer: #e9e9e9
  • Boarders: #999999
  • Background: #FFFFFF

Related links

Advertisements

One thought on “Define the colours

Post a comment or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s