GC Design SystemFoundations
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Foundations overview About design tokensToken namingUsing tokens ColourSpacingTypography Contact usGet InvolvedFind a demo

Colour

We use colour to create hierarchy, communicate meaning, and support consistent experiences across components and products.

On this page

Colour palette

The palette includes 6 colour scales, each progressing from lighter to darker shades. Together, they provide the range of colours used throughout GC Design System.

Grey

Red

Yellow

Green

Blue

Purple

Each colour scale has a general role in the system. These roles guide how we use colour, but they do not define every use.
  • Grey
    Structure, text, background, borders.
  • Green
    Success and positive confirmation.
  • Red
    Critical information, errors, destructive actions.
  • Blue
    Interaction and information.
  • Yellow
    Warnings and alerts.
  • Purple
    Specialty states and specific highlights.

    • Additional colours

    In addition to the 6 scales, the palette includes 4 individual colours.
    • white
    • blue-vivid
    • blue-muted
    • black
    Blue-vivid provides visual prominence for interactive elements. Blue-muted supports familiarity with Canada.ca and Government of Canada products. All colours in the palette are defined as base tokens. These tokens have no assigned meaning or purpose and are used to create semantic colour tokens. Browse base colour tokens

    Semantic colours

    Semantic colours give colour a specific meaning or purpose in the interface. They help form the brand identity for the Government of Canada. Semantic colours are represented by global tokens. These tokens connect colours from the palette to specific uses, such as text, backgrounds, borders and interactive states. This lets us apply the same colour decisions consistently. Browse global colour tokens

    Using colours

    Select colour tokens purposefully

    Choose global colour tokens based on their meaning and how well they match your needs. This helps maintaining the intended meaning of colours across interfaces.

    Check colour contrast

    When combining GC Design System colours in your own styles, check that the combinations meet standards for accessible colour contrast using accessibility contrast tools, like WebAIM Contrast Checker.

    Choose how to apply colour

    When you need to apply colour outside a component:
    • Use a CSS Shortcuts class when one is available for the style you need, such as text colour, link colour, or background colour.
    • Use a global colour token when CSS Shortcuts do not meet your needs.
    • Use a base token only when there’s no appropriate global colour token.

    Apply colour

    Learn how to use CSS Shortcuts or design tokens to apply GC Design System decisions in your designs and code.
    Use CSS ShortcutsUse design tokens

    Colour token reference

    Global colour tokens

    Global colour tokens assign meaning or purpose to colours from the palette.

    Text

    PreviewToken nameContrast ratioHexPurpose
    --gcds-text-light 1 #ffffff Main light text colour. Use on a background shade of 700 or darker (like --gcds-bg-dark).
    --gcds-text-primary 12.63 #333333 Main text colour. Use on a background shade of 50 or lighter (like --gcds-bg-white).
    --gcds-text-secondary 7 #595959 Contrast text colour (alternative to primary). Use on a background shade of 50 or lighter (like --gcds-bg-white).
    PreviewToken nameContrast ratioHexPurpose
    --gcds-link-default 9.16 #1f497a Default link colour for links on a white background.
    --gcds-link-hover 5.98 #1354ec Hover link colour for links on a white background.
    --gcds-link-light 1 #ffffff Main light link colour for links on 700 shade or darker background (like --gcds-color-blue-700).
    --gcds-link-visited 10.77 #4b248f Visited link colour for links on a white background.

    Background

    PreviewToken nameContrast ratioHexPurpose
    --gcds-bg-dark 12.63 #333333 Main dark background colour. Use with a text shade of 100 or lighter (like --gcds-text-light).
    --gcds-bg-light 1.11 #f2f2f2 Light background colour (alternative to white). Use with a text shade of 700 or darker (like --gcds-text-primary).
    --gcds-bg-primary 12.15 #26374a Highlight background colour. Use with a text shade of 100 or lighter (like --gcds-text-light).
    --gcds-bg-white 1 #ffffff Main background colour. Use with a text shade of 700 or darker (like --gcds-text-primary).

    Border

    PreviewToken nameContrast ratioHexPurpose
    --gcds-border-default 3.36 #8c8c8c Default border colour for borders and icons on a white background.

    Danger

    PreviewToken nameContrast ratioHexPurpose
    --gcds-danger-background 6.78 #b3192e Danger background colour for background emphasis on a destructive action or critical feedback.
    --gcds-danger-border 6.78 #b3192e Danger border colour for borders on white backgrounds emphasizing a destructive action or critical feedback.
    --gcds-danger-text 6.78 #b3192e Danger text colour for white backgrounds emphasizing a destructive action or critical feedback.

    Disabled

    PreviewToken nameContrast ratioHexPurpose
    --gcds-disabled-background 1.41 #d9d9d9 Disabled background colour. Use sparingly for a disabled interactive element.
    --gcds-disabled-text 3.94 #808080 Disabled text colour. Use sparingly for a disabled interactive element.

    Focus

    PreviewToken nameContrast ratioHexPurpose
    --gcds-focus-background 5.98 #1354ec Focus background colour, exclusively for focus on an interactive element.
    --gcds-focus-border 5.98 #1354ec Focus border colour, exclusively for focus on an interactive element.
    --gcds-focus-text 1 #ffffff Focus text colour, exclusively for focus on an interactive element.

    Base colour tokens

    Base colour tokens represent the individual colours in the palette, without assigning them a specific meaning or purpose. Note: Code elements take American spelling for “colour” and “grey”.
    PreviewToken nameContrast ratioHexPurpose
    --gcds-color-black 21 #000000
    --gcds-color-blue-50 1.12 #ebf2fa
    --gcds-color-blue-100 1.29 #d6e4f5
    --gcds-color-blue-150 1.47 #c2d7f0
    --gcds-color-blue-200 1.69 #adcaeb
    --gcds-color-blue-250 1.94 #99bde6
    --gcds-color-blue-300 2.28 #85afe0
    --gcds-color-blue-350 2.66 #70a2db
    --gcds-color-blue-400 3.12 #5c95d6
    --gcds-color-blue-450 3.67 #4788d1
    --gcds-color-blue-500 4.37 #337acc
    --gcds-color-blue-550 5.19 #2e6eb8
    --gcds-color-blue-600 6.23 #2962a3
    --gcds-color-blue-650 7.49 #24568f
    --gcds-color-blue-700 9.16 #1f497a
    --gcds-color-blue-750 11.04 #193d66
    --gcds-color-blue-800 13.2 #143152
    --gcds-color-blue-850 15.52 #0f253d
    --gcds-color-blue-900 17.86 #0a1829
    --gcds-color-blue-muted 12.15 #26374a
    --gcds-color-blue-vivid 5.98 #1354ec
    --gcds-color-grayscale-50 1.11 #f2f2f2
    --gcds-color-grayscale-100 1.24 #e6e6e6
    --gcds-color-grayscale-150 1.41 #d9d9d9
    --gcds-color-grayscale-200 1.6 #cccccc
    --gcds-color-grayscale-250 1.83 #bfbfbf
    --gcds-color-grayscale-300 2.09 #b3b3b3
    --gcds-color-grayscale-350 2.43 #a6a6a6
    --gcds-color-grayscale-400 2.84 #999999
    --gcds-color-grayscale-450 3.36 #8c8c8c
    --gcds-color-grayscale-500 3.94 #808080
    --gcds-color-grayscale-550 4.74 #737373
    --gcds-color-grayscale-600 5.74 #666666
    --gcds-color-grayscale-650 7 #595959
    --gcds-color-grayscale-700 8.45 #4d4d4d
    --gcds-color-grayscale-750 10.36 #404040
    --gcds-color-grayscale-800 12.63 #333333
    --gcds-color-grayscale-850 15.13 #262626
    --gcds-color-grayscale-900 17.4 #1a1a1a
    --gcds-color-green-50 1.07 #ebfaf0
    --gcds-color-green-100 1.16 #d6f5e1
    --gcds-color-green-150 1.25 #c2f0d3
    --gcds-color-green-200 1.35 #adebc4
    --gcds-color-green-250 1.46 #99e6b5
    --gcds-color-green-300 1.58 #85e0a6
    --gcds-color-green-350 1.71 #70db97
    --gcds-color-green-400 1.83 #5cd689
    --gcds-color-green-450 1.96 #47d17a
    --gcds-color-green-500 2.1 #33cc6b
    --gcds-color-green-550 2.57 #2eb860
    --gcds-color-green-600 3.24 #29a356
    --gcds-color-green-650 4.11 #248f4b
    --gcds-color-green-700 5.36 #1f7a40
    --gcds-color-green-750 7.01 #196636
    --gcds-color-green-800 9.24 #14522b
    --gcds-color-green-850 12.29 #0f3d20
    --gcds-color-green-900 15.66 #0a2915
    --gcds-color-purple-50 1.16 #f0ebfa
    --gcds-color-purple-100 1.38 #e1d6f5
    --gcds-color-purple-150 1.64 #d3c2f0
    --gcds-color-purple-200 1.99 #c4adeb
    --gcds-color-purple-250 2.42 #b599e6
    --gcds-color-purple-300 2.97 #a685e0
    --gcds-color-purple-350 3.71 #9770db
    --gcds-color-purple-400 4.59 #895cd6
    --gcds-color-purple-450 5.75 #7a47d1
    --gcds-color-purple-500 7.06 #6b33cc
    --gcds-color-purple-550 8.13 #602eb8
    --gcds-color-purple-600 9.36 #5629a3
    --gcds-color-purple-650 10.77 #4b248f
    --gcds-color-purple-700 12.38 #401f7a
    --gcds-color-purple-750 14.11 #361966
    --gcds-color-purple-800 15.85 #2b1452
    --gcds-color-purple-850 17.54 #200f3d
    --gcds-color-purple-900 18.96 #150a29
    --gcds-color-red-50 1.16 #fce9eb
    --gcds-color-red-100 1.37 #f9d2d7
    --gcds-color-red-150 1.63 #f5bcc4
    --gcds-color-red-200 1.93 #f2a6b0
    --gcds-color-red-250 2.31 #ef8f9c
    --gcds-color-red-300 2.74 #ec7988
    --gcds-color-red-350 3.22 #e96375
    --gcds-color-red-400 3.75 #e64d61
    --gcds-color-red-450 4.31 #e2364d
    --gcds-color-red-500 4.76 #df2039
    --gcds-color-red-550 5.66 #c91d34
    --gcds-color-red-600 6.78 #b3192e
    --gcds-color-red-650 8.2 #9c1628
    --gcds-color-red-700 9.85 #861322
    --gcds-color-red-750 11.79 #70101d
    --gcds-color-red-800 14.04 #590d17
    --gcds-color-red-850 16.27 #430a11
    --gcds-color-red-900 18.38 #2d060b
    --gcds-color-white 1 #ffffff
    --gcds-color-yellow-50 1.06 #fef7e7
    --gcds-color-yellow-100 1.14 #fcefcf
    --gcds-color-yellow-150 1.22 #fbe7b6
    --gcds-color-yellow-200 1.31 #fade9e
    --gcds-color-yellow-250 1.4 #f9d686
    --gcds-color-yellow-300 1.49 #f7ce6e
    --gcds-color-yellow-350 1.59 #f6c655
    --gcds-color-yellow-400 1.7 #f5be3d
    --gcds-color-yellow-450 1.81 #f4b625
    --gcds-color-yellow-500 1.95 #f2ad0d
    --gcds-color-yellow-550 2.4 #da9c0b
    --gcds-color-yellow-600 3 #c28b0a
    --gcds-color-yellow-650 3.85 #aa7909
    --gcds-color-yellow-700 5.01 #916808
    --gcds-color-yellow-750 6.6 #795706
    --gcds-color-yellow-800 8.89 #614505
    --gcds-color-yellow-850 11.82 #493404
    --gcds-color-yellow-900 15.35 #302303
    Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
    2026-11-02