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 |
| 238, 246, 249 | |
Blue-Medium-Light |
| 205, 233, 248 | |
Blue-Medium |
| 11, 184, 227 | |
Blue-Medium-Dark |
| 3, 109, 161 | |
Blue-Dark |
| 7, 53, 86 |
Green
Color | Name | Hex Code | RGB |
Green-Light |
| 237, 247, 214 | |
Green-Medium-Light |
| 103, 189, 36 | |
Green-Medium |
| 103, 189, 36 | |
Green-Medium-Dark |
| 74, 138, 24 | |
Green-Dark |
| 33, 89, 19 |
Teal
Color | Name | Hex Code | RGB |
Teal-Light |
| 224, 246, 242 | |
Teal-Medium-Light |
| 166, 233, 221 | |
Teal-Medium |
| 61, 202, 177 | |
Teal-Medium-Dark |
| 61, 175, 136 | |
Teal-Dark |
| 4, 104, 86 |
Yellow
Color | Name | Hex Code | RGB |
Yellow-Light |
| 252, 235, 198 | |
Yellow-Medium-Light |
| 255, 219, 141 | |
Yellow-Medium |
| 255, 182, 0 | |
Yellow-Medium-Dark |
| 239, 144, 0 | |
Yellow-Dark |
| 218, 117, 0 |
Purple
Color | Name | Hex Code | RGB |
Purple-Light |
| 237, 209, 235 | |
Purple-Medium-Light |
| 184, 125, 180 | |
Purple-Medium |
| 137, 51, 131 | |
Yellow-Medium-Dark |
| 112, 12, 106 | |
Purple-Dark |
| 76, 11, 71 |
Red
Color | Name | Hex Code | RGB |
Red-Light |
| 255, 216, 216 | |
Red-Medium-Light |
| 252, 154, 154 | |
Red-Medium |
| 231, 67, 67 | |
Red-Medium-Dark |
| 184, 25, 25 | |
Red-Dark |
| 133, 25, 25 |
Slate
Color | Name | Hex Code | RGB |
Slate-Light |
| 232, 239, 242 | |
Slate-Medium-Light |
| 218, 226, 230 | |
Slate-Medium |
| 194, 206, 211 | |
Slate-Medium-Dark |
| 156, 171, 181 | |
Slate-Dark |
| 102, 120, 132 |
Supporting Colors
Color | Name | Hex Code | RGB |
Off-White |
| 251, 251, 251 | |
Dark-White |
| 244, 244, 244 | |
Text-Black |
| 67, 67, 67 |
Color Table
Blue | Green | Slate | Yellow | Red | Teal | Purple | |
Light |
|
|
|
|
|
|
|
Medium-Light |
|
|
|
|
|
|
|
Medium |
|
|
|
|
|
|
|
Medium-Dark |
|
|
|
|
|
|
|
Dark |
|
|
|
|
|
|
|
Last updated
