Colors

Approved colors for use in MP Cloud digital and printed products.

To make quick use of these colors in Sketch, you can download the Global Palette, which uses the Sketch Palettes Plugin.

All of these colors can be used with text and background color utility classes by adding the Sass variable name (e.g. $mp-blue) to the utility class name using the standard patterns.

Class name examples: text color (.text-mp-blue), background color (.bg-mp-blue)

Brand Colors

MP Cloud Blue

Hex: #141B4D RGB: 20, 27, 77 HSL: 233, 59, 19 Pantone: 2766 C Sass: $mp-blue

Dark

Hex: #0F1439
RGB: 15, 20, 57
HSL: 233, 58, 14
Pantone: 282 C
Sass: $mp-blue-dark

Light

Hex: #1E2975
RGB: 30, 41, 117
HSL: 232, 59, 29
Pantone: 3591 C
Sass: $mp-blue-light

Lighter

Hex: #AAB2E9
RGB: 170, 178, 233
HSL: 232, 59, 79
Pantone: 2113 C
Sass: $mp-blue-lighter

Lightest

Hex: #DFE2F7
RGB: 242, 128, 177
HSL: 334, 81, 73
Pantone: 211
Sass: $mp-blue-lightest

Pulse Red

Hex: #EE2737 RGB: 238, 39, 55 HSL: 355, 85, 54 Pantone: 1788 C Sass: $pulse-red

Dark

Hex: #030387
RGB: 3, 3, 135
HSL: 355, 85, 34
Pantone: 187 C
Sass: $pulse-red-dark

Light

Hex: #F25E6A
RGB: 242, 94, 106
HSL: 355, 85, 66
Pantone: 2346 C
Sass: $pulse-red-light

Lighter

Hex: #F9B8BD
RGB: 170, 178, 233
HSL: 232, 59, 79
Pantone: 2113 C
Sass: $pulse-red-lighter

Lightest

Hex: #FDE7E9
RGB: 253, 231, 233
HSL: 355, 85, 95
Pantone: 705 C
Sass: $pulse-red-lightest

Cloud Blue

Hex: #1AA1BD RGB: 26, 161, 189 HSL: 190, 76, 42 Pantone: 2200 C Sass: $cloud-blue

Dark

Hex: #147A8F
RGB: 26, 161, 189
HSL: 190, 76, 42
Pantone: 7467
Sass: $cloud-blue-dark

Light

Hex: #2CC3E2
RGB: 44, 195, 226
HSL: 190, 76, 53
Pantone: 2198 C
Sass: $cloud-blue-light

Lighter

Hex: #AAE7F3
RGB: 171, 231, 234
HSL: 190, 75, 81
Pantone: 2198 C
Sass: $cloud-blue-lighter

Lightest

Hex: #DFE2F7
RGB: 242, 128, 177
HSL: 334, 81, 73
Pantone: 304 C
Sass: $cloud-blue-lightest

EMTech Orange

Hex: #FF9E1B RGB: 255, 158, 27 HSL: 34, 100, 55 Pantone: 1375 C Sass: $em-orange

Dark

Hex: #BD6C00
RGB: 189, 108, 0
HSL: 34, 100, 37
Pantone: 153 C
Sass: $em-orange-dark

Light

Hex: #FFB34C
RGB: 255, 179, 76
HSL: 35, 100, 65
Pantone: 1365 C
Sass: $em-orange-light

Lighter

Hex: #FFC97F
RGB: 255, 201, 127
HSL: 35, 100, 75
Pantone: 149 C
Sass: $em-orange-lighter

Lightest

Hex: #FFDEB3
RGB: 255, 222, 179
HSL: 34, 100, 85
Pantone: 2015 C
Sass: $em-orange-lightest

Grayscale

Darker

Hex: #2A2B2D
RGB: 42, 43, 45
HSL: 220, 3, 17
Pantone: 426 C
Sass: $gray-darker

Dark

Hex: #333538
RGB: 51, 53, 56
HSL: 216, 5, 21
Pantone: 447 C
Sass: $gray-dark

Gray

Hex: #53565A
RGB: 83, 86, 90
HSL: 214, 4, 34
Pantone: Cool Gray 11 C
Sass: $gray

Light

Hex: #6C7075
RGB: 108, 112, 117
HSL: 213, 4, 44
Pantone: 424 C
Sass: $gray-light

Lighter

Hex: #9FA3A7
RGB: 159, 163, 167
HSL: 210, 4, 64
Pantone: 422 C
Sass: $gray-lighter

Lightest

Hex: #D5D6D8
RGB: 220, 4, 84
HSL: 220, 84, 15
Pantone: Cool Gray 1 C
Sass: $gray-lightest

White

Hex: #ffffff
RGB: 255, 255, 255
HSL: 0, 0, 100
Pantone: n/a
Sass: $white
On this page: