Colour Selector

Using this tool:

This tool is used to help determine colours to use in branding. Three root colours are defined; “Primary”, “Secondary” and “Accent”. Each has two variations. To keep colour consistency, variations should only be Saturation or Brightness. The Colour pickers used are HTML5 elements. For best results select the left column colours. When adjusting the other columns, change to HSL mode, only adjust saturation and/or brightness.

Setting the “Saturate By” and “Brightness By” will apply these as defaults when the root colours change (left column).

Changing the colour with the left column colour picker; the Saturation and Brightness variants automatically change.

Primary

Most Dominant Colour.

Primary V1

Variation 1

Primary V2

Variation 2

Secondary

Alternate Colour.

Secondary V1

Variation 1

Secondary V2

Variation 2

Accent

Highlight Colour.

Accent V1

Variation 1

Accent V2

Variation 2