The core Lens colour palette contains seven distinct colours.
Lens base colour palette
Tints and shades
Each core colour can be tinted (made lighter) and shaded (made darker). Tints and shades give options in instances where using the 'full' colour would not work.
Our tints and shades have been hand-tweaked to avoid the indistinct, muddied tones that can be created by automated colour tools. To this end, tint and shade percentage values should be considered indicators and not exact measures.
GRANITE
50% light
$granite-50-light
rgb(143, 145, 148)
#8F9194
25% light
$granite-25-light
rgb(87, 90, 94)
#575A5E
10% light
$granite-10-light
rgb(54, 57, 62)
#36393E
Granite
$granite
rgb(32, 35, 41)
#202329
STEEL
85% light
$steel-85-light
rgb(247, 247, 248)
#F7F7F8
75% light
$steel-75-light
rgb(240, 240, 241)
#F0F0F1
50% light
$steel-50-light
rgb(227, 227, 228)
#E3E3E4
25% light
$steel-25-light
rgb(213, 213, 214)
#D5D5D6
Steel
$steel
rgb(199, 199, 201)
#C7C7C9
CORAL
75% light
$coral-75-light
rgb(254, 194, 207)
#FEC2CF
50% light
$coral-50-light
rgb(253, 133, 160)
#FD85A0
25% light
$coral-25-light
rgb(252, 72, 133)
#FC4871
Coral
$coral
rgb(236, 8, 54)
#EC0836
25% dark
$coral-25-dark
rgb(184, 0, 41)
#B80029
50% dark
$coral-50-dark
rgb(129, 0, 29)
#81001D
VIOLET
75% light
$violet-75-light
rgb(232, 226, 244)
#E8E2F4
50% light
$violet-50-light
rgb(179, 159, 219)
#B39FDB
25% light
$violet-25-light
rgb(141, 113, 201)
#8D71C9
Violet
$violet
rgb(103, 58, 183)
#673AB7
25% dark
$violet-25-dark
rgb(77, 45, 153)
#4D2D99
50% dark
$violet-50-dark
rgb(50, 25, 112)
#321970
MINT
75% light
$mint-75-light
rgb(199, 254, 241)
#C7FEF1
50% light
$mint-50-light
rgb(154, 253, 230)
#9AFDE6
25% light
$mint-25-light
rgb(138, 255, 227)
#8AFFE3
Mint
$mint
rgb(100, 255, 218)
#64FFDA
10% dark
$mint-10-dark
rgb(0, 230, 176)
#00E6B0
25% dark
$mint-25-dark
rgb(0, 197, 150)
#00C596
50% dark
$mint-50-dark
rgb(0, 133, 102)
#008566
75% dark
$mint-75-dark
rgb(0, 85, 78)
#00554E
CITRUS
75% light
$citrus-75-light
rgb(255, 249, 205)
#FFF9CD
50% light
$citrus-50-light
rgb(255, 245, 157)
#FFF59D
25% light
$citrus-25-light
rgb(255, 240, 108)
#FFF06C
Citrus
$citrus
rgb(255, 253, 59)
#FFEB3B
25% dark
$citrus-25-dark
rgb(255, 199, 16)
#FFC710
50% dark
$citrus-50-dark
rgb(253, 141, 23)
#FD8D17
75% dark
$citrus-75-dark
rgb(235, 109, 0)
#EB6D00
90% dark
$citrus-90-dark
rgb(198, 80, 1)
#C65001
CORNFLOWER
90% light
$cornflower-90-light
rgb(229, 255, 249)
#E5FFF9
75% light
$cornflower-75-light
rgb(195, 241, 247)
#C3F1F7
50% light
$cornflower-50-light
rgb(137, 227, 240)
#89E3F0
25% light
$cornflower-25-light
rgb(78, 213, 232)
#4ED5E8
Cornflower
$cornflower
rgb(20, 200, 225)
#14C8E1
25% dark
$cornflower-25-dark
rgb(0, 150, 170)
#0096AA
50% dark
$cornflower-50-dark
rgb(0, 100, 115)
#006473
60% dark
$cornflower-60-dark
rgb(8, 80, 90)
#08505A