What is it

Colours are used to represent your site and are an implementation of your brand's visual identity.

When to use it

Colours are used throughout your patterns.

How to use it

Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white.

Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option ⌥ key) will copy the colour token, and the meta key (Windows key or Mac command ⌘ key) will copy a CSS colour var.

Primary colours

Blue #2e51a1 rgb(46,81,161)
color & black 2.8:1
color & white 7.5:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
blue-l blue-xl blue-d blue-xd Grey #7f7f7f rgb(127,127,127)
color & black 5.2:1
color & white 4:1
WCAG 2.0 AA
✓✓
✗ ✓
WCAG 2.0 AAA
✗ ✓
✗ ✗
Light Lighter Lightest White Default page Light Dark Darker Black Dark 
:root {
	--colour-blue: #2e51a1;
	--colour-blue-l: #5c7abf;
	--colour-blue-xl: #b2c3ec;
	--colour-blue-d: #133176;
	--colour-blue-xd: #031235;

	--colour-grey: #7f7f7f;
	--colour-grey-l: #b2b2b2;
	--colour-grey-xl: #d8d8d8;
	--colour-grey-xxl: #f0f0f0;
	--colour-white: #fff;
	--colour-page: #fff;
	--colour-light: #fff;
	--colour-grey-d: #4c4c4c;
	--colour-grey-xd: #4c4c4c;
	--colour-black: #000;
	--colour-dark: #000;
}
$colour: (
	colour-blue: #2e51a1,
	colour-blue-l: #5c7abf,
	colour-blue-xl: #b2c3ec,
	colour-blue-d: #133176,
	colour-blue-xd: #031235,

	colour-grey: #7f7f7f,
	colour-grey-l: #b2b2b2,
	colour-grey-xl: #d8d8d8,
	colour-grey-xxl: #f0f0f0,
	colour-white: #fff,
	colour-page: #fff,
	colour-light: #fff,
	colour-grey-d: #4c4c4c,
	colour-grey-xd: #4c4c4c,
	colour-black: #000,
	colour-dark: #000,
);
:root {
	@each $name, $color in $colour {
		--#{$name}: #{$color};
	}
}