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

Links

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