We use cookies to collect anonymous data to help us improve your site browsing
experience.
Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.
beta
This is a new service. Your feedback will help us to improve it.
Style
Colour
Published19 August 2020
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
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot