Publications Office of the EU
Color for graphics - Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar

Color for graphics

Last updated: 05/02/2024

Overview graphics (h2)

Overview

All the colors defined in this page may be used for graphics. However, it is important to follow some basic guidelines.

First let us define what is meant by 'grahics'.

Graphics refers to banners, charts, infographics or illustrations. User interface components such as headings, footers, navigations, buttons, links, body text, tables, containers, sidebars, etc. are NOT considered graphics.

Basic guidelines

  1. 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.
  2. Use darker tones (typically 110 and above) mainly for information that must be clearly visible and accessible.
  3. Use light background colors (typically 10 and 5) with accessible text.
  4. If you are uncertain, use the External linkWebAIM contrast checker to verify accessibility.
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
 
Graphics (h2)

Graphics colors

Asset Publisher
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-85 HEX #57AEDE
RGB 87, 174, 222 		gs-u-color-sky-85
gs-u-bg-color-sky-85		 --gs-base-color-sky-85

Only for graphics.
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 #F4FCFF
RGB 244, 252, 255 		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.
opyellow-110 HEX #EBBC00
RGB 235, 188, 0 		gs-u-color-opyellow-110
gs-u-bg-color-opyellow-110		 --gs-base-color-opyellow-110

Only for graphics.
opyellow-100 HEX #FFCC00
RGB 255, 204, 0 		gs-u-color-opyellow-100
gs-u-bg-color-opyellow-100		 --gs-base-color-opyellow-100

Only for graphics.
opyellow-75 HEX #FFD940
RGB 255, 217, 64 		gs-u-color-opyellow-75
gs-u-bg-color-opyellow-75		 --gs-base-color-opyellow-75

Only for graphics.
opyellow-50 HEX #FFE580
RGB 255, 229, 128 		gs-u-color-opyellow-50
gs-u-bg-color-opyellow-50		 --gs-base-color-opyellow-50

Only for graphics.
opyellow-25 HEX #FFEDA4
RGB 255, 237, 164 		gs-u-color-opyellow-25
gs-u-bg-color-opyellow-25		 --gs-base-color-opyellow-25

For graphics.
opyellow-10 HEX #FFF5CC
RGB 255, 245, 204 		gs-u-color-opyellow-10
gs-u-bg-color-opyellow-10		 --gs-base-color-opyellow-10

Only for graphics.
opyellow-5 HEX #FFFAE5
RGB 255, 250, 229 		gs-u-color-opyellow-5
gs-u-bg-color-opyellow-5		 --gs-base-color-opyellow-5

Only for graphics.
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-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.
gray-100 HEX #333333
RGB 51, 51, 51 		gs-u-color-gray-100
gs-u-bg-color-gray-100		 --gs-base-color-gray-100

Attributes for this color: Accessible

For main text.
gray-75 HEX #666666
RGB 102, 102, 102 		gs-u-color-gray-75
gs-u-bg-color-gray-75		 --gs-base-color-gray-75

Attributes for this color: Accessible

For secondary light text.
gray-60 HEX #858585
RGB 133, 133, 133 		gs-u-color-gray-60
gs-u-bg-color-gray-60		 --gs-base-color-gray-60

For borders of interactive components such as form fields and buttons.
gray-30 HEX #C2C2C2
RGB 194, 194, 194 		gs-u-color-gray-30
gs-u-bg-color-gray-30		 --gs-base-color-gray-30

For text in disabled buttons or navigations; combine with "gray-5" background color. Learn why disabled button states are considered decorative(external link)
gray-20 HEX #D8D8D8
RGB 216, 216, 216 		gs-u-color-gray-20
gs-u-bg-color-gray-20		 --gs-base-color-gray-20

Use for horizontal rules, menu divider lines, container and decorative parts of UI components. Learn why disabled button states are considered decorative(external link)
gray-10 HEX #EEEEEE
RGB 238, 238, 238 		gs-u-color-gray-10
gs-u-bg-color-gray-10		 --gs-base-color-gray-10

For darker background color with accessible text. Make content stand out in cards, sidebars, tables, graphics or navigation selected states.

Note: "gray-10" for selected state must be used in conjunction with another visual element with at least a 4.5:1 contrast ratio. Example: the side navigation on this page.
gray-5 HEX #F5F5F5
RGB 245, 245, 245 		gs-u-color-gray-5
gs-u-bg-color-gray-5		 --gs-base-color-gray-5

For background color with accessible text. Make content stand out in cards, sidebars, tables or graphics; and use for the disabled button state background.
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-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.
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-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.
eu-gray-140 HEX #171A22
RGB 23, 26, 34 		gs-u-color-eu-gray-140
gs-u-bg-color-eu-gray-140		 --gs-base-color-eu-gray-140
eu-gray-100 HEX #262B38
RGB 38, 43, 56 		gs-u-color-eu-gray-100
gs-u-bg-color-eu-gray-100		 --gs-base-color-eu-gray-100
eu-gray-80 HEX #515560
RGB 81, 85, 96 		gs-u-color-eu-gray-80
gs-u-bg-color-eu-gray-80		 --gs-base-color-eu-gray-80

For site name and inactive breadcrumbs (current location)
eu-blue-140 HEX #082B7A
RGB 8, 43, 122 		gs-u-color-eu-blue-140
gs-u-bg-color-eu-blue-140		 --gs-base-color-eu-blue-140

Attributes for this color: Accessible
eu-blue-110 HEX #0D40B7
RGB 13, 64, 183 		gs-u-color-eu-blue-110
gs-u-bg-color-eu-blue-110		 --gs-base-color-eu-blue-110

Attributes for this color: Accessible

For the hover state of main Main buttons.
eu-blue-100 HEX #0E47CB
RGB 14, 71, 203 		gs-u-color-eu-blue-100
gs-u-bg-color-eu-blue-100		 --gs-base-color-eu-blue-100

Attributes for this color: Accessible

For text links and main buttons.
eu-blue-80 HEX #3E6CD5
RGB 62, 108, 213 		gs-u-color-eu-blue-80
gs-u-bg-color-eu-blue-80		 --gs-base-color-eu-blue-80
eu-blue-60 HEX #6E91E0
RGB 110, 145, 224 		gs-u-color-eu-blue-60
gs-u-bg-color-eu-blue-60		 --gs-base-color-eu-blue-60
eu-blue-20 HEX #CFDAF5
RGB 207, 218, 245 		gs-u-color-eu-blue-20
gs-u-bg-color-eu-blue-20		 --gs-base-color-eu-blue-20

For special horizontal rules.
eu-blue-10 HEX #E7EDFA
RGB 231, 237, 250 		gs-u-color-eu-blue-10
gs-u-bg-color-eu-blue-10		 --gs-base-color-eu-blue-10

For the hover state of secondary blue buttons.

Note: Only use when the button text is accompanied by an accessible visual element, such as an icon, that clearly conveys it is clickable.

For graphics, or for special strong background color with accessible text. Use to make content stand out in cards, sidebars or tables.
eu-blue-5 HEX #F3F6FC
RGB 243, 246, 252 		gs-u-color-eu-blue-5
gs-u-bg-color-eu-blue-5		 --gs-base-color-eu-blue-5

For secondary blue buttons.

Note: Only use when the button text is accompanied by an accessible visual element, such as an icon, that clearly conveys it is clickable.

For graphics, or for special background color with accessible text. Use to make content stand out in cards, sidebars or tables.
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-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.
colors-css