Color for services - Publications Office Web Guide
Dockbar
Color for services (NEW)

Color for services

Last updated: 05/08/2022

Overview services (h2)

Overview

Unique service colors help distinguish, for example, Ted from EUR-Lex.

Service colors 100 and 110 are most often the pillars of the service brand or visual identity. The lightest shades, 10 and 5, are used as support elements to make content stand out in cards, sidebars or tables. The darkest shades, 120-130, should be used mainly for accessible elements in graphics.

Note: Do not use the color of a particular service repeatedly and prominently if your content or site is NOT about the service. Service colors are meant to identify specific services.

hr rule
 
Getting started (h2)

Getting started

First review the key terms used and then proceed to the colors section.

Color

Displays the color name. The first part indicates the main functionality or its service family. The last part indicates the darkness or lightness of the color; 130 is typically the darkest and 5 is the lightest.

Value

Displays the HEX and the RGB color values.

Utility class

Displays the CSS class you may use to reference this color.
This feature is currently only available if your site is hosted on the Publications Office portal.

The first class gs-u-color-name-XX is for font-color, and the second class gs-u-bg-color-name-XX is for background-color.

CSS variable

Insert our CSS variables into your custom classes or inline styles to use our global definitions.
This feature is currently only available if your site is hosted on the Publications Office portal.

For example, we use the CSS variable --gs-base-color-lavender-110 below to make the word COLOR lavender.

<span style="color: var(--gs-base-color-lavender-110);">COLOR</span>

External linkLearn more about CSS variables

Use

Provides the main uses of the color, and indicates if it is accessible when used with white or light colors 10 or 5.

Note: When using accessible 110 service colors on light colored backgrounds (10 or 5), they are only accessible as large text (at least 19px and bold, or at least 24px normal font weight).

hr rule
 

Service colors

EUR-Lex (h3)

EUR-Lex

Color Value Use
sky-130 HEX #005E7E
RGB 0, 94, 126

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

sky-120 HEX #00678A
RGB 0, 103, 138

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of EUR-Lex branded EUR-Lex buttons.

sky-110 HEX #00749B
RGB 0, 116, 155

Attributes for this color: Accessible

For EUR-Lex branded headings (H1 and H2), EUR-Lex buttons and navigations.

sky-100 HEX #0099CC
RGB 0, 153, 204

Only for EUR-Lex branded decorative elements(external link)

sky-75 HEX #58BCDF
RGB 88, 188, 223

Only for graphics.

sky-50 HEX #6ADAFF
RGB 106, 218, 255

Only for graphics.

sky-25 HEX #B8EDFF
RGB 184, 237, 255

Only for graphics.

sky-10 HEX #E0F7FF
RGB 224, 247, 255

For EUR-Lex special strong background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

sky-5 HEX #EFF9FB
RGB 239, 249, 251

For EUR-Lex special background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

Ted (h3)

Ted

Asset Publisher
Color Value Use
ted-130 HEX #1F5E00
RGB 31, 94, 0

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

ted-120 HEX #287928
RGB 40, 100, 40

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Ted branded EUR-Lex buttons.

ted-110 HEX #2C862D
RGB 44, 134, 45

Attributes for this color: Accessible

For Ted branded headings (H1 and H2), EUR-Lex buttons and navigations.

ted-100 HEX #339900
RGB 51, 153, 0

Only for Ted branded decorative elements(external link)

ted-75 HEX #80DE85
RGB 128, 222, 133

Only for graphics.

ted-50 HEX #BBFF99
RGB 187, 255, 153

Only for graphics.

ted-25 HEX #D5FFC0
RGB 213, 255, 192

Only for graphics.

ted-10 HEX #EAF8E2
RGB 234, 248, 226

For Ted special strong background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

ted-5 HEX #F3FBEF
RGB 243, 251, 239

For Ted special background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

Publications (h3)

Publications

Asset Publisher
Color Value Use
publications-130 HEX #954B00
RGB 149, 75, 0

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

publications-120 HEX #A25E1E
RGB 162, 94, 30

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Publications branded EUR-Lex buttons.

