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