Visa color palette
FinanceVisa's color identity is anchored by a deep blue, complemented by gold and neutral grays for clarity and trust. The palette is designed for high legibility and global recognition across digital and physical touchpoints.
visa.comVisa colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Visa BluePrimary26, 31, 113
- Visa GoldSecondary255, 182, 0
- Visa WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Visa Light GrayBackground245, 247, 250
- Visa Surface GraySurface230, 231, 232
- Visa Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Visa Blue TextText26, 31, 113
- Visa Dark Gray TextSecondary text74, 74, 74
- Visa Muted GrayMuted text110, 110, 110
Semantic
Feedback and state colors.- Visa GreenSuccess67, 176, 42
- Visa Gold WarningWarning255, 182, 0
- Visa RedError228, 31, 38
- Visa Info BlueInfo0, 116, 193
Use Visa's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
visa-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0074C1;
--error: #E41F26;
--accent: #FFFFFF;
--border: #D1D5DB;
--primary: #1A1F71;
--success: #43B02A;
--surface: #E6E7E8;
--warning: #FFB600;
--secondary: #FFB600;
--text-muted: #6E6E6E;
--background: #F5F7FA;
--text-primary: #1A1F71;
--text-secondary: #4A4A4A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.2:1
Pass
Text on surface
Needs 4.5:1 for body text
11.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.2:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.1:1
Pass
Visa background, border and text colors
The quiet part of the Visa palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Visa Light GrayBackground
- HEX
- RGB
- HSL
- Visa Surface GraySurface
- HEX
- RGB
- HSL
- Visa Border GrayBorder
- HEX
- RGB
- HSL
- Visa Blue TextText
- HEX
- RGB
- HSL
- Visa Dark Gray TextSecondary text
- HEX
- RGB
- HSL
- Visa Muted GrayMuted text
- HEX
- RGB
- HSL
About Visa's colors
Visa's palette is built around blue and gold, symbolizing trust and value. Neutral grays support clarity and accessibility in digital contexts.
Primary blue pairs with gold for high contrast.
White and light gray backgrounds enhance readability.
Accent and semantic colors are used for UI feedback.
Psychology
Blue conveys security, reliability, and professionalism, which are essential in finance. Gold adds a sense of prestige and quality to the brand's perception.
Evolution
Visa's core blue and gold colors have remained consistent for decades, reinforcing brand recognition. The supporting neutral palette has expanded for digital accessibility and modern UI needs.
Where Visa uses each color
- Primary
Visa Blue is used for logos, navigation bars, and primary CTAs.
- Secondary
Visa Gold appears in highlights, icons, and promotional graphics.
- Accent
Visa White is used for backgrounds, card designs, and negative space.
- Backgrounds
Visa Light Gray provides the main background for web and app interfaces.
- Text
Visa Blue and Visa Dark Gray are used for primary and secondary text, ensuring legibility.
- Semantic
Visa Green, Gold, Red, and Info Blue are used for success, warning, error, and informational UI states.
Visa color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Visa primary color hex code is #1A1F71. This deep blue is used across all major brand touchpoints.
Visa Blue (#1A1F71) is RGB(26, 31, 113) and CMYK(77, 73, 0, 56). Use these values for accurate color reproduction in print and digital media.
Visa uses a range of grays including Visa Light Gray (#F5F7FA), Surface Gray (#E6E7E8), and Border Gray (#D1D5DB) for backgrounds, surfaces, and borders. These ensure a clean, accessible interface.
Use Visa Blue (#1A1F71) for primary actions and branding, with Visa Gold (#FFB600) for highlights. Grays and whites provide structure and clarity in layouts.
The secondary color is Visa Gold, #FFB600, and the accent is Visa White, #FFFFFF. 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 Visa's colors consistently when it generates UI.
Make something in the spirit of Visa
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.