Colour

There are five main City of Edinburgh Council brand colours. On edinburgh.gov.uk we use four of these, and some of the colours have been modified slightly to meet contrast guidelines for accessibility. We also use two greys.

Red - Used for the main header and A-Z backgrounds
Sass variable: $brand;
Blue - Used for text hyperlinks
Sass variable: $blue;

Usage: <a href="[link]">link text</a>
Green - Used for button background and alternate text hyperlinks
Sass variable: $green;

Usage: <a href="[link]" class="alternate">link text</a>` or `<a href="[link]" class="button">link text</a>`
Purple
Sass variable: $purple;
Grey - Used for borders and horizontal rules
#d1d1d1
Sass variable: $grey;
Text colour - Used for all text unless the background is one of the above brand colours
#333

Tints

There are a variety of colours achievable by using tints of the City of Edinburgh Council colour palette. The tints can be achieved on the website by using the following Sass methods. These should be used sparingly.

background: darken($colorname, 30%);

background: lighten($colorname, 30%);