Wise color palette
FinanceWise uses a vibrant, modern color palette centered on its signature green, complemented by deep navy and crisp neutrals for clarity and accessibility. The color system ensures strong brand recognition and clear UI hierarchy across digital and print touchpoints.
wise.comWise colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Wise GreenPrimary159, 232, 112
- Wise NavySecondary28, 28, 81
- Wise BlueAccent0, 185, 255
Surfaces
Page, cards and dividers.- Wise WhiteBackground255, 255, 255
- Wise Light GraySurface245, 247, 250
- Wise Border GrayBorder227, 230, 235
Text
Three tiers of copy.- Wise NavyText28, 28, 81
- Wise Medium GraySecondary text107, 114, 128
- Wise Muted GrayMuted text174, 180, 190
Semantic
Feedback and state colors.- Wise GreenSuccess159, 232, 112
- Wise YellowWarning255, 214, 0
- Wise RedError255, 75, 75
- Wise BlueInfo0, 185, 255
Use Wise's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
wise-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B9FF;
--error: #FF4B4B;
--accent: #00B9FF;
--border: #E3E6EB;
--primary: #9FE870;
--success: #9FE870;
--surface: #F5F7FA;
--warning: #FFD600;
--secondary: #1C1C51;
--text-muted: #AEB4BE;
--background: #FFFFFF;
--text-primary: #1C1C51;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Wise background, border and text colors
The quiet part of the Wise palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Wise WhiteBackground
- HEX
- RGB
- HSL
- Wise Light GraySurface
- HEX
- RGB
- HSL
- Wise Border GrayBorder
- HEX
- RGB
- HSL
- Wise NavyText
- HEX
- RGB
- HSL
- Wise Medium GraySecondary text
- HEX
- RGB
- HSL
- Wise Muted GrayMuted text
- HEX
- RGB
- HSL
About Wise's colors
Wise's palette is built around a fresh green that signals growth and transparency, balanced by deep navy for trust and stability. The supporting colors provide clarity and accessibility in digital interfaces.
Primary green is complemented by deep navy for contrast.
Accent blue highlights actions and links.
Neutrals and grays support readability and hierarchy.
Psychology
Green evokes reliability, safety, and progress, aligning with Wise's mission of transparent finance. Navy and gray tones reinforce professionalism and trust.
Evolution
Wise's palette has remained consistent since its rebrand from TransferWise, with minor refinements to green and navy for digital accessibility. The color system has been stable, focusing on clarity and global usability.
Where Wise uses each color
- Primary
Used for key brand elements, primary buttons, and highlights across the website and app.
- Secondary
Appears in navigation bars, headers, and as a background for cards or footers.
- Accent
Used for links, interactive elements, and notifications.
- Backgrounds
White and light gray are used for main backgrounds and content surfaces.
- Text
Navy is used for primary text, with medium and muted grays for secondary and supporting text.
- Semantic
Green indicates success, yellow for warnings, red for errors, and blue for informational messages.
Wise color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Wise primary color is Wise Green, with the exact hex code #9FE870. This color is used for branding and key UI actions.
Wise Green (#9FE870) in RGB is 159, 232, 112. In CMYK, it is approximately 32, 0, 52, 0.
Wise uses several neutrals, including Wise Light Gray (#F5F7FA), Wise Border Gray (#E3E6EB), and Wise Muted Gray (#AEB4BE). These support background, borders, and secondary text for clarity and accessibility.
Use Wise Green (#9FE870) for primary actions and highlights, with Wise Navy (#1C1C51) for backgrounds and text. Accent and semantic colors should be reserved for interactive elements and status indicators.
The secondary color is Wise Navy, #1C1C51, and the accent is Wise Blue, #00B9FF. 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 Wise's colors consistently when it generates UI.
Make something in the spirit of Wise
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.