Menu

Brand colors

Version 1.0.0 In production

Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers.

Step 0 is the 'default' shade for each color.

If you're building a website which consumes the Franklin CSS via CDN, see the Components ➝ colors page instead.

MP Petrol

Step -1
Hex#003039
CMYK93.65.57.57
PantonePAN 547
Step 0
Hex#005461
CMYK93.54.49.27
PantonePAN 3165
Step 1
Hex#3D7B87
CMYK78.39.40.08
Pantone
Step 2
Hex#BFD3D6
CMYK24.09.13.00
Pantone
Step 3
Hex#EBF1F2
CMYK06.02.03.00
Pantone

MP Blue

Step -1
Hex#00758C
CMYK89.42.35.07
Pantone
Step 0
Hex#00A2C2
CMYK77.17.17.00
PantonePAN 312
Step 1
Hex#47BCD3
CMYK64.04.15.00
Pantone
Step 2
Hex#C2E9F0
CMYK22.00.05.00
Pantone
Step 3
Hex#EBF8FA
CMYK06.00.01.00
Pantone

MP Green

Step -1
Hex#0E7A0E
CMYK87.27.100.16
Pantone
Step 0
Hex#13AA13
CMYK81.04.100.01
PantonePAN 354
Step 1
Hex#55C255
CMYK66.00.89.00
Pantone
Step 2
Hex#C6EBC6
CMYK22.00.28.00
Pantone
Step 3
Hex#ECF8EC
CMYK06.00.08.00
Pantone

MP Rubine

Step -1
Hex#9B0042
CMYK
Pantone
Step 0
Hex#CE0058
CMYK14.100.50.2
PantonePAN Rubine Red
Step 1
Hex#DC4787
CMYK
Pantone
Step 2
Hex#F3C2D7
CMYK
Pantone
Step 3
Hex#FBEBF2
CMYK
Pantone

MP Charcoal

Step -1
Hex#1C1C1C
CMYK00.00.00.95
Pantone
Step 0
Hex#333333
CMYK00.00.00.91
PantonePAN 447
Step 1
Hex#959595
CMYK00.00.00.70
Pantone
Step 2
Hex#CECECE
CMYK00.00.00.22
Pantone
Step 3
Hex#EFEFEF
CMYK00.00.00.08
Pantone

MP Utility Gold

Step -1
Hex#AE7809
CMYK29.51.100.10
Pantone
Step 0
Hex#F2A60D
CMYK04.38.100.00
Pantone
Step 1
Hex#F6BF51
CMYK03.26.79.00
Pantone
Step 2
Hex#FCEAC5
CMYK01.07.25.00
Pantone
Step 3
Hex#FEF8EC
CMYK00.02.06.00
Pantone

MP Utility Blue

Step -1
Hex#004E7E
CMYK
Pantone
Step 0
Hex#006DAF
CMYK86.48.3.5
Pantone
Step 1
Hex#4796C5
CMYK
Pantone
Step 2
Hex#C2DCEC
CMYK
Pantone
Step 3
Hex#EBF3F9
CMYK
Pantone

When to use color

The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Charcoal text, and splashes of color to highlight important elements.

Petrol is our primary color - it represents Malvern Panalytical's spirit and personality. Petrol, together with Blue, are the colors you will use most often in your designs.

Green is reserved for calls to action - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the "buy now" button.

Rubine is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.

Charcoal is mainly used for text, but can also be used for other elements.

Utility Gold is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.

For interactive designs we also have Utility Blue, which is used for hyperlinks. Note: Utility Blue is not generally intended for printed materials.

Tints and shades

Each color is provided in steps. Step 0 is the "default" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.

Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design.

Why so many blues?

Petrol and Blue are part of our brand, but neither is suitable for hyperlinks in web or software environments: Blue doesn't provide enough contrast for legibility, and we didn't want to overuse Petrol. We added Utility Blue to fill this gap.

  • No other solid color tints and shades are permitted as brand colors.
  • MP Rubine must only be used as a solid fill color - not as a gradient, and not in tints and shades.
  • Gradients from a primary color to white are permitted, as are transparent gradients from primary brand color to background image.
  • An additional white gradient can be used to aid legibility if necessary.