NatWest color palette
FinanceNatWest's color identity is defined by its distinctive purple, supported by a palette of magenta, deep blue, and neutral greys. The palette reflects the brand's modern, trustworthy, and innovative approach to banking.
natwest.comNatWest colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NatWest PurplePrimary104, 40, 118
- NatWest MagentaSecondary215, 38, 96
- NatWest CyanAccent0, 169, 224
Surfaces
Page, cards and dividers.- NatWest WhiteBackground255, 255, 255
- NatWest Light GreySurface245, 245, 246
- NatWest Border GreyBorder209, 210, 212
Text
Three tiers of copy.- NatWest BlackText35, 31, 32
- NatWest Medium GreySecondary text110, 110, 110
- NatWest Muted GreyMuted text167, 168, 170
Semantic
Feedback and state colors.- NatWest GreenSuccess0, 154, 68
- NatWest YellowWarning255, 184, 28
- NatWest MagentaError215, 38, 96
- NatWest CyanInfo0, 169, 224
Use NatWest's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
natwest-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00A9E0;
--error: #D72660;
--accent: #00A9E0;
--border: #D1D2D4;
--primary: #682876;
--success: #009A44;
--surface: #F5F5F6;
--warning: #FFB81C;
--secondary: #D72660;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6E6E6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
NatWest gray and neutral colors
The quiet part of the NatWest palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NatWest WhiteBackground
- HEX
- RGB
- HSL
- NatWest Light GreySurface
- HEX
- RGB
- HSL
- NatWest Border GreyBorder
- HEX
- RGB
- HSL
- NatWest BlackText
- HEX
- RGB
- HSL
- NatWest Medium GreySecondary text
- HEX
- RGB
- HSL
- NatWest Muted GreyMuted text
- HEX
- RGB
- HSL
About NatWest's colors
NatWest's palette uses a bold purple as its anchor, complemented by vibrant magenta and cyan for emphasis and clarity. Neutral greys and white provide balance and accessibility across digital and print applications.
Primary purple is contrasted with magenta and cyan for visual hierarchy.
Greyscale tones support readability and structure.
Accent colors are used sparingly for calls to action and highlights.
Psychology
Purple conveys trust, creativity, and a sense of premium service, while magenta adds energy and approachability. The supporting greys and blue tones reinforce clarity and professionalism.
Evolution
NatWest's core purple has remained consistent for decades, with recent updates introducing brighter accent colors and refined neutrals for digital clarity. The palette has evolved to improve accessibility and modernize the brand's digital presence.
Where NatWest uses each color
- Primary
NatWest Purple is used for the logo, navigation bars, and key brand elements.
- Secondary
NatWest Magenta appears in buttons, highlights, and promotional graphics.
- Accent
NatWest Cyan is used for links, icons, and informational highlights.
- Backgrounds
NatWest White and Light Grey are used for page backgrounds and card surfaces.
- Text
NatWest Black and Medium Grey are used for primary and secondary text, with Muted Grey for disabled or less prominent text.
- Semantic
NatWest Green, Yellow, and Magenta are used for success, warning, and error states respectively, while Cyan is used for informational messages.
NatWest color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NatWest brand color is NatWest Purple, with the hex code #682876.
NatWest Purple (#682876) is RGB(104, 40, 118) and CMYK(56, 89, 0, 0).
NatWest uses Light Grey (#F5F5F6), Border Grey (#D1D2D4), Medium Grey (#6E6E6E), and Muted Grey (#A7A8AA) for backgrounds, borders, and text.
Use NatWest Purple (#682876) for primary branding, Magenta (#D72660) and Cyan (#00A9E0) for accents, and the official greys for backgrounds and text to maintain brand consistency.
The secondary color is NatWest Magenta, #D72660, and the accent is NatWest Cyan, #00A9E0. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies NatWest's colors consistently when it generates UI.
Make something in the spirit of NatWest
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.