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 | Utility class | CSS variable | Use |
---|---|---|---|---|
sky-130 |
HEX #005E7E RGB 0, 94, 126 |
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 #00678A RGB 0, 103, 138 |
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 #00749B RGB 0, 116, 155 |
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-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. |
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 #082B7A RGB 8, 43, 122 |
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. |