Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change.

Our main brand colours are white, purple and green. White is the most dominant colour in our palette and should be the foundation of every page. Purple and green are used to accent white space through buttons, text colour, and links.

All colours used to convey non-redundant information must meet WCAG 2.0 Level AA contrast ratio of at least 4.5:1.

The following colours are specific to digital experiences. For the full guidelines on using colour, including traditional media and other forms of communications, visit BrandHub.


For Buttons, Links, Headings and Body copy only use the following colours:

TELUS Brand colour palette

TELUS Purple

Hex: #4B286D
JS: colorTelusPurple

Usage: Headings, secondary button background/outline, chevron links


Hex: #66CC00
JS: colorTelusGreen

Usage: Decorative elements (graphs/charts). Use only for decorative items (when it doesn't need to be colour accessible)

Accessible Green

Hex: #2B8000
JS: colorAccessibleGreen

Usage: Primary button backgrounds/outline, text links


JS: colorWhite

Usage: Page background, inverted links/buttons

Grey colour palette


Hex: #2A2C2E
JS: colorGreyShark

Usage: Sub headings (H3, H4), body text

Shuttle Grey

Hex: #54595F
JS: colorGreyShuttle

Usage: Colour for default links

Raven Grey

Hex: #71757B
JS: colorGreyRaven

Usage: Form input border


Hex: #D8D8D8
JS: colorGreyGainsboro

Usage: Horizontal, vertical and wave dividers

Athens Grey

Hex: #F7F7F8
JS: colorGreyAthens

Usage: Helper/disabled state background


These colours are not part of the TELUS brand colour palette, however are used sparingly, but intentionally to play a functional role and support a positive user experience. Example uses include notifications, errors and messaging.

Nofitication colour palette

Lavender Blush

Hex: #FFF6F8
JS: colorLavenderBlush

Usage: Notification/error messaging background


Hex: #F4F9F2
JS: colorPanache

Usage: Success messaging background

White Lilac

Hex: #F2EFF4
JS: colorWhiteLilac

Usage: Branded messaging background


Hex: #C12335
JS: colorCardinal

Usage: Error body text and icons

Dark Rajah

Hex: #8C5415
JS: colorRajahDark

Usage: Warning notification alert icon


Hex: #FACA69
JS: colorRajah

Usage: Warning notification border

Light Rajah

Hex: #FFF9EE
JS: colorRajahLight

Usage: Warning notification background


The TELUS digital colour palette is mandated by the TELUS Brand team and should not be adjusted without explicit approval. If you should have any questions regarding implementation, please get in touch with us.

results matching ""

    No results matching ""