Publications Office of the EU
Color for services - Publications Office Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar
Color for services (NEW)

Color for services

Last updated: 05/02/2024

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 Utility class CSS variable Use
sky-130 HEX #145B81
RGB 20, 91, 129 		gs-u-color-sky-130
gs-u-bg-color-sky-130		 --gs-base-color-sky-130

Attributes for this color: Accessible

For graphics, or backgrounds with white text.
sky-120 HEX #176793
RGB 23, 103, 147 		gs-u-color-sky-120
gs-u-bg-color-sky-120		 --gs-base-color-sky-120

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 #1971A1
RGB 25, 113, 161 		gs-u-color-sky-110
gs-u-bg-color-sky-110		 --gs-base-color-sky-110

Attributes for this color: Accessible

For EUR-Lex accessible branded color text, EUR-Lex buttons and navigations.
sky-100 HEX #0099CC
RGB 0, 153, 204 		gs-c-color-sky-100
gs-c-bg-color-sky-100		 --gs-base-color-sky-100

Only for EUR-Lex branded decorative elements(external link)
sky-75 HEX #58BCDF
RGB 88, 188, 223 		gs-u-color-sky-75
gs-u-bg-color-sky-75		 --gs-base-color-sky-75

Only for graphics.
sky-50 HEX #6ADAFF
RGB 106, 218, 255 		gs-u-color-sky-50
gs-u-bg-color-sky-50		 --gs-base-color-sky-50

Only for graphics.
sky-25 HEX #B8EDFF
RGB 184, 237, 255 		gs-u-color-sky-25
gs-u-bg-color-sky-25		 --gs-base-color-sky-25

Only for graphics.
sky-10 HEX #E0F7FF
RGB 224, 247, 255 		gs-u-color-sky-10
gs-u-bg-color-sky-10		 --gs-base-color-sky-10

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 		gs-u-color-sky-5
gs-u-bg-color-sky-5		 --gs-base-color-sky-5

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 Utility class CSS variable Use
forest-130 HEX #1F5E00
RGB 31, 94, 0 		gs-u-color-forest-130
gs-u-bg-color-forest-130		 --gs-base-color-forest-130

Attributes for this color: Accessible

For graphics, or backgrounds with white text.
forest-120 HEX #287928
RGB 40, 100, 40 		gs-u-color-forest-120
gs-u-bg-color-forest-120		 --gs-base-color-forest-120

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Ted branded EUR-Lex buttons.
forest-110 HEX #2C862D
RGB 44, 134, 45 		gs-u-color-forest-110
gs-u-bg-color-forest-110		 --gs-base-color-forest-110

Attributes for this color: Accessible

For Ted accessible branded color text, Ted buttons and navigations.
forest-100 HEX #339900
RGB 51, 153, 0 		gs-c-color-forest-100
gs-c-bg-color-forest-100		 --gs-base-color-forest-100

Only for Ted branded decorative elements(external link)
forest-75 HEX #80DE85
RGB 128, 222, 133 		gs-u-color-forest-75
gs-u-bg-color-forest-75		 --gs-base-color-forest-75

Only for graphics.
forest-50 HEX #BBFF99
RGB 187, 255, 153 		gs-u-color-ted-50
gs-u-bg-color-forest-50		 --gs-base-color-forest-50

Only for graphics.
forest-25 HEX #D5FFC0
RGB 213, 255, 192 		gs-u-color-forest-25
gs-u-bg-color-forest-25		 --gs-base-color-forest-25

Only for graphics.
forest-10 HEX #EAF8E2
RGB 234, 248, 226 		gs-u-color-forest-10
gs-u-bg-color-forest-10		 --gs-base-color-forest-10

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.
forest-5 HEX #F3FBEF
RGB 243, 251, 239 		gs-u-color-forest-5
gs-u-bg-color-forest-5		 --gs-base-color-forest-5

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 Utility class CSS variable Use
earth-130 HEX #954B00
RGB 149, 75, 0 		gs-u-color-earth-130
gs-u-bg-color-earth-130		 --gs-base-color-earth-130

