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:
Hex: #2B8000 JS: colorAccessibleGreen
Usage: Primary button backgrounds/outline, text links
Hex: #66CC00 JS: colorTelusGreen
Usage: Decorative elements (graphs/charts). Use only for decorative items (when it doesn't need to be colour accessible)
Hex: #4B286D JS: colorTelusPurple
Usage: Headings, secondary button background/outline, chevron links
Hex: #2A2C2E JS: colorShark
Usage: Sub headings (H3, H4), body text
Hex: #54595F JS: colorShuttleGrey
Usage: Colour for default links
Hex: #FFFFFF JS: colorWhite
Usage: Page background, inverted links/buttons
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.
Hex: #C12335 JS: colorCardinal
Usage: Error body text and icons
Hex: #FFF6F8 JS: colorLavenderBlush
Usage: Notification/error messaging background
Hex: #F2EFF4 JS: colorWhiteLilac
Usage: Branded messaging background
Hex: #D8D8D8 JS: colorGainsboro
Usage: Horizontal, vertical and wave dividers
Hex: #71757B JS: colorRavenGrey
Usage: Form input border
Hex: #F7F7F8 JS: colorAthensGrey
Usage: Helper/disabled state background
Hex: #F4F9F2 JS: colorPanache
Usage: Success messaging background
Hex: #FFF9EE JS: colorLightRaja
Usage: Warning notificaiton background
Hex: #FACA69 JS: colorRaja
Usage: Warning notification border
Hex: #8C5415 JS: colorDarkRaja
Usage: Warning notification alert icon
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.