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
CMYK
93.65.57.57
Pantone
PAN 547
Step 0
Hex
#005461
CMYK
93.54.49.27
Pantone
PAN 3165
Step 1
Hex
#3D7B87
CMYK
78.39.40.08
Pantone
Step 2
Hex
#BFD3D6
CMYK
24.09.13.00
Pantone
Step 3
Hex
#EBF1F2
CMYK
06.02.03.00
Pantone
MP Blue
Step -1
Hex
#00758C
CMYK
89.42.35.07
Pantone
Step 0
Hex
#00A2C2
CMYK
77.17.17.00
Pantone
PAN 312
Step 1
Hex
#47BCD3
CMYK
64.04.15.00
Pantone
Step 2
Hex
#C2E9F0
CMYK
22.00.05.00
Pantone
Step 3
Hex
#EBF8FA
CMYK
06.00.01.00
Pantone
MP Green
Step -1
Hex
#0E7A0E
CMYK
87.27.100.16
Pantone
Step 0
Hex
#13AA13
CMYK
81.04.100.01
Pantone
PAN 354
Step 1
Hex
#55C255
CMYK
66.00.89.00
Pantone
Step 2
Hex
#C6EBC6
CMYK
22.00.28.00
Pantone
Step 3
Hex
#ECF8EC
CMYK
06.00.08.00
Pantone
MP Rubine
Step -1
Hex
#9B0042
CMYK
Pantone
Step 0
Hex
#CE0058
CMYK
14.100.50.2
Pantone
PAN 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
CMYK
00.00.00.95
Pantone
Step 0
Hex
#333333
CMYK
00.00.00.91
Pantone
PAN 447
Step 1
Hex
#959595
CMYK
00.00.00.70
Pantone
Step 2
Hex
#CECECE
CMYK
00.00.00.22
Pantone
Step 3
Hex
#EFEFEF
CMYK
00.00.00.08
Pantone
MP Utility Gold
Step -1
Hex
#AE7809
CMYK
29.51.100.10
Pantone
Step 0
Hex
#F2A60D
CMYK
04.38.100.00
Pantone
Step 1
Hex
#F6BF51
CMYK
03.26.79.00
Pantone
Step 2
Hex
#FCEAC5
CMYK
01.07.25.00
Pantone
Step 3
Hex
#FEF8EC
CMYK
00.02.06.00
Pantone
MP Utility Blue
Step -1
Hex
#004E7E
CMYK
Pantone
Step 0
Hex
#006DAF
CMYK
86.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.