Style Guide
Search
K

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
Light-Handy-Blue: #EEF6F9
Blue-Light
#EEF6F9
238, 246, 249
Medium-Light-Handy-Blue: #CDE9F8
Blue-Medium-Light
#CDE9F8
205, 233, 248
Medium-Handy-Blue: #0BB8E3
Blue-Medium
#0BB8E3
11, 184, 227
Medium-Dark-Handy-Blue: #036DA1
Blue-Medium-Dark
#036DA1
3, 109, 161
Dark-Handy-Blue: #073556
Blue-Dark
#073556
7, 53, 86

Green

Color
Name
Hex Code
RGB
Light-Pro-Green: #EDF7D6
Green-Light
#EDF7D6
237, 247, 214
Medium-Light-Pro-Green: #D5EBBF
Green-Medium-Light
#D5EBBF
103, 189, 36
Medium-Pro-Green: #67BD24
Green-Medium
#67BD24
103, 189, 36
Medium-Dark-Pro-Green: #4A8A18
Green-Medium-Dark
#4A8A18
74, 138, 24
Dark-Pro-Green: #215913
Green-Dark
#215913
33, 89, 19

Teal

Color
Name
Hex Code
RGB
Light-Teal: #E0F6F2
Teal-Light
#E0F6F2
224, 246, 242
Medium-Light-Teal: #A6E9DD
Teal-Medium-Light
#A6E9DD
166, 233, 221
Medium-Teal: #3DCAB1
Teal-Medium
#3DCAB1
61, 202, 177
Medium-Dark-Teal: #3DAF88
Teal-Medium-Dark
#3DAF88
61, 175, 136
Teal-Dark
#046856
4, 104, 86

Yellow

Color
Name
Hex Code
RGB
Light-Yellow: #FCEBC6
Yellow-Light
#FCEBC6
252, 235, 198
Medium-Light-Yellow: #FFDB8D
Yellow-Medium-Light
#FFDB8D
255, 219, 141
Medium-Yellow: #FFB600
Yellow-Medium
#FFB600
255, 182, 0
Yellow-Medium-Dark
#EF9000
239, 144, 0
Yellow-Dark
#DA7500
218, 117, 0

Purple

Color
Name
Hex Code
RGB
Light-Purple: #EDD1EB
Purple-Light
#EDD1EB
237, 209, 235
Medium-Light-Purple: #B87DB4
Purple-Medium-Light
#B87DB4
184, 125, 180
Medium-Purple: #893383
Purple-Medium
#893383
137, 51, 131
Medium-Dark-Purple: #700C6A
Yellow-Medium-Dark
#700C6A
112, 12, 106
Dark-Purple: #4C0B47
Purple-Dark
#4C0B47
76, 11, 71

Red

Color
Name
Hex Code
RGB
Light-Red: #FFD8D8
Red-Light
#FFD8D8
255, 216, 216
Medium-Light-Red: #FC9A9A
Red-Medium-Light
#FC9A9A
252, 154, 154
Medium-Red: #E74343
Red-Medium
#E74343
231, 67, 67
Medium-Dark-Red: #B81919
Red-Medium-Dark
#B81919
184, 25, 25
Dark-Red: #851919
Red-Dark
#851919
133, 25, 25

Slate

Color
Name
Hex Code
RGB
Light-Slate: #E8EFF2
Slate-Light
#E8EFF2
232, 239, 242
Medium-Light-Slate: #DAE2E6
Slate-Medium-Light
#DAE2E6
218, 226, 230
Medium-Slate: #C2CED3
Slate-Medium
#C2CED3
194, 206, 211
Medium-Dark-Slate: #9CABB5
Slate-Medium-Dark
#9CABB5
156, 171, 181
Dark-Slate: #667884
Slate-Dark
#667884
102, 120, 132

Supporting Colors

Color
Name
Hex Code
RGB
Off-White
#FBFBFB
251, 251, 251
Dark-White
#F4F4F4
244, 244, 244
Text-Black
#434343
67, 67, 67

Color Table

Blue
Green
Slate
Yellow
Red
Teal
Purple
Light
#EEF6F9
#EDF7D6
#E8EFF2
#FCEBC6
#FFD8D8
#E0F6F2
#EDD1EB
Medium-Light
#CDE9F8
#D5EBBF
#DAE2E6
#FFDB8D
#FC9A9A
#A6E9DD
#B87DB4
Medium
#0BB8E3
#67BD24
#C2CED3
#FFB600
#E74343
#3DCAB1
#893383
Medium-Dark
#036DA1
#4A8A18
#9CABB5
#EF9000
#B81919
#3DAF88
#700C6A
Dark
#073556
#215913
#667884
#DA7500
#851919
#046856
#4C0B47
Last modified 3yr ago