Betterment color palette
FinanceBetterment's color identity centers on a deep blue primary, complemented by a clean, modern grayscale palette and subtle accent blue. The colors convey trust, clarity, and a digital-first approach in the finance sector.
betterment.comBetterment colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Betterment BluePrimary26, 60, 102
- Betterment Secondary BlueSecondary47, 93, 140
- Betterment Accent BlueAccent0, 153, 214
Surfaces
Page, cards and dividers.- Betterment WhiteBackground255, 255, 255
- Betterment Surface GraySurface247, 249, 251
- Betterment Border GrayBorder229, 233, 239
Text
Three tiers of copy.- Betterment BlackText26, 26, 26
- Betterment Text GraySecondary text75, 90, 105
- Betterment Muted GrayMuted text138, 153, 168
Semantic
Feedback and state colors.- Betterment Success GreenSuccess27, 196, 125
- Betterment Warning OrangeWarning255, 180, 77
- Betterment Error RedError225, 75, 75
- Betterment Info BlueInfo0, 153, 214
Use Betterment's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
betterment-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099D6;
--error: #E14B4B;
--accent: #0099D6;
--border: #E5E9EF;
--primary: #1A3C66;
--success: #1BC47D;
--surface: #F7F9FB;
--warning: #FFB44D;
--secondary: #2F5D8C;
--text-muted: #8A99A8;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B5A69;
}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.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Betterment background, border and text colors
The quiet part of the Betterment palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Betterment WhiteBackground
- HEX
- RGB
- HSL
- Betterment Surface GraySurface
- HEX
- RGB
- HSL
- Betterment Border GrayBorder
- HEX
- RGB
- HSL
- Betterment BlackText
- HEX
- RGB
- HSL
- Betterment Text GraySecondary text
- HEX
- RGB
- HSL
- Betterment Muted GrayMuted text
- HEX
- RGB
- HSL
About Betterment's colors
Betterment's palette uses a deep blue to convey trust and reliability, paired with neutral grays and white for clarity and simplicity. Accent blue and semantic colors provide functional highlights for UI communication.
Primary blue anchors navigation and branding.
Secondary and accent blues are used for highlights and actions.
Grays and white provide a clean, modern interface.
Psychology
Blue is associated with security and professionalism, important for a financial brand. The restrained use of color supports a sense of calm and clarity for users managing their finances.
Evolution
Betterment's palette has remained consistent, with minor adjustments to blue and gray tones for improved accessibility and digital clarity. The core identity has always centered on blue and neutral tones.
Where Betterment uses each color
- Primary
Used in the logo, main navigation bar, and key call-to-action buttons.
- Secondary
Appears in secondary buttons, links, and some iconography.
- Accent
Used for highlights, active states, and informational elements.
- Backgrounds
White and light gray backgrounds are used throughout app screens and web pages.
- Text
Primary black for main text, secondary and muted grays for supporting or less prominent text.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Betterment color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Betterment brand color is Betterment Blue, hex code #1A3C66.
Betterment Blue (#1A3C66) is RGB(26, 60, 102). For print, its approximate CMYK is 75, 41, 0, 60.
Betterment uses a range of grays: Surface Gray (#F7F9FB), Border Gray (#E5E9EF), Text Gray (#4B5A69), and Muted Gray (#8A99A8) for UI backgrounds, borders, and text.
Use Betterment Blue (#1A3C66) for primary branding and navigation, with secondary and accent blues for actions and highlights. Grays and semantic colors structure the UI and communicate status.
The secondary color is Betterment Secondary Blue, #2F5D8C, and the accent is Betterment Accent Blue, #0099D6. 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 Betterment's colors consistently when it generates UI.
Make something in the spirit of Betterment
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.