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.
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.