Color
Last updated: 05/02/2024
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.
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).
Core colors
Text
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
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 |
Buttons
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
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
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. |
Â