Wealthfront color palette
FinanceWealthfront's color identity centers on a distinctive deep blue-violet, paired with a clean, modern palette of neutrals and accent blues. The brand's visual system emphasizes clarity and trust, aligning with its digital-first financial services.
wealthfront.comWealthfront colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Wealthfront VioletPrimary57, 38, 177
- Wealthfront Deep NavySecondary45, 43, 77
- Wealthfront BlueAccent26, 143, 255
Surfaces
Page, cards and dividers.- Wealthfront WhiteBackground255, 255, 255
- Wealthfront Light GraySurface246, 247, 251
- Wealthfront Border GrayBorder227, 230, 237
Text
Three tiers of copy.- Wealthfront BlackText26, 26, 26
- Wealthfront Secondary TextSecondary text74, 74, 104
- Wealthfront Muted TextMuted text138, 138, 174
Semantic
Feedback and state colors.- Wealthfront GreenSuccess0, 196, 140
- Wealthfront YellowWarning255, 184, 0
- Wealthfront RedError255, 77, 79
- Wealthfront BlueInfo26, 143, 255
Use Wealthfront's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
wealthfront-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A8FFF;
--error: #FF4D4F;
--accent: #1A8FFF;
--border: #E3E6ED;
--primary: #3926B1;
--success: #00C48C;
--surface: #F6F7FB;
--warning: #FFB800;
--secondary: #2D2B4D;
--text-muted: #8A8AAE;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4A4A68;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Wealthfront background, border and text colors
The quiet part of the Wealthfront palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Wealthfront WhiteBackground
- HEX
- RGB
- HSL
- Wealthfront Light GraySurface
- HEX
- RGB
- HSL
- Wealthfront Border GrayBorder
- HEX
- RGB
- HSL
- Wealthfront BlackText
- HEX
- RGB
- HSL
- Wealthfront Secondary TextSecondary text
- HEX
- RGB
- HSL
- Wealthfront Muted TextMuted text
- HEX
- RGB
- HSL
About Wealthfront's colors
Wealthfront uses a blue-violet primary to convey innovation and trust, supported by a clean, minimal set of neutrals and functional accent colors. The palette is designed for digital clarity and accessibility.
Primary violet contrasts with white and light gray backgrounds.
Accent blue is used for interactive elements and highlights.
Neutral grays support readability and hierarchy.
Psychology
The deep violet and blue tones evoke reliability, intelligence, and a forward-thinking ethos. Neutrals reinforce a sense of professionalism and approachability.
Evolution
Wealthfront's palette has remained stable, with the violet and blue core established early in its brand history. Minor adjustments have refined neutral tones for improved digital legibility.
Where Wealthfront uses each color
- Primary
Used in the logo, primary buttons, and key navigation highlights.
- Secondary
Appears in backgrounds of navigation bars and footers.
- Accent
Applied to links, call-to-action buttons, and icons.
- Backgrounds
White and light gray are used for app and website backgrounds.
- Text
Primary and secondary text colors are used throughout the UI for hierarchy.
- Semantic
Green, yellow, and red indicate success, warning, and error states in dashboards and notifications.
Wealthfront color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Wealthfront brand color is Wealthfront Violet, hex #3926B1.
Wealthfront Violet (#3926B1) is RGB(57, 38, 177). For CMYK, use 68, 79, 0, 31.
Wealthfront uses Light Gray (#F6F7FB) for surfaces and Border Gray (#E3E6ED) for dividers and UI elements.
Primary violet is reserved for branding and main actions, while accent blue is for links and highlights. Neutrals support backgrounds and text for clarity and accessibility.
The secondary color is Wealthfront Deep Navy, #2D2B4D, and the accent is Wealthfront Blue, #1A8FFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Wealthfront's colors consistently when it generates UI.
Make something in the spirit of Wealthfront
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.