Style Guide
Search…
Color System
An organized approach to apply colors to our UI and marketing assets.
Color System
Color helps distinguishes our brand and helps us to create consistent experiences across the Handy platform
Blue
Color
Name
Hex Code
RGB
​
​
Blue-Light
#EEF6F9238, 246, 249
​
​
Blue-Medium-Light
#CDE9F8205, 233, 248
​
​
Blue-Medium
#0BB8E311, 184, 227
​
​
Blue-Medium-Dark
#036DA13, 109, 161
​
​
Blue-Dark
#0735567, 53, 86
Green
Color
Name
Hex Code
RGB
​
​
Green-Light
#EDF7D6237, 247, 214
​
​
Green-Medium-Light
#D5EBBF103, 189, 36
​
​
Green-Medium
#67BD24103, 189, 36
​
​
Green-Medium-Dark
#4A8A1874, 138, 24
​
​
Green-Dark
#21591333, 89, 19
Teal
Color
Name
Hex Code
RGB
​
​
Teal-Light
#E0F6F2224, 246, 242
​
​
Teal-Medium-Light
#A6E9DD166, 233, 221
​
​
Teal-Medium
#3DCAB161, 202, 177
​
​
Teal-Medium-Dark
#3DAF8861, 175, 136
​
​
Teal-Dark
#0468564, 104, 86
Yellow
Color
Name
Hex Code
RGB
​
​
Yellow-Light
#FCEBC6252, 235, 198
​
​
Yellow-Medium-Light
#FFDB8D255, 219, 141
​
​
Yellow-Medium
#FFB600255, 182, 0
​
​
Yellow-Medium-Dark
#EF9000239, 144, 0
​
​
Yellow-Dark
#DA7500218, 117, 0
Purple
Color
Name
Hex Code
RGB
​
​
Purple-Light
#EDD1EB237, 209, 235
​
​
Purple-Medium-Light
#B87DB4184, 125, 180
​
​
Purple-Medium
#893383137, 51, 131
​
​
Yellow-Medium-Dark
#700C6A112, 12, 106
​
​
Purple-Dark
#4C0B4776, 11, 71
Red
Color
Name
Hex Code
RGB
​
​
Red-Light
#FFD8D8255, 216, 216
​
​
Red-Medium-Light
#FC9A9A252, 154, 154
​
​
Red-Medium
#E74343231, 67, 67
​
​
Red-Medium-Dark
#B81919184, 25, 25
​
​
Red-Dark
#851919133, 25, 25
Slate
Color
Name
Hex Code
RGB
​
​
Slate-Light
#E8EFF2232, 239, 242
​
​
Slate-Medium-Light
#DAE2E6218, 226, 230
​
​
Slate-Medium
#C2CED3194, 206, 211
​
​
Slate-Medium-Dark
#9CABB5156, 171, 181
​
​
Slate-Dark
#667884102, 120, 132
Supporting Colors
Color
Name
Hex Code
RGB
​
​
Off-White
#FBFBFB251, 251, 251
​
​
Dark-White
#F4F4F4244, 244, 244
​
​
Text-Black
#43434367, 67, 67
Color Table
​
Blue
Green
Slate
Yellow
Red
Teal
Purple
Light
#EEF6F9#EDF7D6#E8EFF2#FCEBC6#FFD8D8#E0F6F2#EDD1EBMedium-Light
#CDE9F8#D5EBBF#DAE2E6#FFDB8D#FC9A9A#A6E9DD#B87DB4Medium
#0BB8E3#67BD24#C2CED3#FFB600#E74343#3DCAB1#893383Medium-Dark
#036DA1#4A8A18#9CABB5#EF9000#B81919#3DAF88#700C6ADark
#073556#215913#667884#DA7500#851919#046856#4C0B47Last modified 2yr ago