Plaid color palette
FinancePlaid's brand color system is built around a distinctive dark blue, complemented by a clean, neutral palette for clarity and trust. The color identity reflects Plaid's focus on secure, reliable financial technology.
plaid.comPlaid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Plaid NavyPrimary8, 42, 74
- Plaid TealSecondary0, 183, 149
- Plaid GoldAccent244, 180, 0
Surfaces
Page, cards and dividers.- Plaid WhiteBackground255, 255, 255
- Plaid Light GraySurface246, 248, 250
- Plaid Border GrayBorder217, 226, 236
Text
Three tiers of copy.- Plaid Navy TextText8, 42, 74
- Plaid Medium Gray TextSecondary text91, 107, 122
- Plaid Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Plaid Success TealSuccess0, 183, 149
- Plaid Warning GoldWarning244, 180, 0
- Plaid Error RedError224, 30, 90
- Plaid Info BlueInfo38, 132, 255
Use Plaid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
plaid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2684FF;
--error: #E01E5A;
--accent: #F4B400;
--border: #D9E2EC;
--primary: #082A4A;
--success: #00B795;
--surface: #F6F8FA;
--warning: #F4B400;
--secondary: #00B795;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #082A4A;
--text-secondary: #5B6B7A;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
13.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2:1
Pass
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
Plaid background, border and text colors
The quiet part of the Plaid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Plaid WhiteBackground
- HEX
- RGB
- HSL
- Plaid Light GraySurface
- HEX
- RGB
- HSL
- Plaid Border GrayBorder
- HEX
- RGB
- HSL
- Plaid Navy TextText
- HEX
- RGB
- HSL
- Plaid Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Plaid Muted GrayMuted text
- HEX
- RGB
- HSL
About Plaid's colors
Plaid's palette centers on a deep navy for trust and security, with teal and gold accents for vibrancy and clarity. The supporting neutrals ensure accessibility and a modern, professional appearance.
Primary navy is paired with teal for highlights.
Gold accent is used for emphasis and alerts.
Neutral grays support content and UI clarity.
Psychology
The navy blue conveys reliability and professionalism, while teal adds a sense of innovation and approachability. Gold is used sparingly to draw attention to important actions or statuses.
Evolution
Plaid's color palette has remained consistent, with minor refinements to the navy and teal tones for better digital accessibility. The neutral grays have been updated to improve contrast and legibility across devices.
Where Plaid uses each color
- Primary
Plaid Navy is used for the logo, navigation bars, and primary buttons.
- Secondary
Plaid Teal highlights links, icons, and secondary actions.
- Accent
Plaid Gold is reserved for notifications, highlights, and warning states.
- Backgrounds
Plaid White and Light Gray are used for page and card backgrounds throughout the UI.
- Text
Plaid Navy and Medium Gray are used for primary and secondary text, respectively, with Muted Gray for placeholders or disabled states.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and feedback messages.
Plaid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Plaid brand color is Plaid Navy, with the hex code #082A4A.
Plaid Navy (#082A4A) is RGB(8, 42, 74). For print, its approximate CMYK values are 89, 43, 0, 71.
Plaid uses several neutrals: Plaid Light Gray (#F6F8FA), Plaid Border Gray (#D9E2EC), and Plaid Muted Gray (#A0AEC0) for backgrounds, borders, and muted text.
Use Plaid Navy (#082A4A) for primary actions and branding, with Plaid Teal (#00B795) for highlights and secondary actions. Reserve Plaid Gold (#F4B400) and semantic colors for alerts, notifications, and status indicators.
The secondary color is Plaid Teal, #00B795, and the accent is Plaid Gold, #F4B400. 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 Plaid's colors consistently when it generates UI.
Make something in the spirit of Plaid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.