Recently at Zabisco we’ve had a few projects with colour theory at their centre. Including a review of our own branding! The question we’ve been asking ourselves here is:
In this post I’ll create a fictional brand colour range. Let’s say we had the challenge of keeping a website design to this fixed colour proportion:
Using Secondary Colours
We decided that a secondary colour would need to be incorporated into the design for better usability, as a visual key and to highlight hover states and other effects on the site. The obvious choice would be to use the brand colour predominantly and use this secondary colour for smaller accents. However, is this the only option?
Secondary colours Used as Primary Colours?
There are a number of reasons for our decision to switch things around and not use the colours as you’d expect. As the brand was already established, and the colour was strong and familiar it made sense to use this to draw the user’s eye straight to key elements on a page. As such, the secondary colour would take all the hover and action duties on the page. The page wouldn’t be oversaturated with the main brand colour, which has the effect of consolidating and enhancing it, rather than detracting from it. Colour diversity can help to establish a stronger brand identity.
Choosing Secondary colours
This is the most important part of the decision to diversify a brand palette. How do you select a secondary colour and how does it stand against your main colour? Well, there are a number of options:
An analogous palette will pick out similar colours to your base colour. These can then be used as highlights. An advantage to this is that these elements can be used adjacently as they will not clash or contrast at all with a base colour. In terms of web design, a sufficient contrast isn’t reached with this method to pull out differing styling.
A complementary colour palette will give you a very simple theme. An obvious example of a complementary palette is the greens and reds that one associates with Christmas. This is the most obvious colour association and is often a little garish. Web design requires a certain element of contrast to draw the eye through a design and to its main elements.
A contrasting colour will clash with your main colour which makes them difficult to use if applied together, with our use, however, they would be used independently on buttons and as text colours. However, they will also have the same lightness which will ensure they’re equally readable. Good use of contrasting colour will be attractive and effectively eye-catching.
Using the contrasting method we end up with this modified branding palette:
This choice sits nicely next to the other branding colours, but differs sufficiently enough from the base colour to create a great on-page contrast. The colour has been modified a little to ensure that it can be applied as a text colour as well as a background colour for text. The colour is attractive and stands alone well; however, the main brand colour still stands out, justifying our choice to use it more sparingly.
In conclusion, there are a number of obvious UX reasons for using several colours on a page, to highlight elements and to guide a user’s journey. And from a design perspective, it is important to choose these colours with reference to creating sufficient contrast and interest without distracting from, or overshadowing your base colour.