Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Colour

Our brand colours and how to apply them.

Using colour

The colour palette we use follows the wider branding of the Scottish Government. We also use colour to help users prioritise and differentiate information. For example:

  • yellow for our focus states
  • red as a warning colour
  • green to confirm something

If your service or site is going to be a subdomain of either gov.scot or mygov.scot, for example newservice.gov.scot, then our colour palette is the one you should use.

Colour contrast

Good colour contrast uses a dark colour on a light background, or a light colour on a dark background. It’s important that the contrast ratio of text and interactive elements on public sector sites meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1). We’ve tested colours in our colour palette to ensure the palette meets these standards.

Our colour palette

Brand

Colour SCSS variable Hex code
Brand $ds_colour__brand #0065bd
Secondary brand $ds_colour__brand--secondary #002d54

Text

Colour SCSS variable Hex code
Text $ds_colour__text #333333
Secondary text $ds_colour__text--secondary #727272

Links

Colour SCSS variable Hex code
Link $ds_colour__link #0065bd
Link hover $ds_colour__link--hover #00437e
Hover background $ds_colour__link--hover__background #d9effc
Current/selected link $ds_colour__link--current #333333
Current/selected link background $ds_colour__link--current__background #f8f8f8

Focus

Colour SCSS variable Hex code
Focus $ds_colour__link--focus #333333
Focus background $ds_colour__link--focus--background #fdd522

Positive and negative messaging

Colour SCSS variable Hex code
Positive $ds_colour__state--positive #d32205
Negative $ds_colour__state--negative #428542

Borders

Colour SCSS variable Hex code
Border $ds_colour__border #b3b3b3
Dark border $ds_colour__border--dark #333333
Light border $ds_colour__border--light #ebebeb
Highlighted border $ds_colour__border--highlight #0065bd

Colour palettes for data visualisation

We have specific palettes for charts and graphs outlined in our data visualisation: colour palettes guidance. These palettes are derived from the primary and secondary palettes with adjustments made to increase contrast between colours for more accessible data visualisation.

Back to top