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)