Colors
Brand, UI, and Text Colors
Colors Sample(s):
Brand Colors
The following colors can be used as text colors, background-colors and fill colors for SVG's.
Navy
navy-100
rgb(14, 44, 81)
navy-at
rgb(14, 44, 81)
Blue
blue-100
rgb(41, 125, 173)
blue-85
rgb(73, 144, 185)
blue-75
rgb(95, 158, 194)
blue-60
rgb(127, 177, 206)
blue-50
rgb(148, 190, 214)
blue-40
rgb(169, 203, 222)
blue-25
rgb(201, 222, 234)
blue-10
rgb(240, 245, 248)
blue-5
rgb(250, 252, 253)
blue-at
rgb(3, 102, 159)
blue-act
rgb(14, 44, 81)
Cyan
cyan-100
rgb(10, 160, 204)
cyan-85
rgb(47, 174, 212)
cyan-75
rgb(71, 184, 217)
cyan-60
rgb(108, 198, 224)
cyan-50
rgb(132, 207, 229)
cyan-40
rgb(157, 217, 235)
cyan-25
rgb(194, 231, 242)
cyan-10
rgb(240, 245, 248)
cyan-5
rgb(249, 252, 254)
cyan-at
rgb(0, 142, 186)
cyan-act
rgb(4, 85, 112)
Mint
mint-100
rgb(67, 181, 144)
mint-85
rgb(95, 192, 161)
mint-75
rgb(114, 200, 172)
mint-60
rgb(142, 211, 188)
mint-50
rgb(161, 218, 199)
mint-40
rgb(180, 225, 211)
mint-25
rgb(180, 225, 211)
mint-10
rgb(232, 246, 242)
mint-5
rgb(247, 252, 251)
mint-at
rgb(34, 168, 125)
mint-act
rgb(20, 95, 77)
Red
red-100
rgb(169, 37, 20)
red-25
rgb(233, 200, 196)
red-10
rgb(247, 239, 237)
red-5
rgb(254, 252, 251)
Coral
coral-100
rgb(231, 129, 86)
coral-85
rgb(235, 148, 111)
coral-75
rgb(237, 161, 128)
coral-60
rgb(241, 179, 154)
coral-50
rgb(243, 192, 170)
coral-40
rgb(245, 205, 187)
coral-25
rgb(249, 223, 213)
coral-10
rgb(252, 246, 243)
coral-5
rgb(254, 252, 251)
coral-at
rgb(227, 107, 56)
coral-act
rgb(157, 63, 25)
Yellow
yellow-100
rgb(238, 214, 84)
yellow-85
rgb(241, 220, 109)
yellow-75
rgb(242, 224, 127)
yellow-60
rgb(245, 230, 152)
yellow-50
rgb(246, 234, 169)
yellow-40
rgb(248, 239, 187)
yellow-25
rgb(251, 245, 212)
yellow-10
rgb(253, 251, 239)
yellow-5
rgb(254, 253, 247)
Dark Gray
dk-grey-100
rgb(101, 115, 124)
dk-grey-85
rgb(124, 136, 144)
dk-grey-75
rgb(140, 150, 157)
dk-grey-60
rgb(163, 171, 176)
dk-grey-50
rgb(178, 185, 189)
dk-grey-40
rgb(193, 199, 203)
dk-grey-25
rgb(216, 220, 222)
dk-grey-10
rgb(244, 244, 245)
dk-grey-5
rgb(251, 251, 252)
dk-grey-at
rgb(74, 90, 101)
dk-grey-act
rgb(40, 50, 57)
Light Gray
lt-grey-100
rgb(161, 161, 161)
lt-grey-85
rgb(175, 175, 175)
lt-grey-75
rgb(185, 185, 185)
lt-grey-60
rgb(199, 199, 199)
lt-grey-50
rgb(208, 208, 208)
lt-grey-40
rgb(217, 217, 217)
lt-grey-25
rgb(231, 231, 231)
lt-grey-10
rgb(248, 248, 248)
lt-grey-5
rgb(253, 253, 253)
lt-grey-at
rgb(145, 145, 145)
lt-grey-act
rgb(74, 90, 101)
Miscellaneous
black
rgb(34, 42, 47)
opaque
rgba(0,0,0,0.8)
disabled
rgb(231, 231, 231)
transparent
transparent
white
#ffffff
Text Link Colors
| Base Color | Hover Color |
|---|---|
Link over white background: cyan-at #008eba
|
Link Hover over white background: cyan-act #045570
|
Link Hover over light grey background: cyan-act #045570
|
Link Hover over light grey background: blue-act #0e2c51
|
Link Hover over mid grey background: cyan-act #045570
|
Link Hover over mid grey background: blue-act #0e2c51
|