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

PreviousLogoNextLine Icons

Last updated

Was this helpful?