Nubank color palette
FinanceNubank's color identity centers on a distinctive purple, complemented by a modern palette of neutrals and accent hues for digital finance interfaces. The palette is designed for clarity, accessibility, and strong brand recognition.
nubank.com.brNubank colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nubank PurplePrimary130, 10, 209
- Nubank LavenderSecondary168, 100, 209
- Nubank YellowAccent255, 221, 0
Surfaces
Page, cards and dividers.- Nubank Light GrayBackground246, 247, 249
- Nubank WhiteSurface255, 255, 255
- Nubank Border GrayBorder225, 227, 230
Text
Three tiers of copy.- Nubank CharcoalText26, 26, 26
- Nubank Medium GraySecondary text107, 107, 107
- Nubank Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Nubank GreenSuccess0, 184, 107
- Nubank Warning YellowWarning255, 184, 0
- Nubank RedError255, 59, 48
- Nubank BlueInfo0, 153, 255
Use Nubank's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nubank-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #FF3B30;
--accent: #FFDD00;
--border: #E1E3E6;
--primary: #820AD1;
--success: #00B86B;
--surface: #FFFFFF;
--warning: #FFB800;
--secondary: #A864D1;
--text-muted: #A3A3A3;
--background: #F6F7F9;
--text-primary: #1A1A1A;
--text-secondary: #6B6B6B;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3: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.5:1
Fail
Nubank background, border and text colors
The quiet part of the Nubank palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nubank Light GrayBackground
- HEX
- RGB
- HSL
- Nubank WhiteSurface
- HEX
- RGB
- HSL
- Nubank Border GrayBorder
- HEX
- RGB
- HSL
- Nubank CharcoalText
- HEX
- RGB
- HSL
- Nubank Medium GraySecondary text
- HEX
- RGB
- HSL
- Nubank Muted GrayMuted text
- HEX
- RGB
- HSL
About Nubank's colors
Nubank's palette is anchored by a bold purple, signaling innovation and approachability in finance. The supporting neutrals and accent colors create a clean, accessible digital experience.
Primary purple is paired with lighter lavender for visual hierarchy.
Neutral grays provide contrast and readability.
Accent yellow is used sparingly for highlights and alerts.
Psychology
Purple conveys creativity, trust, and a break from traditional banking. The palette's clarity and vibrancy aim to make finance feel more approachable and modern.
Evolution
Nubank's core purple has remained consistent since launch, reinforcing brand recognition. Over time, the palette has expanded with more nuanced neutrals and accent colors for improved UI clarity.
Where Nubank uses each color
- Primary
Used in the Nubank logo, primary buttons, and key navigation elements.
- Secondary
Applied to secondary buttons, backgrounds, and subtle highlights in the app.
- Accent
Used for notifications, highlights, and promotional banners.
- Backgrounds
Light gray and white backgrounds are used throughout app screens and web interfaces.
- Text
Charcoal and gray tones are used for primary and secondary text for optimal legibility.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational states in UI feedback.
Nubank color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nubank primary color is #820AD1. This purple is used for the logo and main brand elements.
Nubank Purple (#820AD1) is RGB(130, 10, 209) and CMYK(38, 95, 0, 18). Always use the hex #820AD1 for digital applications.
Nubank uses a range of grays including Nubank Light Gray (#F6F7F9), Border Gray (#E1E3E6), and Charcoal (#1A1A1A) for backgrounds, borders, and text.
Use Nubank Purple (#820AD1) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be used sparingly for highlights and feedback.
The secondary color is Nubank Lavender, #A864D1, and the accent is Nubank Yellow, #FFDD00. 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 Nubank's colors consistently when it generates UI.
Make something in the spirit of Nubank
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.