Secondary colour palette

We know that a repetitive colour palette will help establish a successful brand, but there will be times when additional colours may be required.

Seven additional secondary colours were chosen to provide additional range to the City of Calgary brand. Our secondary colour palette can be used when functionally necessary to complement the core colours. They can help set a consistent colour language for illustrations and accent colours which will help strengthen brand recognition and familiarity with our citizens.

These colours should work with the core colour palette, not compete with it. The secondary colours should be used subtly and sparingly. Using too many colours at once will make it difficult to establish a recognizable brand and opposes our rational of using a simplified primary colour palette.

These colours were chosen to compliment the brand. For the “One Voice” initiative to be successful, the secondary colours should never be used to differentiate or create sub-brands within the City of Calgary Brand. When in doubt revert to using the primary colour palette.

Compelling photography can also help add dimension and colour to the brand when not using the secondary colour palette.

Pantone: 108C

CMYK: C0 M41 Y100 K7

RGB: R237 G139 B0

Hex: #ed8b00

CSS: coc-secondary-orange-L

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 152C

CMYK: C0 M50 Y100 K10

RBG: R229 G114 B0

Hex: #e57200

CSS: coc-secondary-orange

 

Text colour: #000000

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 1665C

CMYK: C0 M69 Y98 K14

RGB: R220 G68 B5

Hex: #dc4405

CSS: coc-secondary-orange-D

 

Text colour: #000000

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 144C

CMYK: C0 M14 Y100 K0

RGB: R254 G219 B0

Hex: #fedb00

CSS: coc-secondary-yellow-L

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 7548C

CMYK: C0 M22 Y100 K0

RGB: R255 G198 B0

Hex: #ffc600

CSS: coc-secondary-yellow

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 130C

CMYK: C0 M30 Y100 K5

RGB: R242 G169 B0

Hex: #f2a900

CSS: coc-secondary-yellow-D

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 368C

CMYK: C65 M0 Y100 K0

RGB: R120 G190 B32

Hex: #78be20

CSS: coc-secondary-green-L

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 363C

CMYK: C76 M3 Y100 K18

RGB: R76 G140 B43

Hex: #4c8c2b

CSS: coc-secondary-green

 

Text colour: #000000

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 7743C

CMYK: C71 M8 Y100 K50

RGB: R68 G105 B61

Hex: #44693d

CSS: coc-secondary-green-D

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 299C

CMYK: C86 M8 Y0 K0

RGB: R0 G163 B224

Hex: #00a3e0

CSS: coc-secondary-blue-L

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 7704C

CMYK: C93 M4 Y8 K24

RGB: R0 G133 B173

Hex: #0085ad

CSS: coc-secondary-blue

 

Text colour: #000000

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 7708C

CMYK: C100 M18 Y12 K59

RGB: R0 G86 B112

Hex: #005670

CSS: coc-secondary-blue-D

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 7691C

CMYK: C100 M43 Y0 K30

RGB: R0 G98 B152

Hex: #006298

CSS: coc-secondary-dark-blue-L

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 2955C

CMYK: C100 M60 Y10 K53

RGB: R0 G56 B101

Hex: #003865

CSS: coc-secondary-dark-blue

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 282C

CMYK: C100 M90 Y13 K68

RGB: R4 G30 B66

Hex: #041e42

CSS: coc-secondary-dark-blue-D

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 513C

CMYK: C53 M99 Y0 K0

RGB: R147 G50 B142

Hex: #93328e

CSS: coc-secondary-purple-L

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 520C

CMYK: C67 M95 Y4 K15

RGB: R100 G47 B108

Hex: #642f6c

CSS: coc-secondary-purple

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 2627C

CMYK: C85 M100 Y6 K38

RGB: R60 G16 B83

Hex: #3c1053

CSS: coc-secondary-purple-D

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Pantone: 214C

CMYK: C0 M93 Y49 K19

RGB: R206 G15 B105

Hex: #ce0f69

CSS: coc-secondary-pink-L

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 215C

CMYK: C6 M100 Y26 K24

RGB: R172 G20 B90

Hex: #ac145a

CSS: coc-secondary-pink

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)

Pantone: 222C

CMYK: C20 M100 Y22 K61

RGB: R108 G29 B69

Hex: #6c1d45

CSS: coc-secondary-pink-D

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)