Colour
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.
Main 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__focus
|
#333333 |
| Focus background |
$ds_colour__focus--background
|
#fdd522 |
Positive messaging
| Colour | SCSS variable | Hex code |
|---|---|---|
| Positive |
$ds_colour__state--positive
|
#428542 |
Negative messaging
| Colour | SCSS variable | Hex code |
|---|---|---|
| Negative |
$ds_colour__state--negative
|
#d32205 |
Borders
| Colour | SCSS variable | Hex code |
|---|---|---|
| Border |
$ds_colour__border
|
#b3b3b3 |
| Dark border |
$ds_colour__border--strong
|
#333333 |
| Light border |
$ds_colour__border--faint
|
#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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback