SoFi color palette
FinanceSoFi's brand color system is defined by a distinctive teal primary, supported by a clean, modern palette of blues, neutrals, and accent tones. The color identity reflects approachability, innovation, and trust in the financial sector.
sofi.comSoFi colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SoFi TealPrimary0, 185, 228
- SoFi CharcoalSecondary42, 43, 46
- SoFi Accent BlueAccent0, 167, 199
Surfaces
Page, cards and dividers.- SoFi WhiteBackground255, 255, 255
- SoFi Light GraySurface245, 248, 250
- SoFi Border GrayBorder230, 236, 241
Text
Three tiers of copy.- SoFi CharcoalText42, 43, 46
- SoFi Secondary GraySecondary text107, 124, 147
- SoFi Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- SoFi Success GreenSuccess0, 196, 140
- SoFi Warning YellowWarning246, 195, 67
- SoFi Error RedError243, 91, 91
- SoFi Info BlueInfo0, 151, 193
Use SoFi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sofi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0097C1;
--error: #F35B5B;
--accent: #00A7C7;
--border: #E6ECF1;
--primary: #00B9E4;
--success: #00C48C;
--surface: #F5F8FA;
--warning: #F6C343;
--secondary: #2A2B2E;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #2A2B2E;
--text-secondary: #6B7C93;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.2:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
SoFi background, border and text colors
The quiet part of the SoFi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- SoFi WhiteBackground
- HEX
- RGB
- HSL
- SoFi Light GraySurface
- HEX
- RGB
- HSL
- SoFi Border GrayBorder
- HEX
- RGB
- HSL
- SoFi CharcoalText
- HEX
- RGB
- HSL
- SoFi Secondary GraySecondary text
- HEX
- RGB
- HSL
- SoFi Muted GrayMuted text
- HEX
- RGB
- HSL
About SoFi's colors
SoFi's palette is anchored by a vibrant teal, complemented by deep charcoals and light neutrals for clarity and accessibility. The color system is designed for digital interfaces, ensuring legibility and a modern, friendly feel.
Primary teal contrasts with charcoal for emphasis.
Accent blue is used for interactive elements.
Neutrals provide balance and support readability.
Psychology
Teal conveys trust, innovation, and approachability, which are essential for a modern fintech brand. The use of clean neutrals and clear accent colors supports a sense of security and transparency.
Evolution
SoFi's core teal and charcoal palette has remained consistent since its rebrand in the late 2010s. Minor adjustments have been made to supporting colors for improved accessibility and digital performance.
Where SoFi uses each color
- Primary
SoFi Teal is used for the logo, primary buttons, and key highlights across the website and app.
- Secondary
SoFi Charcoal appears in navigation bars, footers, and text for strong contrast.
- Accent
SoFi Accent Blue is used for links, icons, and interactive UI elements.
- Backgrounds
SoFi White and Light Gray are used for backgrounds and card surfaces to maintain clarity and hierarchy.
- Text
Charcoal and Secondary Gray are used for primary and secondary text, while Muted Gray is used for disabled or less prominent content.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators, alerts, and notifications.
SoFi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official SoFi brand color is SoFi Teal, with the hex code #00B9E4.
SoFi Teal (#00B9E4) has an RGB value of 0, 185, 228 and a CMYK value of 80, 0, 10, 0.
SoFi uses SoFi Charcoal (#2A2B2E), Light Gray (#F5F8FA), Border Gray (#E6ECF1), Secondary Gray (#6B7C93), and Muted Gray (#A0AEC0) for UI backgrounds, borders, and text.
Use SoFi Teal (#00B9E4) for primary actions and branding, with supporting neutrals for backgrounds and text. Accent and semantic colors are reserved for interactive elements and status indicators to ensure clarity and accessibility.
The secondary color is SoFi Charcoal, #2A2B2E, and the accent is SoFi Accent Blue, #00A7C7. Together with the primary they make up the three brand colors at the top of this page.
2 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 SoFi's colors consistently when it generates UI.
Make something in the spirit of SoFi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.