Mastercard color palette
FinanceMastercard's color identity is defined by its iconic red and yellow overlapping circles, with a supporting palette of black, white, and neutral grays for digital and print applications. The palette is consistent and instantly recognizable in global financial contexts.
mastercard.comMastercard colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mastercard RedPrimary235, 0, 27
- Mastercard YellowSecondary247, 158, 27
- Mastercard OrangeAccent255, 95, 0
Surfaces
Page, cards and dividers.- Mastercard WhiteBackground255, 255, 255
- Mastercard Light GraySurface245, 245, 245
- Mastercard Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Mastercard BlackText26, 26, 26
- Mastercard Secondary GraySecondary text110, 110, 110
- Mastercard Muted GrayMuted text162, 162, 161
Semantic
Feedback and state colors.- Mastercard GreenSuccess0, 154, 68
- Mastercard Warning YellowWarning255, 188, 66
- Mastercard Error RedError213, 0, 50
- Mastercard BlueInfo0, 80, 160
Use Mastercard's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mastercard-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0050A0;
--error: #D50032;
--accent: #FF5F00;
--border: #D1D3D4;
--primary: #EB001B;
--success: #009A44;
--surface: #F5F5F5;
--warning: #FFBC42;
--secondary: #F79E1B;
--text-muted: #A2A2A1;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6E6E6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Mastercard gray and neutral colors
The quiet part of the Mastercard palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mastercard WhiteBackground
- HEX
- RGB
- HSL
- Mastercard Light GraySurface
- HEX
- RGB
- HSL
- Mastercard Border GrayBorder
- HEX
- RGB
- HSL
- Mastercard BlackText
- HEX
- RGB
- HSL
- Mastercard Secondary GraySecondary text
- HEX
- RGB
- HSL
- Mastercard Muted GrayMuted text
- HEX
- RGB
- HSL
About Mastercard's colors
Mastercard's palette leverages high-contrast, warm hues for brand recognition, balanced by neutral tones for clarity and accessibility. The red and yellow circles symbolize connectivity and optimism.
Red and yellow are complementary and create visual energy.
Neutrals provide balance and legibility in digital interfaces.
Accent orange bridges the primary colors for dynamic highlights.
Psychology
Red conveys energy, confidence, and action, while yellow communicates optimism and warmth. The combination is designed to evoke trust and approachability in financial transactions.
Evolution
Mastercard's core red and yellow have remained stable for decades, with minor refinements for digital clarity. The supporting neutral palette was expanded in recent years to improve accessibility and modern UI compatibility.
Where Mastercard uses each color
- Primary
Mastercard Red is used in the left circle of the logo and for key call-to-action buttons.
- Secondary
Mastercard Yellow appears in the right circle of the logo and as highlight elements.
- Accent
Mastercard Orange is used in the overlapping area of the logo and for select UI highlights.
- Backgrounds
Mastercard White and Light Gray are used for website and app backgrounds.
- Text
Mastercard Black and Secondary Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Green, Yellow, and Error Red are used for status indicators such as success, warnings, and errors in digital products.
Mastercard color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Mastercard primary color hex code is #EB001B. This is known as Mastercard Red.
Mastercard Red (#EB001B) is RGB(235, 0, 27) and CMYK(0, 100, 88, 0). These values are specified in the official brand guidelines.
Mastercard uses several neutrals including Mastercard Light Gray (#F5F5F5), Border Gray (#D1D3D4), Secondary Gray (#6E6E6E), and Muted Gray (#A2A2A1). These provide contrast and accessibility in digital interfaces.
Use Mastercard Red (#EB001B) and Yellow (#F79E1B) for brand marks and key actions, with neutrals for backgrounds and text. Accent and semantic colors are reserved for highlights and status messaging.
The secondary color is Mastercard Yellow, #F79E1B, and the accent is Mastercard Orange, #FF5F00. 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 Mastercard's colors consistently when it generates UI.
Make something in the spirit of Mastercard
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.