Colour :: UI Elements

Summary of features

Colour is at the heart of COLOURcode and will suit any application type, but in addition has been specifically designed for those who like to use colour to boost usability through context and association. For example, you could have red for financial data or blue for customer data. Achieving a well-balanced palette of colours over a wide range of hues, saturation and lightness is a complex process, which is why the SASS base colours all reference these basic components of colour (but you can use hex-triplet values if you prefer).

At a glance

All colour-sets based on single SASS-variable base colours.
Choose from up to ten named and two branding colour-sets.
Ten COLOURcode colours can be easily changed through HSL or Hex.
Brand1 and brand2 colours can easily be altered to suit a brand.
All of this is in addition to Bootstrap's five contextual colours.

The balanced spectrum of colour classes available, as used throughout the template

Example useage: panel body text	Example useage: panel header text	Example useage: button background	Example useage: panel header background	Example useage: panel body background	Example useage: table stripes background	Example use: panel borders
blue-darker	blue-dark	blue (base colour)	blue-light	blue-lighter	blue-very-light	blue-border
yellow-darker	yellow-dark	yellow (base colour)	yellow-light	yellow-lighter	yellow-very-light	yellow-border
red-darker	red-dark	red (base colour)	red-light	red-lighter	red-very-light	red-border
green-darker	green-dark	green (base colour)	green-light	green-lighter	green-very-light	green-border
orange-darker	orange-dark	orange (base colour)	orange-light	orange-lighter	orange-very-light	orange-border
purple-darker	purple-dark	purple (base colour)	purple-light	purple-lighter	purple-very-light	purple-border
gold-darker	gold-dark	gold (base colour)	gold-light	gold-lighter	gold-very-light	gold-border
bronze-darker	bronze-dark	bronze (base colour)	bronze-light	bronze-lighter	bronze-very-light	bronze-border
silver-darker	silver-dark	silver (base colour)	silver-light	silver-lighter	silver-very-light	silver-border
grey-darker	grey-dark	grey (base colour)	grey-light	grey-lighter	grey-very-light	grey-border
brand1-darker	brand1-dark	brand1 (base colour)	brand1-light	brand1-lighter	brand1-very-light	brand1-border
brand2-darker	brand2-dark	brand2 (base colour)	brand2-light	brand2-lighter	brand2-very-light	brand2-border

Text colours on a white background

This text has been coloured blue using the .text-blue class.

This text has been coloured yellow using the .text-yellow class.

This text has been coloured red using the .text-red class.

This text has been coloured green using the .text-green class.

This text has been coloured orange using the .text-orange class.

This text has been coloured purple using the .text-purple class.

This text has been coloured gold using the .text-gold class.

This text has been coloured silver using the .text-silver class.

This text has been coloured bronze using the .text-bronze class.

This text has been coloured using the .text-brand1 class.

This text has been coloured using the .text-brand2 class.

This text has been coloured bright red using the .text-bright-red class.

This text has been coloured bright green using the .text-bright-green class.

Note: You must be aged sixteen or over to sign-up. .text-info

Success: Your message has been sent successfully. .text-success

Warning: Tax will be chargeable on your purchase. .text-warning

Error: Your request could not be processed. .text-danger

Text colours on a dark background