| 85% lighter | |||||||
|---|---|---|---|---|---|---|---|
| Swatch |
| ||||||
| Hexadecimal | #F7F7F8 | ||||||
| RGB value | rgb(247, 247, 248) | ||||||
| Sass variable | $steel-85-light | ||||||
75% lighter | |||||||
| Swatch |
|
|
|
|
|
|
|
| Hexadecimal | #C7C7C9 | #F0F0F1 | #FEC2CF | #E8E2F4 | #C3F1F7 | #C7FEF1 | #FFF9CD |
| RGB value | rgb(199, 199, 201) | rgb(240, 240, 241) | rgb(254, 194, 207) | rgb(232, 226, 244) | rgb(195, 241, 247) | rgb(199, 254, 241) | rgb(255, 249, 205) |
| Sass variable | $granite-75-light | $steel-75-light | $coral-75-light | $violet-75-light | $cornflower-75-light | $mint-75-light | $citrus-75-light |
| Base + 50% lighter | |||||||
| Swatch |
|
|
|
|
|
|
|
| Hexadecimal | #8F9194 | #E3E3E4 | #FD85A0 | #B39FDB | #89E3F0 | #9AFDE6 | #FFF59D |
| RGB value | rgb(143, 145, 148) | rgb(227, 227, 228) | rgb(253, 133, 160) | rgb(179, 159, 219) | rgb(137, 227, 240) | rgb(154, 253, 230) | rgb(255, 245, 157) |
| Sass variable | $granite-50-light | $steel-50-light | $coral-50-light | $violet-50-light | $cornflower-50-light | $mint-50-light | $citrus-50-light |
| 25% lighter | |||||||
| Swatch |
|
|
|
|
|
|
|
| Hexadecimal | #575A5E | #D5D5D6 | #FC4871 | #8D71C9 | #4ED5E8 | #8AFFE3 | #FFF06C |
| RGB value | rgb(87, 90, 94) | rgb(213, 213, 214) | rgb(252, 72, 133) | rgb(141, 113, 201) | rgb(78, 213, 232) | rgb(138, 255, 227) | rgb(255, 240, 108) |
| Sass variable | $granite-25-light | $steel-25-light | $coral-25-light | $violet-25-light | $cornflower-25-light | $mint-25-light | $citrus-25-light |
| 10% lighter | |||||||
|
| ||||||
| Hexadecimal | #36393E | ||||||
| RGB value | rgb(54, 57, 62) | ||||||
| Sass variable | $granite-10-light | ||||||
| Base | |||||||
| Swatch |
|
|
|
|
|
|
|
| Hexadecimal |
| #C7C7C9 | #EC0836 | #673AB7 | #14C8E1 | #64FFDA | #FFEB3B |
| RGB value | rgb(32, 35, 41) | rgb(199, 199, 201) | rgb(236, 8, 54) | rgb(103, 58, 183) | rgb(20, 200, 225) | rgb(100, 255, 218) | rgb(255, 253, 59) |
| Sass variable | $granite | $granite-75-light $steel | $coral | $violet | $cornflower | $mint | $citrus |
| 25% darker | |||||||
|
|
|
|
|
|
| |
| Hexadecimal | #B80029 | #4D2D99 | #0096AA | #00C596 | #FFC710 | ||
| RGB value | rgb(184, 0, 41) | rgb(77, 45, 153) | rgb(0, 150, 170) | rgb(0, 197, 150) | rgb(255, 199, 16) | ||
| Sass variable | $coral-25-dark | $violet-25-dark | $cornflower-25-dark | $mint-25-dark | $citrus-25-dark | ||
| 50% darker | |||||||
| Swatch |
|
|
|
|
| ||
| Hexadecimal | #81001D | #321970 | #006473 | #008566 | #FD8D17 | ||
| RGB value | rgb(129, 0, 29) | rgb(50, 25, 112) | rgb(0, 100, 115) | rgb(0, 133, 102) | rgb(253, 141, 23) | ||
| Sass variable | $coral-50-dark | $violet-50-dark | $cornflower-50-dark | $mint-50-dark | $citrus-50-dark | ||
| 65% darker | |||||||
| Swatch |
| ||||||
| Hexadecimal | #00554E | ||||||
| RGB value |
| ||||||
| Sass variable | n/a | ||||||
Colour contrast tests
See full Lens colour contrast and accessibility testing
|  |  |  |
 |  |  |
Colour palette reference
Revised 6 October 2017