Vanguard color palette
FinanceVanguard's color identity is anchored by a distinctive deep red, complemented by neutral grays and white for clarity and trust. The palette is consistent across digital and print, supporting the brand's reputation for stability and reliability.
vanguard.comVanguard colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vanguard RedPrimary166, 25, 46
- Vanguard CharcoalSecondary35, 31, 32
- Vanguard Light GrayAccent230, 231, 232
Surfaces
Page, cards and dividers.- Vanguard WhiteBackground255, 255, 255
- Vanguard Off-WhiteSurface245, 245, 245
- Vanguard Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Vanguard CharcoalText35, 31, 32
- Vanguard Medium GraySecondary text109, 110, 113
- Vanguard Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Vanguard GreenSuccess75, 143, 41
- Vanguard YellowWarning246, 190, 0
- Vanguard Error RedError200, 16, 46
- Vanguard BlueInfo0, 114, 206
Use Vanguard's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vanguard-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #C8102E;
--accent: #E6E7E8;
--border: #D1D3D4;
--primary: #A6192E;
--success: #4B8F29;
--surface: #F5F5F5;
--warning: #F6BE00;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Vanguard gray and neutral colors
The quiet part of the Vanguard palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Vanguard WhiteBackground
- HEX
- RGB
- HSL
- Vanguard Off-WhiteSurface
- HEX
- RGB
- HSL
- Vanguard Border GrayBorder
- HEX
- RGB
- HSL
- Vanguard CharcoalText
- HEX
- RGB
- HSL
- Vanguard Medium GraySecondary text
- HEX
- RGB
- HSL
- Vanguard Muted GrayMuted text
- HEX
- RGB
- HSL
About Vanguard's colors
Vanguard's palette uses a bold red for brand recognition and neutral grays for clarity and accessibility. The color system is designed for high contrast and legibility in financial contexts.
Primary red is paired with neutral backgrounds for emphasis.
Accent grays support UI elements and hierarchy.
Blue and green are reserved for semantic feedback.
Psychology
Red communicates strength, confidence, and trust—key values in finance. Neutrals reinforce seriousness and professionalism.
Evolution
Vanguard's palette has remained stable, with the deep red as its core since inception. Minor adjustments to gray tones have improved digital accessibility.
Where Vanguard uses each color
- Primary
Used in the logo, primary navigation, and key calls to action.
- Secondary
Appears in headers, footers, and supporting UI elements.
- Accent
Used for backgrounds, cards, and subtle highlights.
- Backgrounds
White and off-white are used for main page backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, blue, and error red are used for status indicators and alerts.
Vanguard color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Vanguard brand color is Vanguard Red, hex code #A6192E. This is used prominently in the logo and primary navigation.
Vanguard Red (#A6192E) is RGB(166, 25, 46) and CMYK(0, 100, 79, 26). Use these values for accurate reproduction in digital and print.
Vanguard uses Vanguard Charcoal (#231F20), Medium Gray (#6D6E71), Muted Gray (#A7A8AA), and Light Gray (#E6E7E8) for UI and text. These neutrals provide contrast and support accessibility.
Use Vanguard Red (#A6192E) for primary actions and branding, with grays and whites for backgrounds and text. Semantic colors like green, yellow, and blue are reserved for feedback and alerts.
The secondary color is Vanguard Charcoal, #231F20, and the accent is Vanguard Light Gray, #E6E7E8. 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 Vanguard's colors consistently when it generates UI.
Make something in the spirit of Vanguard
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.