Mastercard colors
The Mastercard color palette has 5 colors: Mastercard red #EB001B, Mastercard yellow #F79E1B, Overlap orange #FF5F00, Text near-black #141413 and Warm background #F3F0EE. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.
Mastercard color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Mastercard red | Primary | #EB001B | rgb(235, 0, 27) | hsl(353, 100%, 46%) | oklch(59.1% 0.241 26.9) |
| Mastercard yellow | Secondary | #F79E1B | rgb(247, 158, 27) | hsl(36, 93%, 54%) | oklch(77.1% 0.163 68.4) |
| Overlap orange | Accent | #FF5F00 | rgb(255, 95, 0) | hsl(22, 100%, 50%) | oklch(68.7% 0.21 41.4) |
| Text near-black | Text | #141413 | rgb(20, 20, 19) | hsl(60, 3%, 8%) | oklch(19.1% 0.002 106.6) |
| Warm background | Background | #F3F0EE | rgb(243, 240, 238) | hsl(24, 17%, 94%) | oklch(95.7% 0.004 56.4) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Mastercard colors come from
Mastercard does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.mastercard.com actually renders, which can differ slightly from print or logo colors.
- Source (live website CSS or SVG): https://www.mastercard.com/content/dam/mccom/shared/header/ma_symbol.svg checked 2026-10-16
- Also: https://www.mastercard.com/ checked 2026-10-16
Mastercard color contrast
White text on Mastercard red has a contrast ratio of 4.61:1 and passes WCAG AA for body text. Used as a text color, Mastercard red reaches 4.61:1 on white and 4.54:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Mastercard red | 4.61:1 | AA | Lc -74.6 | Content text, not long reading |
| Black on Mastercard red | 4.54:1 | AA | Lc 35.0 | Non-text elements, placeholder text |
| White on Mastercard yellow | 2.12:1 | Fails | Lc -46.0 | Large or bold text, headings |
| Black on Mastercard yellow | 9.86:1 | AAA | Lc 62.6 | Content text, not long reading |
| White on Overlap orange | 3.04:1 | AA large text | Lc -61.5 | Content text, not long reading |
| Black on Overlap orange | 6.88:1 | AA | Lc 47.9 | Large or bold text, headings |
| White on Text near-black | 18.43:1 | AAA | Lc -107.2 | Preferred for body text |
| Black on Text near-black | 1.13:1 | Fails | Lc 0.0 | Not readable |
| White on Warm background | 1.13:1 | Fails | Lc 0.0 | Not readable |
| Black on Warm background | 18.50:1 | AAA | Lc 97.4 | Preferred for body text |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Text near-black on Warm background | 16.24:1 | AAA | Lc 96.4 | Preferred for body text |
| Text near-black on Mastercard yellow | 8.65:1 | AAA | Lc 61.6 | Content text, not long reading |
| Text near-black on Overlap orange | 6.04:1 | AA | Lc 46.9 | Large or bold text, headings |
| Mastercard red on Warm background | 4.06:1 | AA large text | Lc 60.4 | Content text, not long reading |
Mastercard colors in CSS and Tailwind
Copy the Mastercard palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Mastercard red, for hover states, borders and tinted backgrounds.
:root {
--mastercard-red: #EB001B;
--mastercard-yellow: #F79E1B;
--mastercard-overlap-orange: #FF5F00;
--mastercard-text-near-black: #141413;
--mastercard-warm-background: #F3F0EE;
}@import "tailwindcss";
@theme {
--color-mastercard-red: #EB001B;
--color-mastercard-yellow: #F79E1B;
--color-mastercard-overlap-orange: #FF5F00;
--color-mastercard-text-near-black: #141413;
--color-mastercard-warm-background: #F3F0EE;
}@theme {
--color-mastercard-50: #FFF2F0;
--color-mastercard-100: #FEE2DF;
--color-mastercard-200: #FFCBC4;
--color-mastercard-300: #FFA59B;
--color-mastercard-400: #FA6E63;
--color-mastercard-500: #F23836;
--color-mastercard-600: #EB001B;
--color-mastercard-700: #B70012;
--color-mastercard-800: #98000D;
--color-mastercard-900: #7D0C0F;
--color-mastercard-950: #4A0C0B;
}Named colors closest to the Mastercard palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Mastercard red | #EB001B | Cherry Red | #F7022A | 0.027 |
| Mastercard yellow | #F79E1B | Gamboge | #EE9B00 | 0.019 |
| Overlap orange | #FF5F00 | Bright Orange | #FF5B00 | 0.007 |
| Text near-black | #141413 | Rich Navy | #001219 | 0.039 |
| Warm background | #F3F0EE | Anti-Flash White | #EDF2F4 | 0.010 |
How to use a Mastercard-style palette
- Lead with Mastercard red #EB001B for buttons, links and key highlights, with white text on it.
- Give most of the layout to Text near-black #141413 and Warm background #F3F0EE, about 60% of the screen, so Mastercard red stands out.
- Keep Mastercard yellow and Overlap orange for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Mastercard red reaches 4.61:1: it passes WCAG AA for body text.
To see how www.mastercard.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Mastercard red into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Stripe colors#533AFD #635BFF #061B31 #64748D
- PayPal colors#003087 #0070E0 #001C64 #012169
- Visa colors#1434CB #0D2181 #0E1539 #020F27
- Tiffany colors#81D8D0 #000000 #00A4B7
- Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
- John Deere colors#367C2B #FFDE00 #185F11 #1B1C1B
- Barbie colors#FF3EB5 #FFD8EF
- YouTube colors#FF0033 #212121 #FFFFFF
- Ferrari colors#DA291C #FFF200 #000000 #FFFFFF
- Google colors#4285F4 #EA4335 #FBBC05 #34A853
- Uber colors#000000 #FFFFFF #111111 #F6F6F6
- Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
Trademarks
Frequently asked questions
What is the Mastercard hex color?
The main Mastercard color is Mastercard red #EB001B, which is rgb(235, 0, 27) in RGB. It comes from the CSS and SVG files of Mastercard's live website (Mastercard publishes no official hex values), checked on 16 October 2026.
What colors does Mastercard use?
Mastercard uses 5 core colors: Mastercard red #EB001B, Mastercard yellow #F79E1B, Overlap orange #FF5F00, Text near-black #141413 and Warm background #F3F0EE.
What is Mastercard red in RGB, HSL and OKLCH?
Mastercard red #EB001B is rgb(235, 0, 27), hsl(353, 100%, 46%) and oklch(59.1% 0.241 26.9). The closest named color is Cherry Red #F7022A.
Should text on Mastercard red be white or black?
White text reads better on Mastercard red: it has a contrast ratio of 4.61:1, which passes WCAG AA for body text.
Where do these Mastercard colors come from?
The hex values were read from Mastercard's live website code at https://www.mastercard.com/content/dam/mccom/shared/header/ma_symbol.svg on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Mastercard colors in my own design?
Colors on their own are not owned, but Mastercard's name, logo and the way it combines its colors are trademarks. Use these values to match Mastercard when you refer to it, follow its official guidelines, and do not imply a link to Mastercard in your own brand.
Use the Mastercard colors
Check www.mastercard.com live, build a color system from Mastercard red, or remix the palette.