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)