Colors

Establishing brand colors will help to create consistency across all brand pieces whether they are online or offline.

Most brands choose four or fewer main colors, allowing for accent colors to enhance different pieces. ForceManager has chosen as a principal color, the orange, followed by grey and white.

Primary Colors

Our primary palette uses bright colors to bring a boldness to our brand and is used throughout product and marketing to guide the eye and highlight important information. We introduce warmer, secondary palette colors throughout to soften the experience and to impart confidence and optimism.

Orange
  • 151C
  • 225 / 140 / 0
  • 0 / 55 / 100 / 0
  • #FF8C00
Pepper
  • 425C
  • 84 / 88 / 90
  • 66 / 55 / 53 / 28
  • #54585A
Cognitive
  • 7545C
  • 55 / 82 / 108
  • 84 / 64 / 38 / 21
  • #37526C

Secondary Colors

The colors in our supporting palette were chosen to complement our primary palette of orange, milk and pepper, providing additional range to the brand experience. The secondary palette colors work well as accent colors or as subtle backgrounds behind typography or graphics. Darker colors may be used behind light-colored typography.

Milk
  • -
  • 255 / 255 / 255
  • 0 / 0 / 0 / 0
  • #FFFFFF
Blackberry
  • 533C
  • 44 / 44 / 65
  • 82 / 78 / 48 / 50
  • #2C2C41
Electric Blueberry
  • 2727C
  • 83 / 135 / 255
  • 67 / 47 / 0 / 0
  • #5387FF
Mint
  • 353C
  • 100 / 238 / 171
  • 50 / 0 / 49 / 0
  • #64EEAB
Rasperry
  • 1785C
  • 254 / 74 / 93
  • 0 / 85 / 54 / 0
  • #F54752
Banana
  • 1225C
  • 255 / 195 / 65
  • 0 / 25 / 84 / 0
  • #FFC341

Extended Palettes

Grey Shades
  • Black
  • Black
  • -
  • 0 / 0 / 0
  • #000000
  • Grey-900
  • 426C
  • 76 / 67 / 61 / 68
  • 33 / 37 / 41
  • #212529
  • Grey-800
  • 432C
  • 75 / 64 / 56 / 49
  • 52 / 58 / 64
  • #343A40
  • Grey-700
  • 7540C
  • 71 / 59 / 51 / 32
  • 73 / 80 / 87
  • #495057
  • Grey-600
  • Cool Gray 9C
  • 61 / 47 / 41 / 10
  • 108 / 117 / 125
  • #6C757D
  • Grey-500
  • 429C
  • 33 / 23 / 19 / 0
  • 173 / 181 / 189
  • #ADB5BD
  • Grey-400
  • 427C
  • 18 / 11 / 9 / 0
  • 95 / 117 / 137
  • #CED4DA
  • Grey-300
  • 7541C
  • 11 / 7 / 6 / 0
  • 222 / 226 / 230
  • #DEE2E6
  • Grey-200
  • 663C
  • 7 / 4 / 3 / 0
  • 233 / 236 / 239
  • #E9ECEF
  • Grey-100
  • 663C
  • 2 / 1 / 1 / 0
  • 248 / 249 / 250
  • #F8F9FA
  • Milk
  • -
  • 0 / 0 / 0 / 0
  • 255 / 255 / 255
  • #FFFFFF0

Other Shade Palettes

Orange Shades
  • Orange
  • 151C
  • 0 / 55 / 100 / 0
  • 225 / 140 / 0
  • #FF8C00
  • Orange-400
  • 1365C
  • 0 / 42 / 89 / 0
  • 255 / 163 / 51
  • #FFA333
  • Orange-300
  • 1355C
  • 0 / 31 / 68 / 0
  • 255 / 186 / 102
  • #FFBA66
  • Orange-200
  • 7507C
  • 0 / 19 / 43 / 0
  • 255 / 209 / 153
  • #FFD199
  • Orange-100
  • 7506C
  • 0 / 9 / 20 / 0
  • 255 / 232 / 204
  • #FFE8CC
Cognitive Shades
  • Cognitive
  • 151C
  • 84 / 64 / 38 / 21
  • 55 / 82 / 108
  • #37526C
  • Cognitive-400
  • 5405C
  • 67 / 48 / 34 / 7
  • 95 / 117 / 137
  • #5F7589
  • Cognitive-300
  • 5425C
  • 51 / 34 / 26 / 1
  • 135 / 151 / 167
  • #8797A7
  • Cognitive-200
  • 5435C
  • 32 / 20 / 16 / 0
  • 175 / 186 / 196
  • #AFBAC4
  • Cognitive-100
  • 649C
  • 14 / 9 / 7 / 0
  • 215 / 220 / 226
  • #D7DCE2