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 basiques (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 basiques), 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 80 % 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 : #EB4C5E
RVB (rgb) : 235,76,94
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 : #EB4C5E
RVB (rgb) : 235,76,94
Variable CSS : --couleur-co-2 (SUI)
Le Maine Libre
Hexa : #009ADC
RVB (rgb) : 0,154,220
Variable CSS : --couleur-ml-1 (SUI)
Hexa : #33AEE3
RVB (rgb) : 51,174,227
Variable CSS : --couleur-ml-2 (SUI)
Presse-Océan
Hexa : #009ADC
RVB (rgb) : 0,154,220
Variable CSS : --couleur-po-1 (SUI)
Hexa : #33AEE3
RVB (rgb) : 51,174,227
Variable CSS : --couleur-po-2 (SUI)
Voiles et voiliers
Hexa : #20407A
RVB (rgb) : 32,64,122
Variable CSS : --couleur-vv-1 (SUI)
Hexa : #268BCD
RVB (rgb) : 38,139,205
Variable CSS : --couleur-vv-2 (SUI)
Bretons en cuisine
Hexa : #224672
RVB (rgb) : 34,70,114
Variable CSS : --couleur-bc-1 (SUI)
Hexa : #4E6B8E
RVB (rgb) : 78,107,142
Variable CSS : --couleur-bc-2 (SUI)
Bretons
Hexa : #1B181C
RVB (rgb) : 27,24,28
Variable CSS : --couleur-br-1 (SUI)
Hexa : #494649
RVB (rgb) : 73,70,73
Variable CSS : --couleur-br-2 (SUI)
Voyages à l'Ouest
Hexa : #005b90
RVB (rgb) : 0,91,144
Variable CSS : --couleur-vo-1 (SUI)
Hexa : #337ca6
RVB (rgb) : 51,124,166
Variable CSS : --couleur-vo-2 (SUI)
Lire Magazine
Hexa : #e30613
RVB (rgb) : 227,6,19
Variable CSS : --couleur-lm-1 (SUI)
Hexa : #e93842
RVB (rgb) : 233,56,66
Variable CSS : --couleur-lm-2 (SUI)
Terre de jardins
Hexa : #ea4f52
RVB (rgb) : 234,79,82
Variable CSS : --couleur-tj-1 (SUI)
Hexa : #ee7275
RVB (rgb) : 238,114,117
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 : --gris-plus-fonce (SUI)
Hexa : #858585
RVB (rgb) : 133,133,133
Variable CSS : --gris-fonce (SUI)
Actualité générale et locale, Lire magazine
Hexa : #E2001A
RVB (rgb) : 226,0,26
Variable CSS : --couleur-of-1 (SUI)
Hexa : #EB4C5E
RVB (rgb) : 235,76,94
Variable CSS : --couleur-of-2 (SUI)
Sport
Hexa : #3FA46E
RVB (rgb) : 63,164,110
Variable CSS : --couleur-sport-1 (OF)
Hexa : #65B68B
RVB (rgb) : 101,182,139
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) : 51,122,154
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 : #6B4FC7
RVB (rgb) : 107,79,199
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 : #F96161
RVB (rgb) : 249,97,97
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 : #33B5E5
RVB (rgb) : 51,181,229
Variable CSS : --couleur-tourisme-2 (OF)
Élections, Politique
Hexa : #021CA2
RVB (rgb) : 2,28,162
Variable CSS : --couleur-elections-1 (OF)
Hexa : #3549B5
RVB (rgb) : 53,73,181
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 : #3389FA
RVB (rgb) : 51,137,250
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 : #656B45
RVB (rgb) : 101,107,69
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 : #775781
RVB (rgb) : 119,87,129
Variable CSS : --couleur-temoignages-2 (OF)
Religions
Hexa : #A5A4C3
RVB (rgb) : 165,164,195
Variable CSS : --couleur-religions-1 (OF)
Hexa : #B7B6CF
RVB (rgb) : 183,182,207
Variable CSS : --couleur-religions-2 (OF)
Santé / Covid
Hexa : #54C5C4
RVB (rgb) : 84,197,196
Variable CSS : --couleur-sante-1 (OF)
Hexa : #76D1D0
RVB (rgb) : 118,209,208
Variable CSS : --couleur-sante-2 (OF)
Podcasts
Hexa : #3A3A3A
RVB (rgb) : 58,58,58
Variable CSS : --couleur-podcasts-1 (OF)
Hexa : #616161
RVB (rgb) : 97,97,97
Variable CSS : --couleur-podcasts-2 (OF)
Notre planète, Environnement
Hexa : #00BF7E
RVB (rgb) : 0,191,126
Variable CSS : --couleur-environnement-1 (OF)
Hexa : #33CC98
RVB (rgb) : 51,204,152
Variable CSS : --couleur-environnement-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 : #D5B533
RVB (rgb) : 213,181,51
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 : #F7D533
RVB (rgb) : 247,213,51
Variable CSS : --couleur-letour-2 (OF)
Roland-Garros
Hexa : #C85A19
RVB (rgb) : 200,90,25
Variable CSS : --couleur-rolandgarros-1 (OF)
Hexa : #D37B47
RVB (rgb) : 211,123,71
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 des thèmes SipaUI
Les couleurs basiques :
Il s’agit des couleurs principales de l’interface (fond de page, textes…).
Thème Ouest-France
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.
Hexa : #FFF
RVB (rgb) : 255,255,255
Variable CSS : --blanc (SUI)
Variable SCSS : $color-main-1 (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 : #000
RVB (rgb) : 0,0,0
Variable CSS : --noir (SUI)
Variable SCSS : $color-main-8 (SUI)
Thème Voiles et voiliers
Identiques aux couleurs basiques du thème Ouest-France.
Les couleurs d’accroche :
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 : #EB4C5E
RVB (rgb) : 235,76,94
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 : #268BCD
RVB (rgb) : 38,139,205
Variable CSS : --couleur-vv-2 (SUI)
Variable SCSS : $color-secondary-2 (SUI)
Les couleurs spécifiques :
Abonnement
- 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 SCSS : $color-subscription-1 (SUI)
Hexa : #D5B533
RVB (rgb) : 213,181,51
Variable CSS : --jaune-2 (SUI)
Variable SCSS : $color-subscription-2 (SUI)
Avertissements
- Ces couleurs permettent d’attirer l’attention et de signaler un état à l’utlisateur.
- Elles sont utlisées uniquement pour les textes ou les icônes.
Hexa : #3AAA35
RVB (rgb) : 58,170,53
Variable CSS : --vert (SUI)
Variable SCSS : $color-success (SUI)
Hexa : #E2001A
RVB (rgb) : 226,0,26
Variable CSS : --rouge (SUI)
Variable SCSS : $color-error (SUI)
Palette des réseaux sociaux
Apple
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --apple (SUI)
Dailymotion
Hexa : #333436
RVB (rgb) : 51,52,54
Variable CSS : --dailymotion (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)
Fluxrss
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 : #bd081c
RVB (rgb) : 189,8,28
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)
Tumblr
Hexa : #000
RVB (rgb) : 0,0,0
Variable CSS : --tumblr (SUI)
Twitch
Hexa : #6441a4
RVB (rgb) : 100,65,164
Variable CSS : --twitch (SUI)
Hexa : #1da1f2
RVB (rgb) : 29,161,242
Variable CSS : --twitter (SUI)
Viadeo
Hexa : #f07355
RVB (rgb) : 240,115,85
Variable CSS : --viadeo (SUI)
Youtube
Hexa : #f00
RVB (rgb) : 255,0,0
Variable CSS : --youtube (SUI)