Color for graphics - Publications Office Web Guide

Dockbar

Color for graphics

Last updated: 05/08/2022

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 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-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.

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-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.

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-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.

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-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.

opyellow-110 HEX #EBBC00
RGB 235, 188, 0

Only for graphics.

opyellow-100 HEX #FFCC00
RGB 255, 204, 0

Only for graphics.

opyellow-75 HEX #FFD940
RGB 255, 217, 64

Only for graphics.

opyellow-50 HEX #FFE580
RGB 255, 229, 128

Only for graphics.

opyellow-25 HEX #FFEDA4
RGB 255, 237, 164

For graphics.

opyellow-10 HEX #FFF5CC
RGB 255, 245, 204

Only for graphics.

opyellow-5 HEX #FFFAE5
RGB 255, 250, 229

Only for graphics.

opblue-100 HEX #003399
RGB 0, 51, 153

Attributes for this color: Accessible

Only for graphics.

opblue-75 HEX #4066B2
RGB 64, 102, 178

Attributes for this color: Accessible

Only for graphics.

opblue-50 HEX #8099CC
RGB 128, 153, 204

Only for graphics.

opblue-25 HEX #BFCCE5
RGB 191, 204, 229

Only for graphics.

opblue-10 HEX #E8EDF6
RGB 232, 237, 246

For graphics, or for 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.

opblue-5 HEX #F0F3F9
RGB 240, 243, 249

For graphics, or for 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.

main-100 HEX #132760
RGB 19, 39, 96

Attributes for this color: Accessible

For Publications Office main navigation, headings (H1 and H2), accents on secondary navigations, and graphics.

lavender-130 HEX #451244
RGB 69, 18, 68

Attributes for this color: Accessible

For graphics, or backgrounds with white text.

lavender-120 HEX #641B62
RGB 100, 27, 98

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

Attributes for this color: Accessible

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

Also for the link visited state.

lavender-75 HEX #D97CD6
RGB 217, 124, 214

Only for graphics.

lavender-50 HEX #E8A9E6
RGB 232, 169, 230

Only for graphics.

lavender-25 HEX #F9DBFF
RGB 249, 219, 255

Only for graphics.

lavender-10 HEX #F9E7F8
RGB 249, 231, 248

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

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

Attributes for this color: Accessible

For main text.

gray-75 HEX #666666
RGB 102, 102, 102

Attributes for this color: Accessible

For secondary light text.

gray-60 HEX #858585
RGB 133, 133, 133

For borders of interactive components such as form fields and buttons.

gray-30 HEX #C2C2C2
RGB 194, 194, 194

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

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

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

For background color with accessible text. Make content stand out in cards, sidebars, tables or graphics; and use for the disabled button state background.

colors-css