<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<p>Colours are used to represent your site and are an implementation of your brand's visual identity. </p>
<h2>When to use it</h2>
<p>Colours are used throughout your patterns. </p>
<h2>How to use it</h2>
<p>Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. </p>
<p>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. </p>
<h3>Primary colours</h3>
<color-samples>
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>
<hex>#2e51a1</hex>
<rgb>rgb(46,81,161)</rgb>
<accessibility>
<div class="acchb"> <span>color & black </span><small>2.8:1</small></div>
<div class="acchw"> <span>color & white </span><small>7.5:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
</div>
</accessibility>
<sample-block>
<color-pill data-hex="#5c7abf" data-rgb="rgb( 92,122,191)" data-token="--colour-blue-l"> <span style="background-color: rgb( 92,122,191)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>5:1</small></div>
<div class="acchw"> <span>color & white </span><small>4.2:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb( 92,122,191)">✓</span><span style="color: rgb( 92,122,191)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>blue-l</span>
</color-pill>
<color-pill data-hex="#b2c3ec" data-rgb="rgb(178,195,236)" data-token="--colour-blue-xl"> <span style="background-color: rgb(178,195,236)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>11.9:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.8:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(178,195,236)">✓</span><span style="color: rgb(178,195,236)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(178,195,236)">✓ </span><span style="color: rgb(178,195,236)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>blue-xl</span>
</color-pill>
</sample-block>
<sample-block>
<color-pill data-hex="#133176" data-rgb="rgb( 19, 49,118)" data-token="--colour-blue-d"> <span style="background-color: rgb( 19, 49,118)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1.7:1</small></div>
<div class="acchw"> <span>color & white </span><small>12.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
</div>
</div></span><span>blue-d</span>
</color-pill>
<color-pill data-hex="#031235" data-rgb="rgb( 3, 18, 53)" data-token="--colour-blue-xd"> <span style="background-color: rgb( 3, 18, 53)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1.1:1</small></div>
<div class="acchw"> <span>color & white </span><small>18.4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
</div>
</div></span><span>blue-xd</span>
</color-pill>
</sample-block>
</color-sample>
<color-sample data-color="rgb(127, 127, 127)" style="background-color: rgb(127, 127, 127); color: #000">
<name data-hex="#7f7f7f" data-rgb="rgb(127, 127, 127)" data-token="--colour-grey"><span>Grey</span></name>
<hex>#7f7f7f</hex>
<rgb>rgb(127,127,127)</rgb>
<accessibility>
<div class="acchb"> <span>color & black </span><small>5.2:1</small></div>
<div class="acchw"> <span>color & white </span><small>4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(127, 127, 127)">✓</span><span style="color: rgb(127, 127, 127)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</accessibility>
<sample-block>
<color-pill data-hex="#b2b2b2" data-rgb="rgb(178, 178, 178)" data-token="--colour-grey-l"> <span style="background-color: #b2b2b2">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>9.9:1</small></div>
<div class="acchw"> <span>color & white </span><small>2.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(178, 178, 178)">✓</span><span style="color: rgb(178, 178, 178)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(178, 178, 178)">✓ </span><span style="color: rgb(178, 178, 178)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>Light</span>
</color-pill>
<color-pill data-hex="#d8d8d8" data-rgb="rgb(216, 216, 216)" data-token="--colour-grey-xl"> <span style="background-color: #d8d8d8">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>14.7:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(216, 216, 216)">✓</span><span style="color: rgb(216, 216, 216)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(216, 216, 216)">✓ </span><span style="color: rgb(216, 216, 216)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>Lighter</span>
</color-pill>
<color-pill data-hex="#f0f0f0" data-rgb="rgb(240, 240, 240)" data-token="--colour-grey-xxl"> <span style="background-color: #f0f0f0">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>18.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(240, 240, 240)">✓</span><span style="color: rgb(240, 240, 240)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(240, 240, 240)">✓ </span><span style="color: rgb(240, 240, 240)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>Lightest</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-white"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>White</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-page"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>Default page</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-light"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaa result"><span>✗ </span><span>✗</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
</div>
<div class="accwaaa result"><span>✗ </span><span>✗</span>
</div>
</div></span><span>Light</span>
</color-pill>
</sample-block>
<sample-block>
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-d"> <span style="background-color: #4c4c4c">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
</div>
</div></span><span>Dark</span>
</color-pill>
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-xd"> <span style="background-color: #4c4c4c">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
</div>
</div></span><span>Darker</span>
</color-pill>
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-black"> <span style="background-color: #000">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
</div>
</div></span><span>Black</span>
</color-pill>
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-dark"> <span style="background-color: #000">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>✗ </span><span>✗</span>
</div>
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
</div>
</div></span><span>Dark</span>
</color-pill>
</sample-block>
</color-sample>
</color-samples>
<div class="tab-group" id="colors">
<div data-tab="css">
<pre class="language-css">: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;
}</pre>
</div>
<div data-tab="scss">
<pre class="language-css">$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};
}
}</pre>
</div>
</div>
</body>
</html>