COLOUR AND DESIGN FOR THE WEB:

Selecting a colour palette for your website

If you have a logo, you may want to colour coordinate your website colour scheme with your logo or primary graphic; this may mean complimentary colours or it might look great with contrasting colour to make your logo 'pop'.

Some of the colours you'll want to consider are your page background and text - these must be contrasting colours - for example a black background with yellow text, or a white background with black text. Websites that have mainly images may find a dark background looks best, while text dense websites will likely prefer a light background. A dark background is considered more environmentally friendly since it requires less electricity to display, and creates less light polution and waste heat. You may wish to select only one colour for your text, and use that for your body text and titles too, or you may want to consider alternative colours for titles. You need to find a colour scheme for your links too - a colour that contrasts well with your background, and also is distinct from the text colour you've selected. The convention that blue text is for links before they are clicked and purple is for links already followed, but you can select any colour that gives good contrast with the text and stands out nicely against the background colour.

In addition to selecting colours for the background, text and links, you may also want to select a few additional colours for design elements like keylines used for spacing, or backgrounds to give emphasis to your navigation tool or other apsects of your page content.

Look for a palette of colours that inspires you, attracts your eye, or reflects how you feel about your business. Or if you don't personally have strong feelings about colour choices, look around at your competitors websites and see if there are colours that are commonly selected in your industry - if you google 'color palette by industry' or 'psychology of colour and branding' you will get some interesting insights! For more practical colour palette ideas, try the online resources below. And remember, HTML uses American spelling, so in code, colour is color - and that might be helpful when searching too!

Online tools to help you select colours:

http://www.colourlovers.com/

http://www.sessions.edu/color-calculator

https://color.adobe.com/create/color-wheel/

http://color.hailpixel.com/

http://galacticmilk.com/sphere/

https://coolors.co/

http://www.design-seeds.com

Paletton.com Colour palette selection tool

Back to the Website Articles Page - Back to the Main Page