Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

CPS Colour palette

Information | The CPS colour palette can only be used on the CPS website.

CPS core colour palette

Our corporate colours support our brand persona. They are strong, bold and dependable. They are deeply embedded in our history and will help lead our identity into the future.

The core CPS corporate colour palette consists of yellow, blue, red and white.

  • #F2A900 $cps-yellow
  • #002D72 $cps-blue
  • #BA0C2F $cps-red
  • #746661 $cps-warm-grey
  • #ffffff $white

Shades of blue based off the CPS colour (#002D72)

Grey colours used for backgrounds or other UI are based off of the CPS blue #002D72. The shades are a 20% decline, from dark to light.

  • #001F4F $cps-blue-3D
  • #00245B $cps-blue-2D
  • #002866 $cps-blue-1D
  • #002D72 $cps-blue
  • #33578E $cps-blue-1L
  • #6681AA $cps-blue-2L
  • #99ABC6 $cps-blue-3L

CPS background and foreground combinations

Core CPS colour palette

  • Background color: #002D72
    Text color: #FFFFFF

    CSS class name: cps-blue

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

  • Background color: #F2A900
    Text color: #000000

    CSS class name: cps-yellow

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

  • Background color: #BA0C2F
    Text color: #FFFFFF

    CSS class name: cps-red

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

  • Background color: #746661
    Text color: #FFFFFF

    CSS class name: cps-warm-grey

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

Shades of CPS blue (#002D72)

  • Background color: #001F4F
    Text color: #FFFFFF

    CSS class name: cps-blue-3D

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

  • Background color: #00245B
    Text color: #FFFFFF

    CSS class name: cps-blue-2D

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

  • Background color: #002866
    Text color: #FFFFFF

    CSS class name: cps-blue-1D

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

  • Background color: #002D72
    Text color: #FFFFFF

    CSS class name: cps-blue

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

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

    CSS class name: cps-blue-1L

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

  • Background color: #6681AA
    Text color: #FFFFFF

    CSS class name: cps-blue-2L

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

  • Background color: #99ABC6
    Text color: #000000

    CSS class name: cps-blue-3L

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