Guide de style - Couleurs

Palette de couleurs

L'identité visuelle d'un site est constituée d'éléments facilement reconnaissables et associés à celui-ci. La palette de couleurs en est un élément essentiel, issu du travail de conception UX/UI. Ces couleurs prédéfinies sont déclinées en plusieurs catégories en fonction de leur rôle.

Couleurs primaires

C'est la couleur prédominante du site.

  • Primary Darker

    #0F3F68

  • Primary Dark

    #155891

  • Primary

    #1D71B8

Couleurs secondaires

Il s'agit là de la couleur qui vient soit se combiner avec la couleur principale, soit en alternative de celle-ci dans des contextes particuliers.

  • Secondary

    #D20050

Couleurs neutres

Plutôt réservées aux textes, aux couleurs d'arrière-plan, aux bordures et aux séparateurs, elles se veulent plus discrètes et sont en principe des niveaux de gris.

  • Black

    #343852

  • Gray-800

    #464C6D

  • Gray-700

    #697097

  • Gray-600

    #969CBB

  • Gray-500

    #C5C8DA

  • Gray-400

    #DEE0EA

  • Gray-300

    #EDEEF3

  • Gray-200

    #F2F3F7

  • Gray-100

    #F8F9FB

  • White

    #FFFFFF

Couleurs fonctionnelles

Les couleurs fonctionnelles ne sont pas propres au site, mais représentent des cas de figure universellement rencontrés quelle que soit la plateforme (erreur, succès, etc.).

  • Error

    #D20024

  • Warning

    #E69215

  • Success

    #9AB938

  • Information

    #369AEE

Couleurs illustratives

Ce sont des couleurs complémentaires, pouvant servir à la réalisation d’illustration, de schéma et de graphique. Leurs utilisations sur des composants ou sur du texte est interdit.

  • Green Darker

    #184737

  • Green Dark

    #316E58

  • Green

    #368E6E

  • Green Light

    #4EC79C

  • Green Lighter

    #A3E6CE

  • Orange Darker

    #8B5612

  • Orange Dark

    #BC771F

  • Orange

    #F29A2B

  • Orange Light

    #FFC882

  • Orange Lighter

    #FFE9CE

  • Yellow Darker

    #B4A300

  • Yellow Dark

    #E1CE16

  • Yellow

    #FAE832

  • Yellow Light

    #FFF58C

  • Yellow Lighter

    #FFFBD1

  • Purple Darker

    #3E305B

  • Purple Dark

    #5E4C84

  • Purple

    #957EC6

  • Purple Light

    #DAC8FF

  • Purple Lighter

    #EEE6FF

  • Pink Darker

    #751F51

  • Pink Dark

    #AD4180

  • Pink

    #EA74B9

  • Pink Light

    #FFC7E8

  • Pink Lighter

    #FFF2F9

  • Red Darker

    #6F0000

  • Red Dark

    #A00000

  • Red

    #E11414

  • Red Light

    #FF5555

  • Red Lighter

    #FFA6A6

Accessibilité

L'utilisation des couleurs est soumise à des règles d'accessibilité assez strictes, ayant notamment trait à un niveau minimal de constraste entre le texte et le fond pour les utilisateurs malvoyants.

Ressources externes: