## 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 <hex>#2e51a1</hex> <rgb>rgb(46,81,161)</rgb> <accessibility>
color & black 2.8:1
color & white 7.5:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
</accessibility>
color & black 5:1
color & white 4.2:1
WCAG 2.0 AA
✓✓
✗ ✓
WCAG 2.0 AAA
✗ ✓
✗ ✗
blue-l
color & black 11.9:1
color & white 1.8:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
blue-xl
color & black 1.7:1
color & white 12.1:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
blue-d
color & black 1.1:1
color & white 18.4:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
blue-xd Grey <hex>#7f7f7f</hex> <rgb>rgb(127,127,127)</rgb> <accessibility>
color & black 5.2:1
color & white 4:1
WCAG 2.0 AA
✓✓
✗ ✓
WCAG 2.0 AAA
✗ ✓
✗ ✗
</accessibility>
color & black 9.9:1
color & white 2.1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Light
color & black 14.7:1
color & white 1.4:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Lighter
color & black 18.4:1
color & white 1.1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Lightest
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
White
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Default page
color & black 21:1
color & white 1:1
WCAG 2.0 AA
✓✓
✗ ✗
WCAG 2.0 AAA
✓ ✓
✗ ✗
Light
color & black 2.4:1
color & white 8.6:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Dark
color & black 2.4:1
color & white 8.6:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Darker
color & black 1:1
color & white 21:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
Black
color & black 1:1
color & white 21:1
WCAG 2.0 AA
✗ ✗
✓ ✓
WCAG 2.0 AAA
✗ ✗
✓ ✓
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};
    	}
    }