Colour

Colour is the next key ingredient in the Identity. It sets the mood for a design and helps support the meaning of the content. The colours were chosen for the Pinwheel to be bright, fresh and suggest simplicity. Potentially intimidating or overtly masculine hues such as dark blue or red were avoided.

In addition to these colours is 'Soft Black', which should be used instead of black. Set all text on a white or yellow background in Soft Black.

Solid colours ¶

Contrast ¶

All of these colours have been designed to work as the foreground to a white or soft black background, or as a background with white foreground. The only exception to this is yellow, which should use soft black to ensure contrast.

Using the colour wheel we have begun using matching pairs in design across the website. Below are several examples of the ways our colours can be paired.

Generally speaking solid colours do not work in pairs, one should take dominace to produce a stronger contrast between the two. A solid colour with a tint 1 counterpart can also be used as an accent colour throughout a page. Analagous colour tints have also been used in design, several tints from the same colour, to produce variety in the page without an overwhelming and poorly contrasted design.

As shown below, there are several reasons a poor pairing can be made. Two solid colours or a pair of non complementary colours provide poor contrast and a poor user experience.

How do I use these colours? ¶

Don't use all of these colours together, and at full strength, as this would be over-powering. In particular, background shapes and patterns shouldn't be allowed to dominate content such as full colour photography.

Aim to use no more than two colours + one contrast colour (either white or soft black) in a design. Decide which of these two colours should be the dominant colour and which should be used sparingly as an accent. Use tints to extend the versatility of the colours.

Colour tints

The following tints are examples, and further steps in between each tint can be created as needed with SASS:

background: lighten
($color-blue, 30%)

background: darken
($color-blue, 10%)

The following chart shows the colour name and lighten value (unless otherwise stated as darken):

Transparency

These colours can be further extended with transparency - overlaying colours using multiply or screen blending modes with varying opacity. This can subtly enhance a design, giving it a feeling of illumination.

Multiply mode works well for white/light backgrounds, but on the soft black, screen works best, creating an impression of light in the overlap areas:

Colour palette downloads ¶

Use the colour scheme in Adobe applications by downloading the Swatch Library (.ase file) or in Sketch with the Sketch Library file:

iHASCO Colour Palette RGB (Adobe) iHASCO Colour Palette RGB (Sketch)