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

Color

Last updated: 05/02/2024

Overview (h2)

Overview

The colors defined in this section have been designed to be robust and to work cohesively. Be sure to also explore the other areas (Color for services and Color for graphics) to obtain a good understanding of how to use our color system.

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
 
Core colors (h2)

Core colors

Text (h3)

Text

Asset Publisher
Color Value Utility class CSS variable Use
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-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)
Links (h3)
Asset Publisher
Color Value Utility class CSS variable Use
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.
main-75 HEX #697188
RGB 105, 113, 136 		gs-u-color-main-75
gs-u-bg-color-main-75		 --gs-base-color-main-75

Attributes for this color: Accessible

For secondary links such as tool bars.
Buttons (h3)

Buttons

Asset Publisher
Color Value Utility class CSS variable Use
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-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-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.
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.
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.
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)
Lines and borders (h3)

Lines and borders

Asset Publisher
Color Value Utility class CSS variable Use
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-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)
Backgrounds (h3)

Backgrounds

Asset Publisher
Color Value Utility class CSS variable Use
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.
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.
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.
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.
colors-css

 

DisplayCustomFooter

Info Corner

Follow us

This site is managed by

publication office of the european union

Other publications