Couleurs - palette - Color

 

La palette de couleurs du système de design de l’État est définie par la charte graphique de l'État.

Elle permet de créer une cohérence entre les interfaces et d’offrir une expérience optimale à l’utilisateur. Leur respect renforce la reconnaissance de la parole de l’État.

Chaque couleur est représentée par un “design token”, c’est-à-dire un nom transverse au design (à travers les bibliothèques Sketch et Figma) et au code.

À noter
On distingue deux typologies de “design token” : option et décision.
Les “options” sont les tokens de couleurs hors contexte, la palette brute à votre disposition. En pratique, les “décisions” recensent les usages contextuels de ces options dans le Système de Design (par exemple, sur un fond, une bordure, un texte).


Sommaire :


Convention de nommage des tokens

La nomenclature des tokens d’options est la suivante :

Couleur - NOM - Variante - indice - état

  • La couleur indique la nuance (sur l’arc en ciel) : bleu, vert, rouge, gris…

  • Le nom est celui hérité de la charte de l'État, le cas échéant.

  • La variante indique si la couleur est une couleur de référence (“main”), une variante pour thème clair (“sun”) ou thème sombre (“moon”). La plupart des couleurs n’ont pas de variante.

  • L’indice est le niveau de luminosité de la couleur, et sert à vérifier l’accessibilité des associations de couleurs. Consultez l’article de présentation détaillée du système de couleurs pour en savoir plus.

  • L'état indique, le cas échéant, la variation de la couleur au survol ou en état actif.

À chaque token est rattaché une valeur hexadécimale, une valeur RGB et une valeur HSL. Par exemple, la couleur de référence pour le vert “Tilleul Verveine” :

Palette de couleurs

L’utilisation de la palette de couleurs est obligatoire pour l’ensemble des sites. Il est en conséquence prohibé d’utiliser d’autres couleurs que celles proposées.

La palette de couleur du Système de Design de l’État comprend deux parties : la palette “thème clair” et la palette “thème sombre”. Chacune de ces parties se décompose en catégories :

  • couleurs primaires

  • couleurs neutres (“neutral”)

  • couleurs fonctionnelles

  • couleurs illustratives

Couleurs primaires

Construites à partir des deux grandes couleurs de la marque de l'État (bleu et rouge, le blanc étant intégrés aux neutres), elles sont utilisées pour marquer l’identité de l’État dans des composants qui véhiculent l’image de la marque (comme le bloc marque), ou sur lesquels il est nécessaire d’attirer l’attention de l’utilisateur, tels que les éléments cliquables ou les états actifs.

Couleurs neutres

Couleurs de base utilisées dans les typographies, fonds, contours et séparateurs dans la majorité des composants. Elles sont notamment utilisées dans les éléments non cliquables et pour représenter les états inactifs.

 

Couleurs système

Couleurs utilisées exclusivement pour représenter des états et des statuts.

 


Couleurs illustratives

Couleurs complémentaires de la charte de l'État, pouvant servir à la composition d’illustration. Dans le contexte du Système de Design de l'État, ces couleurs sont également utilisables pour accentuer des composants, c’est-à-dire varier la couleur de certains éléments (texte, fonds, bordures) pour apporter de la diversité ou une hiérarchie visuelle.

L’utilisation des couleurs illustratives est possible sur certains composants :
Voir la liste des composants accentuables.

Usage et correspondance des couleurs (thème clair / sombre)

Le Système de Design de l'État propose des composants adaptés à deux modes de couleurs :

  • Le thème clair : pour être accessible sur fond clair.

  • Le thème sombre : pour être accessible sur fond foncé.

L’utilisation du thème sombre est notamment recommandé pour réduire la consommation d'énergie et réduire la fatigue oculaire.

Il n'est pas possible de mélanger les couleurs du thème clair et celles du thème sombre.

Les correspondances de couleurs entre ces deux thèmes ont été définies en fonction des usages sur les différents composants. Elles sont automatiquement appliqués lorsque vous installez le thème sombre sur votre site.

Pour les développeurs :
Pour savoir comment mettre en place le thème sombre, rendez-vous sur la page “Paramètres d’affichage”

Les correspondances suivantes sont intégrées en code, en tant que sous-couche technique. Pour appliquer une couleur à un contexte, préférer l’utilisation des tokens de décision , qui intègrent la correspondance thème clair / thème sombre.

Sont présentées ci-dessous toutes les combinaisons possibles avec les couleurs présentes dans la charte. Un certain nombre ne sont pas effectivement utilisées dans les composants (pour l’instant).

Couleurs primaires

Bleu France

Correspondance

Thème clair

Thème sombre

Correspondance

Thème clair

Thème sombre

strong

$blue-france-sun-113

$blue-france-625

softest

$blue-france-850

