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 | #202329
| #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 | | | | | | rgb(0,85,78)
| |
---|
Sass variable | | | | | | n/a | |
---|