Utilisation des couleurs de TELUS

La palette de TELUS combine des couleurs bien définies qui distinguent notre marque et créent un effet visuel durable.

Apprenez-en plus sur les profils de couleurs sur différents supports:

Apprenez comment utiliser les couleurs dans les expériences numériques.

Le site du TELUS Design System est uniquement en anglais.

colours-flower

La palette de TELUS

Le blanc est à la base de la palette et est traité comme la couleur dominante. Les accents mauves et verts rendent la marque unique et mémorable.

purple icon

Violet TELUS

Utilisation : Titres, arrière-plan et contour des boutons de niveau secondaire, liens avec chevron.


PMS 369 C


PMS 269 U


CMYK 85.100.25.13


RGB 75.40.109


HEX #4B286D


SCSS $color-telus-purple


green icon

Vert TELUS

Utilisation : Réservé aux éléments décoratifs (lorsque les couleurs n’ont pas besoin d’être accessibles).


PMS 376 C


PMS 376 U


CMYK 50.0.100.0


RGB 102.204.0


HEX #66CC00


SCSS $color-telus-green


accessible green icon

Vert accessible TELUS

Utilisation : Arrière-plan et contour des boutons de premier niveau, liens texte.


RBG 36.135.0


HEX #248700


SCSS $color-accessible-green


white icon

Blanc TELUS

Utilisation : fonds, texte à l’envers


RBG 255.255.255


HEX #FFFFFF


SCSS $color-white



La palette de gris

Les tons de gris servent surtout à la typographie secondaire et aux petits éléments graphiques.

shark grey icon

Gris requin

Utilisation : arrière-plan / contour des boutons principaux, liens textuels, corps du texte.


PMS 7540 C


CMYK 9.4.0.82


RGB 42.44.46


HEX #2A2C2E


SCSS $color-shark


shuttle grey icon

Gris navette


PMS Cool Grey 11


CMYK 0.0.0.80


RGB 84.89.95


HEX #54595F


SCSS $color-shuttle-grey


graphics grey icon

Gris graphique


PMS Cool Grey 7


CMYK 0.0.0.60


RGB 106.110.116


HEX #6A6E74


graphics cool grey icon

Gris graphique clair


PMS Cool Grey 1


CMYK 0.0.0.12


RGB 157.165.170


HEX #9DA5AA


gainsboro icon

Gris étain

Utilisation : Divisions horizontales, verticales et en forme de vague.


HEX #D8D8D8


SCSS $color-gainsboro


athens icon

Gris Athènes

Utilisation : Arrière-plan de l’aide et d’état inactif.


HEX #F7F7F8


SCSS $color-athens-grey