2024-06-13 00:00:00 -04:00
< html >
< head >
< title > Pattern< / title >
< / head >
< body data-prismjs-copy-timeout = "1500" >
2024-07-14 16:18:52 -04:00
< 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 >
2024-06-13 00:00:00 -04:00
< 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 >
2024-07-11 21:05:34 -04:00
< div class = "tab-group" id = "colors" >
2024-06-13 00:00:00 -04:00
< div data-tab = "css" >
2024-07-11 21:05:34 -04:00
< pre class = "language-css" > :root {
2024-10-18 18:19:40 -04:00
--colour-blue: #2e51a1;
--colour-blue-l: #5c7abf;
--colour-blue-xl: #b2c3ec;
--colour-blue-d: #133176;
--colour-blue-xd: #031235;
2024-07-11 21:05:34 -04:00
2024-10-18 18:19:40 -04:00
--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;
2024-07-12 23:35:29 -04:00
}< / 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};
}
2024-06-13 00:00:00 -04:00
}< / pre >
< / div >
< / div >
< / body >
< / html >
