N26 color palette
FinanceN26 uses a minimalist color palette centered around its signature teal green, complemented by neutral greys and dark tones for a modern, digital banking experience. The palette emphasizes clarity, accessibility, and a clean interface.
n26.comN26 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- N26 TealPrimary72, 172, 152
- N26 CharcoalSecondary33, 33, 33
- N26 GoldAccent247, 181, 0
Surfaces
Page, cards and dividers.- N26 WhiteBackground255, 255, 255
- N26 Light GreySurface245, 245, 245
- N26 Border GreyBorder224, 224, 224
Text
Three tiers of copy.- N26 Charcoal TextText33, 33, 33
- N26 Medium Grey TextSecondary text117, 117, 117
- N26 Muted Grey TextMuted text189, 189, 189
Semantic
Feedback and state colors.- N26 Teal SuccessSuccess72, 172, 152
- N26 Gold WarningWarning247, 181, 0
- N26 Error RedError229, 57, 53
- N26 Info BlueInfo33, 150, 243
Use N26's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
n26-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #E53935;
--accent: #F7B500;
--border: #E0E0E0;
--primary: #48AC98;
--success: #48AC98;
--surface: #F5F5F5;
--warning: #F7B500;
--secondary: #212121;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #757575;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
N26 gray and neutral colors
The quiet part of the N26 palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- N26 WhiteBackground
- HEX
- RGB
- HSL
- N26 Light GreySurface
- HEX
- RGB
- HSL
- N26 Border GreyBorder
- HEX
- RGB
- HSL
- N26 Charcoal TextText
- HEX
- RGB
- HSL
- N26 Medium Grey TextSecondary text
- HEX
- RGB
- HSL
- N26 Muted Grey TextMuted text
- HEX
- RGB
- HSL
About N26's colors
N26’s palette is built around a distinctive teal, supported by neutral greys and minimal accent colors for clarity and accessibility. The restrained use of color ensures focus on content and usability.
Teal is used for brand recognition and key actions.
Greys provide structure and hierarchy in the UI.
Gold and red are reserved for highlights and status feedback.
Psychology
The teal primary color conveys trust, calm, and innovation, aligning with digital banking values. Neutral greys reinforce professionalism and simplicity.
Evolution
The palette has remained stable since N26’s rebrand, maintaining its teal focus and minimalistic approach. Minor adjustments to grey tones have improved accessibility and contrast.
Where N26 uses each color
- Primary
Used for main action buttons, highlights, and the N26 logo.
- Secondary
Applied to navigation bars, footers, and key UI backgrounds.
- Accent
Used sparingly for notifications, highlights, and promotional elements.
- Backgrounds
White and light grey backgrounds dominate app screens and web pages.
- Text
Charcoal and medium grey are used for primary and secondary text throughout the UI.
- Semantic
Teal indicates success, gold for warnings, and red for errors in forms and notifications.
N26 color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official N26 primary color is #48AC98, known as N26 Teal.
N26 Teal (#48AC98) in RGB is 72, 172, 152. For CMYK, it is approximately 58, 0, 12, 33.
N26 uses #212121 (N26 Charcoal) for dark UI elements and #F5F5F5 (N26 Light Grey) for surfaces and backgrounds.
Use #48AC98 for primary actions and branding, with greys for structure and gold/red/blue for semantic feedback. Maintain high contrast and avoid overusing accent colors.
The secondary color is N26 Charcoal, #212121, and the accent is N26 Gold, #F7B500. Together with the primary they make up the three brand colors at the top of this page.
3 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 N26's colors consistently when it generates UI.
Make something in the spirit of N26
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.