Monzo color palette
FinanceMonzo's color system features a deep blue primary with vibrant accent hues, reflecting its modern, digital-first approach to banking. The palette combines navy, coral, and soft neutrals for clarity and accessibility across its platforms.
monzo.comMonzo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Monzo NavyPrimary20, 35, 60
- Monzo CoralSecondary255, 111, 91
- Monzo PeachAccent255, 179, 102
Surfaces
Page, cards and dividers.- Monzo Light GrayBackground246, 247, 248
- Monzo WhiteSurface255, 255, 255
- Monzo Border GrayBorder226, 228, 232
Text
Three tiers of copy.- Monzo Navy TextText20, 35, 60
- Monzo SlateSecondary text107, 122, 144
- Monzo Muted GrayMuted text163, 168, 177
Semantic
Feedback and state colors.- Monzo GreenSuccess0, 179, 104
- Monzo PeachWarning255, 179, 102
- Monzo CoralError255, 111, 91
- Monzo BlueInfo45, 156, 219
Use Monzo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
monzo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #FF6F5B;
--accent: #FFB366;
--border: #E2E4E8;
--primary: #14233C;
--success: #00B368;
--surface: #FFFFFF;
--warning: #FFB366;
--secondary: #FF6F5B;
--text-muted: #A3A8B1;
--background: #F6F7F8;
--text-primary: #14233C;
--text-secondary: #6B7A90;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Monzo background, border and text colors
The quiet part of the Monzo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Monzo Light GrayBackground
- HEX
- RGB
- HSL
- Monzo WhiteSurface
- HEX
- RGB
- HSL
- Monzo Border GrayBorder
- HEX
- RGB
- HSL
- Monzo Navy TextText
- HEX
- RGB
- HSL
- Monzo SlateSecondary text
- HEX
- RGB
- HSL
- Monzo Muted GrayMuted text
- HEX
- RGB
- HSL
About Monzo's colors
Monzo’s palette uses a deep blue for trust and professionalism, paired with energetic coral and peach for approachability. Soft grays and white provide clarity and accessibility in digital contexts.
Primary navy anchors the brand and is used for navigation and key elements.
Coral and peach accents highlight actions and notifications.
Neutral grays and white balance the vibrant accents for readability.
Psychology
The navy conveys security and reliability, essential for a financial brand. Coral and peach add warmth and friendliness, making the digital experience inviting.
Evolution
Monzo’s palette has remained consistent since its launch, with minor refinements to accent hues for better digital accessibility. The brand has maintained its signature navy and coral combination throughout its evolution.
Where Monzo uses each color
- Primary
Used for app navigation bars, headers, and key call-to-action buttons.
- Secondary
Appears in highlights, notifications, and promotional elements.
- Accent
Used for secondary buttons, badges, and interactive elements.
- Backgrounds
Light gray and white are used for app backgrounds and card surfaces.
- Text
Navy and slate are used for primary and secondary text, with muted gray for placeholders and disabled states.
- Semantic
Green, peach, and coral indicate success, warnings, and errors in UI feedback.
Monzo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Monzo primary color is Monzo Navy, with the hex code #14233C. This color is used across navigation and key brand elements.
Monzo Navy (#14233C) has an RGB value of 20, 35, 60. For CMYK, it is approximately 67, 42, 0, 76.
Monzo uses Monzo Light Gray (#F6F7F8), Monzo Border Gray (#E2E4E8), and Monzo Muted Gray (#A3A8B1) for backgrounds, borders, and muted text. These ensure clarity and accessibility in the UI.
Use Monzo Navy (#14233C) for primary navigation and actions, with Coral (#FF6F5B) and Peach (#FFB366) for highlights and feedback. Grays and white provide balance and should be used for backgrounds and surfaces.
The secondary color is Monzo Coral, #FF6F5B, and the accent is Monzo Peach, #FFB366. Together with the primary they make up the three brand colors at the top of this page.
2 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 Monzo's colors consistently when it generates UI.
Make something in the spirit of Monzo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.