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

SCSS variable Hex code
$ds_colour__brand #0065bd
$ds_colour__brand--secondary #002d54

Text

SCSS variable Hex code
$ds_colour__text #333333
$ds_colour__text--secondary #727272
SCSS variable Hex code
$ds_colour__link #0065bd
$ds_colour__link--hover #00437e
$ds_colour__link--hover__background #d9effc
$ds_colour__link--current #333333
$ds_colour__link--current__background #f8f8f8

Focus

SCSS variable Hex code
$ds_colour__link--focus #333333
$ds_colour__link--focus__background #fdd522

Positive and negative messaging

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

Borders

SCSS variable Hex code
$ds_colour__border #b3b3b3
$ds_colour__border--dark #333333
$ds_colour__border--light #ebebeb
$ds_colour__border--highlight #0065bd

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top