Core colour palette
These are our core brand colours. They are strong, bold and dependable. These colours are deeply embedded in our history and will help lead our identity into the future. Our simplified colour palette will help citizens easily recognize The City of Calgary brand. The core colours should always be dominant and used to help establish our brand.
Pantone: 186C
CMYK: C5 M100 Y85 K6
RGB: R200 G16 B46
Hex: #c8102e
CSS: coc-main
Text colour: #ffffff
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)
Pantone: 7540C
CMYK: C15 M0 Y0 K80
RGB: R75 G79 B85
Hex: #4b4f55
CSS: coc-secondary
Text colour: #f6f6f6
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #000000
CSS: coc-black
Text colour: #f6f6f6
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #ffffff
CSS: coc-white
Text colour: #333333
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Shades of grey based off the corporate grey
Grey colours used for backgrounds or other UI are based off of the corporate grey #4b4f55. The shades are a 10% decline, from dark to light, except the last grey which is a 5% decline.
Hex: #5d6066
CSS: coc-secondary-1L
Text colour: #f6f6f6
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)
Hex: #6f7277
CSS: coc-secondary-2L
Text colour: #ffffff
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)
Hex: #818388
CSS: coc-secondary-3L
Text colour: #000000
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)
Hex: #939599
CSS: coc-secondary-4L
Text colour: #000000
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)
Hex: #a5a7aa
CSS: coc-secondary-5L
Text colour: #000000
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #b7b9bb
CSS: coc-secondary-6L
Text colour: #000000
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #c9cacc
CSS: coc-secondary-7L
Text colour: #333333
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #dbdcdd
CSS: coc-secondary-8L
Text colour: #333333
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #ededee
CSS: coc-secondary-9L
Text colour: #333333
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)
Hex: #f6f6f6
CSS: coc-secondary-10L
Text colour: #333333
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)