Colour

Colour plays an important role in communicating our identity. This section includes CPAC’s colour palette and guidelines for using the brand colours.

Colour palette

  • Colour selection should always be thoughtful and with purpose.
  • The primary colours are where all design begins.
  • Secondary colours provide complimentary accents and variation to products, while maintaining a connection to the primary theme.
  • Tertiary colours provide additional options where needed for infographics, charts, icons, callout boxes, etc.

PRIMARY

CPAC BLUE

RGB: 000, 103, 177
HEX: #026DB4

ROYAL BLUE

RGB: 031, 066, 129
HEX: #204281

BLUE ASH

RGB: 044, 053, 081
HEX: #2C3551

SECONDARY

CPAC ORANGE

RGB: 251, 175, 095
HEX: #FCAF5F

TANGERINE

RGB: 238, 115, 082
HEX: #EE7352

ROUGE

RGB: 146, 039, 052
HEX: #922734

SECONDARY

GRAPE

RGB: 090, 062, 152
HEX: #583C94

EVERGREEN

RGB: 008, 075, 059
HEX: #084B3B

MATTE BLACK

RGB: 030, 036, 040
HEX: #1E2428

TERTIARY

GRAY BLUE

RGB: 192, 221, 242
HEX: #C0DDF2

BABY BLUE

RGB: 002, 175, 215
HEX: #02AFD7

AQUA

RGB: 056, 145, 131
HEX: #389183

COLA RED

RGB: 194, 052, 069
HEX: #C23445

Colour pairings

The following approved colour pairings, derived from our palette, provide options for using colours together.

The contrast ratio (CR) between the foreground (text) colour and background colour is noted for each pairing.

  • Note: For accessibility, there should always be a strong contrast between the foreground (text) colour and background colour with a ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA), according to WCAG 2.1. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

If needed, black text (0 RGB, #000000) could be used with the light background colours included below, and white text (255 RGB, #FFFFFF) could be used with the dark background colours included below.

CPAC BLUE
(10% OPACITY)

RGB: 229, 240, 247
HEX: #E5F0F7
CR: 4.71

CPAC BLUE

RGB: 000, 103, 177
HEX: #026DB4
CR: 4.71

GRAPE

RGB: 090, 062, 152
HEX: #583C94
CR: 7.15

GRAPE
(10% OPACITY)

RGB: 238, 235, 244
HEX: #EEEBF4
CR: 7.15

ROYAL BLUE
(10% OPACITY)

RGB: 232, 236, 242
HEX: #E8ECF2
CR: 8.32

ROYAL BLUE

RGB: 031, 066, 129
HEX: #204281
CR: 8.32

EVERGREEN

RGB: 008, 075, 059
HEX: #084B3B
CR: 8.44

EVERGREEN
(10% OPACITY)

RGB: 230, 237, 235
HEX: #E6EDEB
CR: 8.44

BLUE ASH
(10% OPACITY)

RGB: 233, 234, 237
HEX: #E9EAED
CR: 10.06

BLUE ASH

RGB: 044, 053, 081
HEX: #2C3551
CR: 10.06

ROUGE

RGB: 146, 039, 052
HEX: #922734
CR: 6.62

ROUGE
(10% OPACITY)

RGB: 244, 233, 234
HEX: #F4E9EA
CR: 6.62

CPAC ORANGE

RGB: 251, 175, 095
HEX: #FCAF5F
CR: 4.59

GRAPE

RGB: 090, 062, 152
HEX: #583C94
CR: 4.59

MATTE BLACK

RGB: 030, 036, 040
HEX: #1E2428
CR: 12.90

MATTE BLACK
(10% OPACITY)

RGB: 232, 233, 233
HEX: #E8E9E9
CR: 12.90

Gradients

Gradients can be created using varying shades of our colour palettes. The primary gradient used for backgrounds is:

Dark Gradient

Linear Gradient

#004476

100%

#185768

100%

Back to top arrow