Skip to main content

Colour

Always use the official colours of GOV.GR.

Themes and variables​

GOV.GR uses two themes: the light, which is the default, and the dark theme. The colour palette is being adjusted to each theme.

If you are using @digigov/css, use the variables provided instead of the hexadecimal colour values directly. For example, you can write CSS rules like background-color: var(--color-primary); that use CSS variables. Alternatively, if you choose to use our Tailwind plugin, you can get the same results with the bg-primary class. Both of these solutions, avoid using the #003375 colour value directly. This way your service will always use the latest changes in our colour palette whenever you update your @digigov/css version.

Brand colours​

Primary

--color-primary

Secondary

--color-secondary

The primary colour of the GOV.GR brand is used exclusively in the Header.

The secondary colour of the GOV.GR brand is used in the horizontal dividers in the Header and Footer.

You can also use the secondary colour as a background in masthead component.

Status colours​

Success​

--color-success
--color-success-hover

Used the success colour as background colour in the following cases:

Error​

--color-error
--color-error-hover

The error colour should be used in cases of error or unwanted result, e.g. wrong phone format in one input or another validation error.

For this reason, it should only be used in the following cases:

Focus​

--color-focus

Only use the focus colour to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.

Typography colours​

Typography​

Main text

--color-base-content

Secondary text/ hint

--color-gray600
--color-link
--color-link-hover
--color-link-visited
--color-link-active

Grayscale colours​

--color-white
--color-gray50
--color-gray100
--color-gray200
--color-gray300
--color-gray400
--color-gray500
--color-gray600
--color-gray700
--color-gray800
--color-gray900
--color-black

Advanced knowledge​

Glossary​

Tint: A lighter value of a color.

Shade: A darker value of a color.

Color index: A numerical representation of a color token’s position in a list of available tints and shades (e.g., the 500 in blue-500 represents the fifth color).

Contrast ratio: The measurable difference in lightness between two comparative color values using the WCAG relative luminance formula.

Target contrast ratio: The desired contrast ratio between two color values when one of the color values is generated by a color tool.

Contrast-generated colors​

GOV.GR color themes should be generated using target contrast ratios with a specified background color. Certain color tokens' values are generated with confidence that they will meet or exceed specific WCAG AA contrast minimums.

According to webaim, the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

As the color token name increases in number (e.g., blue-700, blue-800, blue-900), the color value’s contrast with the background also increases. Because of this, colors progressively get darker in light theme and lighter in dark themes.

Color System​

Grays​

Each color theme uses gray-100 (white) as the default background color. The color value for gray-100 is different per color theme. GOV.GR generates all other gray color values by target contrast ratios with the background color value. Grays are designed to provide optimal contrast for text and icon content in the interface.

Grays 100 through 300 are used for background layers.

Colors​

GOV.GR uses 5 colors per color theme with a set of 7 tints and shades per color. Colors are used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication. Using too much color can be visually overwhelming and impacts user experience.

Use semantic colors to clearly and predictably communicate with a component’s appearance.

semantics

Static color palette​

Static colors have consistent color values across all themes and are not based on contrast with the background color of the theme. These are used when the identifiability of color's hue is a high priority, to ensure that a lighter color (such as yellow) remains a light value regardless of the theme.

Using color​

Colors for interactive states​

Theme-specific colors get darker in light themes and lighter in dark themes for each state.

states

Create hierarchy with background layer colors​

Use base layers for creating application hierarchy.

hierarchy