$blue-france-200

light

$blue-france-925

$blue-france-125

lighter

$blue-france-950

$blue-france-100

lightest

$blue-france-975

$blue-france-75

main

$blue-france-main-525

$blue-france-main-525

inverted

$blue-france-975

$blue-france-113


Rouge Marianne

Correspondance

Thème clair

Thème sombre

Correspondance

Thème clair

Thème sombre

strong

$red-marianne-425

$red-marianne-625

softest

$red-marianne-850

$red-marianne-200

light

$red-marianne-925

$red-marianne-125

lighter

$red-marianne-950

$red-marianne-100

lightest

$red-marianne-975

$red-marianne-75

main

$red-marianne-main-472

$red-marianne-main-472

Couleurs neutres

Correspondance

Thème clair

Thème sombre

Correspondance

Thème clair

Thème sombre

black

$grey-50

$grey-1000

darkest

$grey-75

$grey-975

dark

$grey-125

$grey-925

strongest

$grey-200

$grey-850

strong

$grey-425

$grey-625

soft

$grey-625

$grey-425

softest

$grey-850

$grey-200

light

$grey-925

$grey-125

lighter

$grey-950

$grey-100

lightest

$grey-975

$grey-75

white

$grey-1000

$grey-50

elevated

$grey-1000

$grey-75

Couleurs système

Les correspondances étant les mêmes pour toutes les couleurs système (erreur, succès, avertissement et information), une seule sera présentée.

Correspondance

Thème clair

Thème sombre

Correspondance

Thème clair

Thème sombre

strong

$info-425

$info-625

softest

$info-850

$info-200

light

$info-925

$info-125

lighter

$info-950

$info-100

lightest

$info-975

$info-75

main

$info-main-525

$info-main-525

Couleurs illustratives

Les correspondances étant les mêmes pour les 17 couleurs illustratives, celles-ci sont présentées de manière générique.

Correspondance

Thème clair

Thème sombre

Correspondance

Thème clair

Thème sombre

strong

/couleur sun/

/couleur moon/

softest

$xx-850

$xx-200

light

$xx-925

$xx-125

lighter

$xx-950

$xx-100

lightest

$xx-975

$xx-75

main

/couleur main/

/couleur main/

Règles d’usage

Dans les composants existants

Au sein de l’existant, des tokens de décision sont systématiquement appliqués, en vue d’optimiser l’affichage des composants mais également la compréhension des interfaces.

  • Pour comprendre le rôle et le fonctionnement des tokens de décisions, consultez la page dédiée.

  • Il n’est pas permis de remplacer un token de décision au sein d’un composant si cela n’est pas indiqué dans la documentation (section “Accentuation” dans les pages de composants).

Accentuation

L’accentuation des composants est réglementée : un tableau récapitulatif des éléments qu’il est possible d’accentuer sur chaque composant est détaillé dans la page de documentation (paragraphe ‘Personnalisation > Couleurs d’accent’).

À l’heure actuelle, seuls les composants suivants sont ouverts à l’accentuation :

D’autres composants seront ajoutés à ce périmètre au fur et à mesure des mises à jour du Système de Design de l'État.
N’hésitez pas à nous faire des suggestions sur le sujet, sur le Slack ou en ouvrant un ticket.

Au-delà du Système de Design de l'État

Si vous êtes amenés à créer des pages uniques ou des composants inédits, prenez soin d’utiliser au maximum les tokens de décisions. Si ce n’est pas possible, merci de respecter les correspondances clair / sombre indiquées ci-dessus.

Hors des composants

La couleur est utile en dehors des composants :

  • Pour les fonds de page, il existe des tokens de décision dédiés.

  • Pour les pictogrammes illustratifs, utiliser les tokens appropriés.

  • Pour les illustrations, il est important en premier lieu de sélectionner des couleurs harmonieuses et correspondant à la thématique. Éviter un nombre de teintes trop important (moins de 5) qui compliqueront la conception et la force de l’illustration.

Accessibilité

Vos interfaces doivent être conformes aux exigences du Référentiel Général d’Amélioration de l’Accessibilité - RGAA dans sa version 4.

  • Toute information visuelle (exemple couleur ou illustration) doit être accompagnée d’une information textuelle dans le code (exemple classe, titre, description ou modificateur). Ces règles sont détaillées au cas par cas dans la section Accessibilité de chaque composant.

  • Vous devez respecter des ratios de contraste accessibles ;

  • L’ensemble des composants proposés respecte les normes exigés par le RGAA, mais lors de vos modifications de couleurs, vous devrez vérifier vos propres contrastes. Vous pouvez utiliser des outils en ligne ou des plugins comme Stark ou Cluse.

Pour connaître la réglementation, vous pouvez vous rendre sur ce site :
https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/#topic3