Colour

Primary Colour Palettes

Primary colour palettes are the main colours used on your application. These colours are used on all major components that make up your application including buttons, badges, progress indicators etc. You want the use of these colours to be consistent across your application. For example, all primary buttons in an application should use the same hue.

A primary colour palette typically includes 2-3 main colour swatches, with varying shades of these swatches (lighter and darker) to allow for flexibility when building your application. These additional shades can be created by changing the saturation level or brightness of the main colour swatch. See the Aurora Borealis section below for an example of a full colour palette.

For Government of Canada applications it is required that all colours meet the WCAG AA accessibility level for contrast, though AAA is ideal. You can use online contrast checkers to ensure that the colours you choose meet accessibility standards when combined with text.

Once chosen, you can apply your own colours simply by modifying the hex codes in your CSS for various elements.

Swatch Families

Swatch families consist of an array of colours that are used consistently within your particular application. Swatch families include a set of hues that work well together and that can be combined to create a full colour palette.These colours are used to add variety and visual appeal to the main components of your application.

To build a full colour palette, choose 2-3 colour swatches as your base. From there, these hues can be modified to provide lighter or darker shades, gradients, and other variants. Combined with standard alert colours, light and dark themes, and text colours, all of these hues create a full colour palette to be used in an application.

Below are some sample swatch families:

Aurora Borealis

The main colour swatches used for the Government of Canada's Open and Accessible Digital Workspace (GCTools).

Canada.ca Theme

The official hues for Canada.ca web pages and other external-facing applications. Provides lots of neutrals, and a signature blue and red used for accents , headers and footers.

Thunder and Lightning

Optional swatch family. Neutrals with a signature yellow for a small pop of colour.

Blue Complimentary

Optional swatch family that uses a complimentary colour scheme. Blue is used to convey trust, while orange and yellow provides a small splash of colour to applications.

Triad

Optional swatch family. A versatile set of colours that provides lots of options for a colourful but sophisticated application.

Green and Blue

Optional swatch family. A bright cool-toned colour palette that provides a fresh look for web applications.

Secondary or Complementary swatches

Secondary colour swatches are completely optional and may provide designers with additional colours to play with on an application. These secondary swatches are often used in small quantities to draw attention to key pieces on web pages and for visual diversity and aesthetic purposes.

These colours should only be applied to visual elements that enhance the appearance of the page. They should never be used on elements which communicate information visually, either for task completion or the structure of the page.

If you choose to include secondary colour swatches to your application, here are some places where you can use these additional colours:

• Logos or Icons
• Images
• Graphics
• Other elements used for visual enhancements

Basic Interface Colours

Black Text

Text in this design system is displayed in an off-black colour. Black text can be used on any light background (see: Light Theme) or any button or element that uses a light colour. When adding text to any background that is not black it is essential to check the contrast for accessibility. Significant contrast between the background/element colour and the text ensures readability, even for those with visual impairments such as colour blindness.

Please see Typography for more information about using text colour.

CSS
Gradient 1
background: rgb(11,65,77);
background: linear-gradient(76deg, rgba(11,65,77,1) 2%, rgba(19,121,145,1) 40%, rgba(247,254,255,1) 100%);

Gradient 2
background: rgb(19,121,145);
background: linear-gradient(90deg, rgba(19,121,145,1) 0%, rgba(21,163,166,1) 55%, rgba(109,210,218,1) 100%);

Gradient 3
background: rgb(0,166,154);
background: linear-gradient(90deg, rgba(0,166,154,1) 0%, rgba(105,217,163,1) 100%);

Gradient 4
background: rgb(19,121,145);
background: linear-gradient(90deg, rgba(19,121,145,1) 0%, rgba(21,163,166,1) 40%, rgba(146,204,111,1) 100%);