Capital One color palette
FinanceCapital One's color identity is defined by its signature deep blue and a vibrant red accent, reflecting trust and energy. The palette is complemented by neutral grays and white for clarity and accessibility.
capitalone.comCapital One colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Capital One BluePrimary0, 73, 119
- Capital One RedSecondary208, 48, 39
- Capital One Light BlueAccent0, 114, 206
Surfaces
Page, cards and dividers.- Capital One WhiteBackground255, 255, 255
- Capital One Light GraySurface245, 246, 247
- Capital One Border GrayBorder217, 217, 214
Text
Three tiers of copy.- Capital One BlackText33, 33, 33
- Capital One Dark GraySecondary text75, 75, 75
- Capital One Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Capital One GreenSuccess46, 133, 64
- Capital One YellowWarning246, 190, 0
- Capital One RedError208, 48, 39
- Capital One Light BlueInfo0, 114, 206
Use Capital One's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
capital-one-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D03027;
--accent: #0072CE;
--border: #D9D9D6;
--primary: #004977;
--success: #2E8540;
--surface: #F5F6F7;
--warning: #F6BE00;
--secondary: #D03027;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #4B4B4B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Capital One gray and neutral colors
The quiet part of the Capital One palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Capital One WhiteBackground
- HEX
- RGB
- HSL
- Capital One Light GraySurface
- HEX
- RGB
- HSL
- Capital One Border GrayBorder
- HEX
- RGB
- HSL
- Capital One BlackText
- HEX
- RGB
- HSL
- Capital One Dark GraySecondary text
- HEX
- RGB
- HSL
- Capital One Muted GrayMuted text
- HEX
- RGB
- HSL
About Capital One's colors
Capital One's palette is built on a foundation of deep blue and vibrant red, with supporting neutrals for clarity. The colors are chosen for accessibility, trust, and energy.
Primary blue and red are complementary and create strong contrast.
Neutrals provide balance and readability.
Accent blue and green add hierarchy and semantic meaning.
Psychology
The deep blue conveys trust, reliability, and professionalism, while the red accent signals energy and action. Neutrals support a clean, modern interface.
Evolution
Capital One's palette has remained stable, with minor adjustments to blue and red tones for digital clarity. The neutral grays have been refined for improved accessibility and contrast.
Where Capital One uses each color
- Primary
Used in the logo, navigation bars, and primary action buttons.
- Secondary
Appears in the logo swoosh, highlights, and call-to-action elements.
- Accent
Used for links, icons, and informational highlights.
- Backgrounds
White and light gray backgrounds are used throughout app screens and web pages.
- Text
Primary and secondary text colors are used for headings, body copy, and muted UI elements.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Capital One color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Capital One brand blue is #004977. This is used as the primary color in most applications.
Capital One Blue (#004977) is RGB(0, 73, 119) and CMYK(100, 39, 0, 53). These values are used for digital and print consistency.
Capital One uses several grays, including #F5F6F7 for light backgrounds and #4B4B4B for secondary text. These ensure readability and a modern interface.
Use Capital One Blue (#004977) for primary actions and branding, with red (#D03027) for accents and calls to action. Neutrals and semantic colors provide structure and feedback in UI elements.
The secondary color is Capital One Red, #D03027, and the accent is Capital One Light Blue, #0072CE. 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 Capital One's colors consistently when it generates UI.
Make something in the spirit of Capital One
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.