Couleurs
Les couleurs permettent à l’utilisateur d’être immergé dans une ambiance. Elles contribuent à créer une expérience utilisateur cohérente et optimisée.
Vous trouverez ci-dessous les couleurs des marques du groupe, une palette thématique éditoriale, une palette évènementielle éditoriale, les palettes des thèmes (chaque thème possède sa propre palette), ainsi que les couleurs de référence pour les réseaux sociaux.
La palette d’un thème est composée de couleurs primitives (celles intervenant sur quasiment toute l’interface pour le texte, les fonds de page…), de couleurs d’accroche (servant à mettre en évidence un composant important, ou juste à contraster avec les couleurs primitives), de couleurs spécifiques (pour illustrer des notions particulières comme l’abonnement, la réussite / l’échec…).
Pour chaque couleur, plusieurs références sont données :
- la valeur hexadécimale, standard pour les CSS,
- la valeur RVB, standard pour l’infographie et les CSS (rgb),
- la variable CSS, si elle est disponible,
- la variable SCSS, si elle est disponible.
Pour l’intégration CSS, utilisez en priorité décroissante les valeurs dans cet ordre : variable SCSS, variable CSS, valeur hexa, valeur RVB.
N. B. – La plupart des variables (celles liées à SIPA) sont définies par SipaUI. Toutefois, il en existe de spécifiques à Ouest-France (thématiques éditoriales, évènements éditoriaux). Celles-ci sont définies par les CSS du site Ouest-France et ne sont utilisables que pour les sites qui utilisent les assets de ce site. Pour les différencier, la mention « SUI » ou la mention « OF » sera notée après chaque variable.
Couleurs de marques
Une règle a été établie pour générer une couleur secondaire à partir d’une principale : cette couleur correspond à la couleur principale en transparence de 70 % sur fond blanc. Cette règle peut souffrir quelques dérogations imposées par des contraintes historiques ou techniques…
Ouest-France
Hexa : #E2001A
RVB (rgb) : 226,0,26
Variable CSS : --couleur-of-1 (SUI)
Hexa : #EB4D5F
RVB (rgb) : 235,77,95
Variable CSS : --couleur-of-2 (SUI)
Le Courrier de l’Ouest
Hexa : #E2001A
RVB (rgb) : 226,0,26
Variable CSS : --couleur-co-1 (SUI)
Hexa : #EB4D5F
RVB (rgb) : 235,77,95
Variable CSS : --couleur-of-2 (SUI)
Le Maine Libre
Hexa : #009ADC
RVB (rgb) : 0,154,220
Variable CSS : --couleur-ml-1 (SUI)
Hexa : #4DB8E6
RVB (rgb) : 77,184,230
Variable CSS : --couleur-ml-2 (SUI)
Presse-Océan
Hexa : #009ADC
RVB (rgb) : 0,154,220
Variable CSS : --couleur-po-1 (SUI)
Hexa : #4DB8E6
RVB (rgb) : 77,184,230
Variable CSS : --couleur-ml-2 (SUI)
Voiles et voiliers
Hexa : #20407A
RVB (rgb) : 32,64,122
Variable CSS : --couleur-vv-1 (SUI)
Hexa : #457aeb
RVB (rgb) : 69,122,235
Variable CSS : --couleur-vv-2 (SUI)
Bretons en cuisine
Hexa : #224672
RVB (rgb) : 34,70,114
Variable CSS : --couleur-bc-1 (SUI)
Hexa : #647E9C
RVB (rgb) : 100,126,156
Variable CSS : --couleur-bc-2 (SUI)
Bretons
Hexa : #1B181C
RVB (rgb) : 27,24,28
Variable CSS : --couleur-br-1 (SUI)
Hexa : #5F5D60
RVB (rgb) : 95,93,96
Variable CSS : --couleur-br-2 (SUI)
Voyages à l'Ouest
Hexa : #005b90
RVB (rgb) : 0,91,144
Variable CSS : --couleur-vo-1 (SUI)
Hexa : #4D8CB1
RVB (rgb) : 77,140,177
Variable CSS : --couleur-vo-2 (SUI)
Infomer
Hexa : #e30613
RVB (rgb) : 227,6,19
Variable CSS : --couleur-lm-1 (SUI)
Hexa : #EB515A
RVB (rgb) : 235,81,90
Variable CSS : --couleur-lm-2 (SUI)
Lire Magazine
Hexa : #e30613
RVB (rgb) : 227,6,19
Variable CSS : --couleur-lm-1 (SUI)
Hexa : #EB515A
RVB (rgb) : 235,81,90
Variable CSS : --couleur-lm-2 (SUI)
Terre de jardins
Hexa : #ea4f52
RVB (rgb) : 234,79,82
Variable CSS : --couleur-tj-1 (SUI)
Hexa : #F08486
RVB (rgb) : 240,132,134
Variable CSS : --couleur-tj-2 (SUI)
Infoconnect
Hexa : #E3EAF8
RVB (rgb) : 227,234,248
Variable CSS : --couleur-ic-1 (SUI)
Hexa : #29354E
RVB (rgb) : 41,53,78
Variable CSS : --couleur-ic-2 (SUI)
Hexa : #6A7283
RVB (rgb) : 106, 114, 131
Variable CSS : --couleur-ic-3 (SUI)
Palette des thématique éditoriale
Cette palette regroupe les couleurs utilisées pour illustrer les grands thèmes éditoriaux.
Base OF et JDLO, OF COM, OF Éditions
Hexa : #666666
RVB (rgb) : 102,102,102
Variable CSS : --couleur-base-1 (OF)
Hexa : #858585
RVB (rgb) : 133,133,133
Variable CSS : --couleur-base-2 (OF)
Actualité générale et locale
Hexa : #E2001A
RVB (rgb) : 226,0,26
Variable CSS : --couleur-actualite-1 (OF)
Hexa : #EB4D5F
RVB (rgb) : 235,77,95
Variable CSS : --couleur-actualite-2 (OF)
Sport
Hexa : #3FA46E
RVB (rgb) : 63,164,110
Variable CSS : --couleur-sport-1 (OF)
Hexa : #79BF9A
RVB (rgb) : 121,191,154
Variable CSS : --couleur-sport-2 (OF)
Économies, Auto / Mobilité, Entreprises
Hexa : #005981
RVB (rgb) : 0,89,129
Variable CSS : --couleur-entreprise-1 (OF)
Hexa : #337A9A
RVB (rgb) : 77,139,167
Variable CSS : --couleur-entreprise-2 (OF)
Culture, Médias, Festivals, Cinéma, À la page, Petits écrans
Hexa : #4623B9
RVB (rgb) : 70,35,185
Variable CSS : --couleur-culture-1 (OF)
Hexa : #7E65CE
RVB (rgb) : 126,101,206
Variable CSS : --couleur-culture-2 (OF)
Loisirs, Gaming, À la maison, ABC Loisirs, Shopping, Programme TV
Hexa : #F83939
RVB (rgb) : 248,57,57
Variable CSS : --couleur-loisirs-1 (OF)
Hexa : #FA7474
RVB (rgb) : 250,116,116
Variable CSS : --couleur-loisirs-2 (OF)
Tourisme, Patrimoine, Mer, Séries de l'été
Hexa : #00A3DF
RVB (rgb) : 0,163,223
Variable CSS : --couleur-tourisme-1 (OF)
Hexa : #4DBFE9
RVB (rgb) : 77,191,233
Variable CSS : --couleur-tourisme-2 (OF)
Élections, Politique
Hexa : #021CA2
RVB (rgb) : 2,28,162
Variable CSS : --couleur-elections-1 (OF)
Hexa : #4E60BE
RVB (rgb) : 78,96,190
Variable CSS : --couleur-elections-2 (OF)
Étudiant, Sur le vif, Formation
Hexa : #006BF9
RVB (rgb) : 0,107,249
Variable CSS : --couleur-etudiant-1 (OF)
Hexa : #4D97FB
RVB (rgb) : 77,151,251
Variable CSS : --couleur-etudiant-2 (OF)
Ligne de défense, D-Day
Hexa : #3F4616
RVB (rgb) : 63,70,22
Variable CSS : --couleur-defense-1 (OF)
Hexa : #797E5C
RVB (rgb) : 121,126,92
Variable CSS : --couleur-defense-2 (OF)
Égalité, Témoignages, Nos vies
Hexa : #552D61
RVB (rgb) : 85,45,97
Variable CSS : --couleur-temoignages-1 (OF)
Hexa : #886C90
RVB (rgb) : 136,108,144
Variable CSS : --couleur-temoignages-2 (OF)
Religions
Hexa : #A5A4C3
RVB (rgb) : 165,164,195
Variable CSS : --couleur-religions-1 (OF)
Hexa : #C0BFD5
RVB (rgb) : 192,191,213
Variable CSS : --couleur-religions-2 (OF)
Santé / Covid
Hexa : #54C5C4
RVB (rgb) : 84,197,196
Variable CSS : --couleur-sante-1 (OF)
Hexa : #87D6D6
RVB (rgb) : 135,214,214
Variable CSS : --couleur-sante-2 (OF)
Animaux
Hexa : #261A0C
RVB (rgb) : 38,26,12
Variable CSS : --couleur-animaux-1 (OF)
Hexa : #675F55
RVB (rgb) : 103,95,85
Variable CSS : --couleur-animaux-2 (OF)
Notre planète, Environnement
Hexa : #00BF7E
RVB (rgb) : 0,191,126
Variable CSS : --couleur-environnement-1 (OF)
Hexa : #4DD2A5
RVB (rgb) : 77,210,165
Variable CSS : --couleur-environnement-2 (OF)
Grand formats
Hexa : #122431
RVB (rgb) : 18,36,49
Variable CSS : --couleur-grand-format-1 (OF)
Hexa : #59666F
RVB (rgb) : 89,102,111
Variable CSS : --couleur-grand-format-2 (OF)
Prolongation
Hexa : #FBFF0B
RVB (rgb) : 251,255,11
Variable CSS : --couleur-prolongation-1 (OF)
Hexa : #000000
RVB (rgb) : 0,0,0
Variable CSS : --couleur-prolongation-2 (OF)
Abonnés
Hexa : #CBA200
RVB (rgb) : 203,162,0
Variable CSS : --couleur-abo-1 (SUI)
Hexa : #DBBE4D
RVB (rgb) : 219,190,77
Variable CSS : --couleur-abo-2 (SUI)
Contenu sponsorisé (OF Communication)
Hexa : #E4E3E1
RVB (rgb) : 228,227,225
Variable CSS : --couleur-sponso-1 (SUI)
Palette des évènements éditoriaux
Cette palette regroupe les couleurs utilisées pour illustrer les grands évènements éditoriaux.
Tour de France
Hexa : #F5CB00
RVB (rgb) : 245,203,0
Variable CSS : --couleur-letour-1 (OF)
Hexa : #F8DB4D
RVB (rgb) : 248,219,77
Variable CSS : --couleur-letour-2 (OF)
Roland-Garros
Hexa : #C85A19
RVB (rgb) : 200,90,25
Variable CSS : --couleur-rolandgarros-1 (OF)
Hexa : #D98C5E
RVB (rgb) : 217,140,94
Variable CSS : --couleur-rolandgarros-2 (OF)
Vendée Globe, Route du Rhum, Transat Jacques Vabre (et tout événement « mer »)
Reprendre les couleurs de la thématique éditoriale « Tourisme, Patrimoine, Mer, Séries de l'été ».
Palette SipaUI
La gamme primitive :
Il s’agit des couleurs principales de l’interface (fond de page, textes…). Elles sont identiques pour tous les thèmes
Elles sont composée d’une variation de gris qui aide à créer une hiérarchie, une profondeur et une lisibilité claire dans les interfaces.
N. B. – ces 10 primitives sont composées de 8 gris récurrents qui ont une variable SCSS et de 2 nouveaux gris qui servent dans un cas précis et n’ont pas de correspondances en variables SCSS.
Hexa : #fff
RVB (rgb) : 255,255,255
Variable CSS : --blanc (SUI)
Variable SCSS : $color-main-1 (SUI)
Hexa : #fafafa
RVB (rgb) : 250,250,250
Variable CSS : --quasi-blanc (SUI)
Hexa : #efefef
RVB (rgb) : 239,239,239
Variable CSS : --gris-plus-clair (SUI)
Variable SCSS : $color-main-2 (SUI)
Hexa : #e4e3e1
RVB (rgb) : 228,227,225
Variable CSS : --gris-clair (SUI)
Variable SCSS : $color-main-3 (SUI)
Hexa : #d4d4d4
RVB (rgb) : 212,212,212
Variable CSS : --gris (SUI)
Variable SCSS : $color-main-4 (SUI)
Hexa : #858585
RVB (rgb) : 133,133,133
Variable CSS : --gris-fonce (SUI)
Variable SCSS : $color-main-5 (SUI)
Hexa : #666
RVB (rgb) : 102,102,102
Variable CSS : --gris-plus-fonce (SUI)
Variable SCSS : $color-main-6 (SUI)
Hexa : #333
RVB (rgb) : 51,51,51
Variable CSS : --anthracite (SUI)
Variable SCSS : $color-main-7 (SUI)
Hexa : #121212
RVB (rgb) : 18,18,18
Variable CSS : --quasi-noir (SUI)
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --noir (SUI)
Variable SCSS : $color-main-8 (SUI)
La gamme thématique sites :
Il s’agit des couleurs secondaires, qui servent à rappeler la marque et à mettre en avant des composants (notamment les composants interactifs comme les liens, les boutons…).
Thème Ouest-France
Hexa : #e2001a
RVB (rgb) : 226,0,26
Variable CSS : --couleur-of-1 (SUI)
Variable SCSS : $color-secondary-1 (SUI)
Hexa : #eb4d5f
RVB (rgb) : 235,77,95
Variable CSS : --couleur-of-2 (SUI)
Variable SCSS : $color-secondary-2 (SUI)
Thème Voiles et voiliers
Hexa : #20407a
RVB (rgb) : 32,64,122
Variable CSS : --couleur-vv-1 (SUI)
Variable SCSS : $color-secondary-1 (SUI)
Hexa : #457aeb
RVB (rgb) : 69,122,235
Variable CSS : --couleur-vv-2 (SUI)
Variable SCSS : $color-secondary-2 (SUI)
La gamme d’accroche :
Il s’agit des autres couleurs à usages spécifiques (abonnement, alertes, mise en avant…).
- Les couleurs -1 et -2 sont utlisées uniquement pour les textes ou les icônes.
- La couleur -3 est utlisée uniquement pour des fonds de bloc.
- La couleur -2 comme pour les couleurs de marque correspond à 70 % de la -1 sur fond blanc.
- La couleur -3 correspond à 10 % de la -1 sur fond blanc.
La couleur « projecteur » (pour mise en avant de contenu) n’existe qu’en une seule valeur.
Abonnement et messages d’information
- Cette identité unique est dédiée aux éléments liés aux processus d’abonnement et aux services réservés aux abonnés.
- Les couleurs « Abonnement » sont majeures devant toutes les autres, exemple : un bouton « Je valide » d’un formulaire d’abonnement à Ouest-France.
Hexa : #cba200
RVB (rgb) : 203,162,0
Variable CSS : --jaune (SUI)
Variable CSS : --couleur-abo-1 (SUI)
Variable SCSS : $color-subscription-1 (SUI)
Hexa : #dbbe4d
RVB (rgb) : 219,190,77
Variable CSS : --jaune-2 (SUI)
Variable CSS : --couleur-abo-2 (SUI)
Variable SCSS : $color-subscription-2 (SUI)
Hexa : #faf6e6
RVB (rgb) : 250,246,230
Variable CSS : --jaune-3 (SUI)
Avertissements
Ces couleurs permettent d’attirer l’attention et de signaler un état à l’utlisateur.
Hexa : #3aaa35
RVB (rgb) : 58,170,53
Variable CSS : --vert-1 (SUI)
Variable CSS : --couleur-succes-1 (SUI)
Variable SCSS : $color-success (SUI)
Hexa : #75c472
RVB (rgb) : 117,196,114
Variable CSS : --vert-2 (SUI)
Hexa : #ebf7eb
RVB (rgb) : 235,247,235
Variable CSS : --vert-3 (SUI)
Hexa : #e2001a
RVB (rgb) : 226,0,26
Variable CSS : --rouge-1 (SUI)
Variable CSS : --couleur-erreur-1 (SUI)
Variable SCSS : $color-error (SUI)
Hexa : #eb4d5f
RVB (rgb) : 235,77,95
Variable CSS : --rouge-2 (SUI)
Hexa : #fce5e8
RVB (rgb) : 252,230,232
Variable CSS : --rouge-3 (SUI)
Projecteur
Cette couleur permet d’attirer l’attention sur un contenu que l’on veut mettre en valeur sur une page.
Hexa : #122431
RVB (rgb) : 18,36,49
Variable CSS : --bleuet-1 (SUI)
Variable CSS : --couleur-projecteur-1 (SUI)
Variable SCSS : $color-featured-1 (SUI)
Hexa : #59666F
RVB (rgb) : 89,102,111
Variable CSS : --bleuet-2 (SUI)
Variable CSS : --couleur-projecteur-2 (SUI)
Variable SCSS : $color-featured-2 (SUI)
Correspondances des couleurs sur fond sombre
Toutes ces couleurs SipaUI sont prévues pour un affichage sur fond clair (un fond blanc en fait), elles ne fonctionnent donc pas sur un fond sombre (emplois de la classe su-negative ou passage du navigateur en mode sombre). Il a donc été prévu une version spécifique de ces couleurs dans ce cas de figure avec les règles suivantes :
- Chaque gris de la gamme primitive en mode clair a une version arbitrairement décidée en mode sombre (cf. tableau ci-dessous).
- La couleur d’accroche -1 est remplacée par la couleur -2 (plus claire et moins vive) ; elle n’est donc pas utilisée sur fond sombre.
- La couleur d’accroche -2 ne change pas.
- La couleur d’accroche -3 correspond à 10% de la couleur 1 sur fond sombre (#121212).
Tableau de correspondances
| Nom | Défaut | Fond sombre |
|---|---|---|
| Blanc | #fff | #333 |
| Quasi-blanc | #fafafa | #333 |
| Gris plus clair | #efefef | #333 |
| Gris clair | #e4e3e1 | #333 |
| Gris | #d4d4d4 | #858585 |
| Gris foncé | #858585 | #d4d4d4 |
| Gris plus foncé | #666 | #efefef |
| Anthracite | #333 | #fff |
| Quasi-noir | #121212 | #121212 |
| Noir | #000 | #fff |
| Jaune-1 | #cba200 | #dbbe4d |
| Jaune-2 | #dbbe4d | #dbbe4d |
| Jaune-3 | #faf6e6 | #242010 |
| Vert-1 | #3aaa35 | #75c472 |
| Vert-2 | #75c472 | #75c472 |
| Vert-3 | #ebf7eb | #162115 |
| Rouge-1 | #e2001a | #eb4d5f |
| Rouge-2 | #eb4d5f | #eb4d5f |
| Rouge-3 | #fce6e8 | #271013 |
| Bleuet-1 | #122431 | #59666F |
Palette des réseaux sociaux
Amazon Music
Hexa : #34D1D9
RVB (rgb) : 51,209,217
Variable CSS : --amazon-music (SUI)
Apple
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --apple (SUI)
Apple Podcast
Hexa : #852DC4
RVB (rgb) : 133,45,196
Variable CSS : --apple-podcast (SUI)
Bluesky
Hexa : #1185FE
RVB (rgb) : 17,133,254
Variable CSS : --bluesky (SUI)
Dailymotion
Hexa : #333436
RVB (rgb) : 51,52,54
Variable CSS : --dailymotion (SUI)
Deezer
Hexa : #A238FF
RVB (rgb) : 162,56,255
Variable CSS : --deezer (SUI)
Hexa : #1877f2
RVB (rgb) : 24,119,242
Variable CSS : --facebook (SUI)
Flickr
Hexa : #0063dc
RVB (rgb) : 0,99,220
Variable CSS : --flickr (SUI)
Hexa : #e12828
RVB (rgb) : 225,40,40
Variable CSS : --flipboard (SUI)
Flux RSS
Hexa : #f0801a
RVB (rgb) : 240,128,26
Variable CSS : --fluxrss (SUI)
Hexa : #db4437
RVB (rgb) : 219,68,55
Variable CSS : --google (SUI)
Hexa : #fd0075
RVB (rgb) : 253,0,117
Variable CSS : --instagram (SUI)
Hexa : #2867b2
RVB (rgb) : 40,103,178
Variable CSS : --linkedin (SUI)
Hexa : #e60023
RVB (rgb) : 230,0,35
Variable CSS : --pinterest (SUI)
Snapchat
Hexa : #fffc00
RVB (rgb) : 255,252,0
Variable CSS : --snapchat (SUI)
Soundcloud
Hexa : #F50
RVB (rgb) : 255,85,0
Variable CSS : --soundcloud (SUI)
Spotify
Hexa : #1ED760
RVB (rgb) : 30,215,96
Variable CSS : --spotify (SUI)
Tumblr
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --tumblr (SUI)
Twitch
Hexa : #6441a4
RVB (rgb) : 100,65,164
Variable CSS : --twitch (SUI)
Viadeo
Hexa : #f07355
RVB (rgb) : 240,115,85
Variable CSS : --viadeo (SUI)
Hexa : #28d146
RVB (rgb) : 40,209,70
Variable CSS : --whatsapp (SUI)
X
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --x (SUI)
Youtube
Hexa : #f00
RVB (rgb) : 255,0,0
Variable CSS : --youtube (SUI)