Colour modifiers and tools
You can use tint and shades of the colour palette to introduce different ways of using the colours.
Tint
Make a colour lighter by mixing it with white.
- $colour
- The colour to tint
- $percentage
- Percentage of white to mix with $colour
Tint usage
Adds 50% white to the primary dfe blue color.
$govuk-tint($color_dfe-blue, 50);
dfe-blue tints
0
10
20
30
40
50
60
70
80
90
dfe-seconday-blue tints
0
10
20
30
40
50
60
70
80
90
Shade
Make a colour darker by mixing it with black.
- $colour
- The colour to shade
- $percentage
- Percentage of black to mix with $colour
Shade usage
Adds 50% black to the primary dfe blue color.
$govuk-shade($color_dfe-blue, 50);
dfe-blue shade
0
10
20
30
40
50
60
70
80
90
dfe-seconday-blue shade
0
10
20
30
40
50
60
70
80
90