publications-110 HEX #AC6420
RGB 172, 100, 32

Attributes for this color: Accessible

For Publications branded headings (H1 and H2), EUR-Lex buttons and navigations.

publications-100 HEX #FF9933
RGB 255, 153, 51

Only for Publications branded decorative elements(external link)

publications-75 HEX #FFB66E
RGB 255, 182, 110

Only for graphics.

publications-50 HEX #FFCA95
RGB 255, 202, 149

Only for graphics.

publications-25 HEX #FFDEBC
RGB 255, 222, 188

Only for graphics.

publications-10 HEX #FFF1E4
RGB 255, 241, 228

For Publications special strong background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

publications-5 HEX #FFF7EE
RGB 255, 247, 238

For Publications special background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

Whoiswho (h3)

Whoiswho

Asset Publisher
Color Value Use
whoiswho-130 HEX #9E270C
RGB 158, 39, 12

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

whoiswho-120 HEX #CB310F
RGB 203, 49, 15

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Whoiswho branded EUR-Lex buttons.

whoiswho-110 HEX #DA3510
RGB 218, 53, 16

Attributes for this color: Accessible

For Whoiswho branded headings (H1 and H2), EUR-Lex buttons and navigations.

whoiswho-100 HEX #EE441E
RGB 238, 68, 30

Only for Whoiswho branded decorative elements(external link)

whoiswho-75 HEX #F09187
RGB 240, 145, 135

Only for graphics.

whoiswho-50 HEX #F8AE9E
RGB 248, 174, 158

Only for graphics.

whoiswho-25 HEX #FFDDD4
RGB 255, 221, 212

Only for graphics.

whoiswho-10 HEX #FDEDE9
RGB 253, 237, 233

For Whoiswho special strong background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

whoiswho-5 HEX #FEF6F4
RGB 254, 246, 244

For Whoiswho special background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

Research (h3)

Research

Asset Publisher
Color Value Utility class CSS variable Use
lavender-130 HEX #451244
RGB 69, 18, 68
gs-u-color-lavender-130
gs-u-bg-color-lavender-130
--gs-base-color-lavender-130

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

lavender-120 HEX #641B62
RGB 100, 27, 98
gs-u-color-lavender-120
gs-u-bg-color-lavender-120
--gs-base-color-lavender-120

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Research branded Research buttons.

lavender-110 HEX #76017A
RGB 118, 1, 122
gs-u-color-lavender-110
gs-u-bg-color-lavender-110
--gs-base-color-lavender-110

Attributes for this color: Accessible

For Research branded headings (H1 and H2), Research buttons and navigations.

Also for the link visited state.

lavender-100 HEX #93278F
RGB 147, 39, 143
gs-c-color-lavender-100
gs-c-bg-color-lavender-100
--gs-base-color-lavender-100

Only for Research branded decorative elements(external link)

lavender-75 HEX #D97CD6
RGB 217, 124, 214
gs-u-color-lavender-75
gs-u-bg-color-lavender-75
--gs-base-color-lavender-75

Only for graphics.

lavender-50 HEX #E8A9E6
RGB 232, 169, 230
gs-u-color-lavender-50
gs-u-bg-color-lavender-50
--gs-base-color-lavender-50

Only for graphics.

lavender-25 HEX #F9DBFF
RGB 249, 219, 255
gs-u-color-lavender-25
gs-u-bg-color-lavender-25
--gs-base-color-lavender-25

Only for graphics.

lavender-10 HEX #F9E7F8
RGB 249, 231, 248
gs-u-color-lavender-10
gs-u-bg-color-lavender-10
--gs-base-color-lavender-10

For Research special strong background color with accessible text Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

lavender-5 HEX #FDF7FD
RGB 253, 247, 253
gs-u-color-lavender-5
gs-u-bg-color-lavender-5
--gs-base-color-lavender-5

For Research special background color with accessible text. Use for special occasions to make content stand out in cards, sidebars or tables.

Note: For graphics, you may use as needed across all Publications Office assets.

colors-css