Pattern Library (ver. 1.9)

Safety and metallic palette

Safety colour palette

There will be instances when a cautionary or emergency colour palette will need to be used. The chosen colours and their meanings are recognized globally and can help convey the message to both citizens and tourists easily.

  • #A6192E $coc-secondary-red
  • #F2A900 $coc-secondary-yellow-D
  • #009639 $coc-secondary-green-safety
  • #000000 $black
  • #E57200 $coc-secondary-orange
  • #C4D600 $coc-secondary-green-pedestrian
  • #0057B8 $coc-secondary-blue-access

Background and foreground combinations

The colour combination examples below for the safety colour palette have been configured to meet the AA rating at the Web Accessibility Initiative.

  • For the safety colour palette, large type and graphics on red (187C) should always be white

    Background color: #A6192E
    Text color: #FFFFFF

    CSS class name: coc-secondary-red

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

  • For the safety colour palette, large type and graphics on yellow (pantone 130C) should always be black

    Background color: #F2A900
    Text color: #000000

    CSS class name: coc-secondary-yellow-D

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

  • For the safety colour palette, large type and graphics on green (pantone 355C) should always be white

    Background color: #009639
    Text color: #000000

    CSS class name: coc-secondary-green-safety

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

  • For the safety colour palette, large type and graphics on black should always be white

    Background color: #000000
    Text color: #FFFFFF

    CSS class name: coc-black

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

  • For the safety colour palette, large type and graphics on detour orange (152C) should always be black

    Background color: #E57200
    Text color: #000000

    CSS class name: coc-secondary-orange

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

  • For the safety colour palette, large type and graphics on pedestrian yellow/green (382C) should always be black

    Background color: #C4D600
    Text color: #000000

    CSS class name: coc-secondary-green-pedestrian

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

  • For the safety colour palette, large type and graphics on access blue (2935C) should always be white

    Background color: #0057B8
    Text color: #FFFFFF

    CSS class name: coc-secondary-blue-access

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

Metallic colours

The use Metallic Gold and Gold Foil is reserved exclusively for use by The City of Calgary Council, The City of Calgary Mayor’s Office, City of Calgary Auditor’s Office, City of Calgary Integrity Commissioner and COC Ethics Commissioner.

Metallic Gold: Pantone 10127