Couleurs
Les couleurs contribuent à l’identification de nos applications ou services et font partie intégrante de la marque Assurance Maladie. Elles assurent l’homogénéité graphique des interfaces.
Utilisation
Chaque couleur base comporte 10 nuances qui sont nommées en fonction de leur luminosité.
Les nuances de couleurs les plus claires sont nommées lighten et les nuances de couleurs les plus foncées sont nommées darken.
<div class="am-blue">
<p class="am-blue-lighten-97--text">
Contenu
</p>
</div>
Dans le code ci-dessus la classe am-blue définit la couleur de fond de la <div> et la classe am-blue-lighten-97--text la couleur du texte pour l'élément <p>.
Palette de couleur
am-blue
darken-80
#020d1f
darken-60
#051a3e
darken-40
#07275c
darken-20
#0a347b
base
#0c419a
lighten-20
#3d67ae
lighten-40
#6d8dc2
lighten-60
#9eb3d7
lighten-80
#ced9eb
lighten-90
#e7ecf5
lighten-97
#f8f9fc
cyan
darken-80
#00212d
darken-60
#004259
darken-40
#006386
darken-20
#0084b2
base
#00a5df
lighten-20
#33b7e5
lighten-40
#66c9ec
lighten-60
#99dbf2
lighten-80
#ccedf9
lighten-90
#e5f6fc
lighten-97
#f7fcfe
frosted-blue
darken-80
#142327
darken-60
#28464d
darken-40
#3d6874
darken-20
#518b9a
base
#65aec1
lighten-20
#84becd
lighten-40
#a3ceda
lighten-60
#c1dfe6
lighten-80
#e0eff3
lighten-90
#f0f7f9
lighten-97
#fafdfd
parme
darken-80
#171c26
darken-60
#2f384d
darken-40
#465473
darken-20
#5e709a
base
#758cc0
lighten-20
#91a3cd
lighten-40
#acbad9
lighten-60
#c8d1e6
lighten-80
#e3e8f2
lighten-90
#f1f3f9
lighten-97
#fbfcfd
mauve
darken-80
#201224
darken-60
#402449
darken-40
#60376d
darken-20
#804992
base
#a05bb6
lighten-20
#b37cc5
lighten-40
#c69dd3
lighten-60
#d9bde2
lighten-80
#ecdef0
lighten-90
#f5eff8
lighten-97
#fcfafd
pink
darken-80
#2d051a
darken-60
#5a0a34
darken-40
#87104d
darken-20
#b41567
base
#e11a81
lighten-20
#e7489a
lighten-40
#ed76b3
lighten-60
#f3a3cd
lighten-80
#f9d1e6
lighten-90
#fce8f2
lighten-97
#fef8fb
brick
darken-80
#291112
darken-60
#522224
darken-40
#7b3237
darken-20
#a44349
base
#cd545b
lighten-20
#d7767c
lighten-40
#e1989d
lighten-60
#ebbbbd
lighten-80
#f5ddde
lighten-90
#faeeef
lighten-97
#fdfafa
orange
darken-80
#2d100b
darken-60
#5a2017
darken-40
#862f22
darken-20
#b33f2e
base
#e04f39
lighten-20
#e67261
lighten-40
#ec9588
lighten-60
#f3b9b0
lighten-80
#f9dcd7
lighten-90
#fcedeb
lighten-97
#fefaf9
yellow
darken-80
#302407
darken-60
#60480e
darken-40
#906b15
darken-20
#c08f1c
base
#f0b323
lighten-20
#f3c24f
lighten-40
#f6d17b
lighten-60
#f9e1a7
lighten-80
#fcf0d3
lighten-90
#fdf7e9
lighten-97
#fffdf8
green
darken-80
#112717
darken-60
#224e2d
darken-40
#347444
darken-20
#459b5a
base
#56c271
lighten-20
#78ce8d
lighten-40
#9adaaa
lighten-60
#bbe7c6
lighten-80
#ddf3e3
lighten-90
#eef9f1
lighten-97
#fafdfb
turquoise
darken-80
#00221c
darken-60
#004439
darken-40
#006755
darken-20
#008972
base
#00ab8e
lighten-20
#33bca5
lighten-40
#66cdbb
lighten-60
#99ddd2
lighten-80
#cceee8
lighten-90
#e5f7f4
lighten-97
#f7fcfc
grey
darken-80
#111212
darken-60
#222324
darken-40
#323535
darken-20
#434647
base
#545859
lighten-20
#76797a
lighten-40
#989b9b
lighten-60
#bbbcbd
lighten-80
#dddede
lighten-90
#eeeeee
lighten-97
#fafafa
Le niveau de contraste pour ces couleurs n’est pas suffisant. Leur usage est réservé à des éléments graphiques non signifiants.