Pattern Library (ver. 1.9)

City of Calgary colour palette

Why colour is important

Moving forward with the “One Voice” initiative, it is imperative to step back and take a look at The City of Calgary brand holistically. Our goal is to create consistency and focus across all City communication channels. Selecting a colour palette of core colours helps to create that consistency.

A selective brand colour palette creates recognition with Calgarians. Many successful brands use a very limited and focused core palette to help ensure that they are memorable and trustworthy. Core brand colours help create a tone, mood and a unified brand.

Our simplified colour palette will help Calgarians easily recognize The City of Calgary and the value we provide. Our core colours should always be dominant in our communications, used properly they will help in establishing a strong City of Calgary brand.

Building trust with our audiences

To strengthen our trust with Calgarians and build our reputation we need to create familiarity and consistency. By using our core colours, red, grey, black and white we are setting up a consistent visual language which Calgarians can begin to recognize in our ever-changing marketplace.

Our brand colours were carefully chosen. They are not trendy. They are meant to be timeless. These colours represent the City of Calgary’s core values. They are strong, bold and dependable. These colours are deeply embedded in our history and will help lead our identity into the future.

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.

  • #c8102e $coc-main
  • #4b4f55 $coc-secondary
  • #000000 $black
  • #ffffff $white

Shades of grey based off the corporate colour (#4b4f55)

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.

  • #4b4f55 $coc-secondary
  • #5d6066 $coc-secondary-1L
  • #6f7277 $coc-secondary-2L
  • #818388 $coc-secondary-3L
  • #939599 $coc-secondary-4L
  • #a5a7aa $coc-secondary-5L
  • #b7b9bb $coc-secondary-6L
  • #c9cacc $coc-secondary-7L
  • #dbdcdd $coc-secondary-8L
  • #ededee $coc-secondary-9L
  • #f6f6f6 $coc-secondary-10L

Shades of grey based off the corporate colour (#000000)

Grey colours used for backgrounds or other UI are based off of the corporate black #000000. The shades are a 10% decline, from dark to light.

  • #000000 $black
  • #191919 $coc-secondary-1D
  • #333333 $coc-secondary-2D
  • #4c4c4c $coc-secondary-3D
  • #666666 $coc-secondary-4D
  • #7f7f7f $coc-secondary-5D
  • #999999 $coc-secondary-6D
  • #b2b2b2 $coc-secondary-7D
  • #cccccc $coc-secondary-8D
  • #e5e5e5 $coc-secondary-9D

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 color 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.

  • #E57200 $coc-secondary-orange
  • #FFC600 $coc-secondary-yellow
  • #4C8C2B $coc-secondary-green
  • #0085AD $coc-secondary-blue
  • #003865 $coc-secondary-dark-blue
  • #642F6C $coc-secondary-purple
  • #AC145A $coc-secondary-pink

Additional shades

  • #ED8B00 $coc-secondary-orange-L
  • #DC4405 $coc-secondary-orange-D
  • #FEDB00 $coc-secondary-yellow-L
  • #F2A900 $coc-secondary-yellow-D
  • #78BE20 $coc-secondary-green-L
  • #44693D $coc-secondary-green-D
  • #00A3E0 $coc-secondary-blue-L
  • #005670 $coc-secondary-blue-D
  • #006298 $coc-secondary-dark-blue-L
  • #041E42 $coc-secondary-dark-blue-D
  • #93328E $coc-secondary-purple-L
  • #3C1053 $coc-secondary-purple-D
  • #CE0F69 $coc-secondary-pink-L
  • #6C1D45 $coc-secondary-pink-D

Background and foreground combinations

The default text colours below meet the AAA rating of the Web Accessibility Initiative.

Default text colours (dark on light)

Use #333333 on #ffffff for general text content on the web page.

  • Background color: #FFFFFF
    Text color: #333333

    CSS class name: coc-white

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

Default text colours (light on dark)

Use #f6f6f6 on #333333 for general text content on the web page.

  • Background color: #333333
    Text color: #f6f6f6

    CSS class name: coc-secondary-2D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

The colour combination examples below meet the required minimum AA rating of the Web Accessibility Initiative.

  • Background color: #C8102E
    Text color: #FFFFFF

    CSS class name: coc-main

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

Grey colour palette

  • Background color: #4b4f55
    Text color: #f6f6f6

    CSS class name: coc-secondary

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #5d6066
    Text color: #f6f6f6

    CSS class name: coc-secondary-1L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #6f7277
    Text color: #FFFFFF

    CSS class name: coc-secondary-2L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #818388
    Text color: #000000

    CSS class name: coc-secondary-3L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #939599
    Text color: #000000

    CSS class name: coc-secondary-4L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #a5a7aa
    Text color: #000000

    CSS class name: coc-secondary-5L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #b7b9bb
    Text color: #000000

    CSS class name: coc-secondary-6L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #c9cacc
    Text color: #333333

    CSS class name: coc-secondary-7L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #dbdcdd
    Text color: #333333

    CSS class name: coc-secondary-8L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #ededee
    Text color: #333333

    CSS class name: coc-secondary-9L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #f6f6f6
    Text color: #333333

    CSS class name: coc-secondary-10L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #000000
    Text color: #f6f6f6

    CSS class name: coc-black

    Text colour contrast: Pass (AAAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #191919
    Text color: #f6f6f6

    CSS class name: coc-secondary-1D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #333333
    Text color: #f6f6f6

    CSS class name: coc-secondary-2D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #4c4c4c
    Text color: #f6f6f6

    CSS class name: coc-secondary-3D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #666666
    Text color: #f6f6f6

    CSS class name: coc-secondary-4D

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #7f7f7f
    Text color: #000000

    CSS class name: coc-secondary-5D

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #999999
    Text color: #000000

    CSS class name: coc-secondary-6D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #b2b2b2
    Text color: #000000

    CSS class name: coc-secondary-7D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #cccccc
    Text color: #333333

    CSS class name: coc-secondary-8D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #e5e5e5
    Text color: #333333

    CSS class name: coc-secondary-9D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

Secondary colour palette

  • Background color: #ED8B00
    Text color: #000000

    CSS class name: coc-secondary-orange-L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #E57200
    Text color: #000000

    CSS class name: coc-secondary-orange

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #DC4405
    Text color: #000000

    CSS class name: coc-secondary-orange-D

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #FEDB00
    Text color: #000000

    CSS class name: coc-secondary-yellow-L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #FFC600
    Text color: #000000

    CSS class name: coc-secondary-yellow

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #F2A900
    Text color: #000000

    CSS class name: coc-secondary-yellow-D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #78BE20
    Text color: #000000

    CSS class name: coc-secondary-green-L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #4C8C2B
    Text color: #000000

    CSS class name: coc-secondary-green

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #44693D
    Text color: #FFFFFF

    CSS class name: coc-secondary-green-D

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #00A3E0
    Text color: #000000

    CSS class name: coc-secondary-blue-L

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #0085AD
    Text color: #000000

    CSS class name: coc-secondary-blue

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #005670
    Text color: #FFFFFF

    CSS class name: coc-secondary-blue-D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #006298
    Text color: #FFFFFF

    CSS class name: coc-secondary-dark-blue-L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #003865
    Text color: #FFFFFF

    CSS class name: coc-secondary-dark-blue

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #041E42
    Text color: #FFFFFF

    CSS class name: coc-secondary-dark-blue-D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #93328E
    Text color: #FFFFFF

    CSS class name: coc-secondary-purple-L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #642F6C
    Text color: #FFFFFF

    CSS class name: coc-secondary-purple

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #3C1053
    Text color: #FFFFFF

    CSS class name: coc-secondary-purple-D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)

  • Background color: #CE0F69
    Text color: #FFFFFF

    CSS class name: coc-secondary-pink-L

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #AC145A
    Text color: #FFFFFF

    CSS class name: coc-secondary-pink

    Text colour contrast: Pass (AA)
    Large text colour contrast: Pass (AAA)

  • Background color: #6C1D45
    Text color: #FFFFFF

    CSS class name: coc-secondary-pink-D

    Text colour contrast: Pass (AAA)
    Large text colour contrast: Pass (AAA)