Attributes for this color: Accessible

For graphics, or backgrounds with white text.
earth-120 HEX #A25E1E
RGB 162, 94, 30 		gs-u-color-earth-120
gs-u-bg-color-earth-120		 --gs-base-color-earth-120

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Publications branded EUR-Lex buttons.
earth-110 HEX #AC6420
RGB 172, 100, 32 		gs-u-color-earth-110
gs-u-bg-color-earth-110		 --gs-base-color-earth-110

Attributes for this color: Accessible

For Publications accessible branded color text, EUR-Lex buttons and navigations.
earth-100 HEX #FF9933
RGB 255, 153, 51 		gs-c-color-earth-100
gs-c-bg-color-earth-100		 --gs-base-color-earth-100

Only for Publications branded decorative elements(external link)
earth-75 HEX #FFB66E
RGB 255, 182, 110 		gs-u-color-earth-75
gs-u-bg-color-earth-75		 --gs-base-color-earth-75

Only for graphics.
earth-50 HEX #FFCA95
RGB 255, 202, 149 		gs-u-color-earth-50
gs-u-bg-color-earth-50		 --gs-base-color-earth-50

Only for graphics.
earth-25 HEX #FFDEBC
RGB 255, 222, 188 		gs-u-color-earth-25
gs-u-bg-color-earth-25		 --gs-base-color-earth-25

Only for graphics.
earth-10 HEX #FFF1E4
RGB 255, 241, 228 		gs-u-color-earth-10
gs-u-bg-color-earth-10		 --gs-base-color-earth-10

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.
earth-5 HEX #FFF7EE
RGB 255, 247, 238 		gs-u-color-earth-5
gs-u-bg-color-earth-5		 --gs-base-color-earth-5

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 Utility class CSS variable Use
fire-130 HEX #9E270C
RGB 158, 39, 12 		gs-u-color-fire-130
gs-u-bg-color-fire-130		 --gs-base-color-fire-130

Attributes for this color: Accessible

For graphics, or backgrounds with white text.
fire-120 HEX #CB310F
RGB 203, 49, 15 		gs-u-color-fire-120
gs-u-bg-color-fire-120		 --gs-base-color-fire-120

Attributes for this color: Accessible

For graphics, backgrounds with white text, or the hover state of Whoiswho branded EUR-Lex buttons.
fire-110 HEX #DA3510
RGB 218, 53, 16 		gs-u-color-fire-110
gs-u-bg-color-fire-110		 --gs-base-color-fire-110

Attributes for this color: Accessible

For Whoiswho accessible branded color text, EUR-Lex buttons and navigations.
fire-100 HEX #EE441E
RGB 238, 68, 30 		gs-c-color-fire-100
gs-c-bg-color-fire-100		 --gs-base-color-fire-100

Only for Whoiswho branded decorative elements(external link)
fire-75 HEX #F09187
RGB 240, 145, 135 		gs-u-color-fire-75
gs-u-bg-color-fire-75		 --gs-base-color-fire-75

Only for graphics.
fire-50 HEX #F8AE9E
RGB 248, 174, 158 		gs-u-color-fire-50
gs-u-bg-color-fire-50		 --gs-base-color-fire-50

Only for graphics.
fire-25 HEX #FFDDD4
RGB 255, 221, 212 		gs-u-color-fire-25
gs-u-bg-color-fire-25		 --gs-base-color-fire-25

Only for graphics.
fire-10 HEX #FDEDE9
RGB 253, 237, 233 		gs-u-color-fire-10
gs-u-bg-color-fire-10		 --gs-base-color-fire-10

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.
fire-5 HEX #FEF6F4
RGB 254, 246, 244 		gs-u-color-fire-5
gs-u-bg-color-fire-5		 --gs-base-color-fire-5

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 accessible branded color text, 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

 

DisplayCustomFooter

Info Corner

Follow us

This site is managed by

publication office of the european union

Other publications