E-commerce & Payments
Mastercard Color Codes
Mastercard's mark is two overlapping circles, one red at hex #EB001B and one yellow at #F79E1B, meeting in an orange band. The Mastercard color codes in Hex, RGB and CMYK can be found below. The company started in 1966 as a bank alliance called the Interbank Card Association, set up to compete with BankAmericard. Its rival across the card networks is Visa.
Primary colors
What are Mastercard Primary Colors?
Mastercard's primary colors are red #EB001B, yellow #F79E1B, overlap orange #FF5F00.
Mastercard publishes these values in its brand center; the CMYK shown is a conversion.
Mastercard Red
| Hex | #EB001B |
|---|---|
| RGB | 235, 0, 27 |
| HSL | hsl(353, 100%, 46%) |
| CMYK | 0%, 100%, 89%, 8%converted · approximate |
| Pantone | PMS 1788 Cnearest match · not published by the brand |
Mastercard Yellow
| Hex | #F79E1B |
|---|---|
| RGB | 247, 158, 27 |
| HSL | hsl(36, 93%, 54%) |
| CMYK | 0%, 36%, 89%, 3%converted · approximate |
| Pantone | PMS 1375 Cnearest match · not published by the brand |
Mastercard Overlap Orange
| Hex | #FF5F00 |
|---|---|
| RGB | 255, 95, 0 |
| HSL | hsl(22, 100%, 50%) |
| CMYK | 0%, 63%, 100%, 0%converted · approximate |
| Pantone | PMS 1655 Cnearest match · not published by the brand |
Mastercard Hex Color Codes
Mastercard hex color codes are #EB001B for red, #F79E1B for yellow and #FF5F00 for overlap orange.
| Color | Hex |
|---|---|
| Red | #EB001B |
| Yellow | #F79E1B |
| Overlap Orange | #FF5F00 |
Mastercard RGB Color Codes
Mastercard RGB color codes are 235, 0, 27 for red, 247, 158, 27 for yellow and 255, 95, 0 for overlap orange. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Red | rgb(235, 0, 27) |
| Yellow | rgb(247, 158, 27) |
| Overlap Orange | rgb(255, 95, 0) |
Mastercard HSL Color Codes
Mastercard HSL color codes are 353, 100%, 46% for red, 36, 93%, 54% for yellow and 22, 100%, 50% for overlap orange. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Red | hsl(353, 100%, 46%) |
| Yellow | hsl(36, 93%, 54%) |
| Overlap Orange | hsl(22, 100%, 50%) |
Mastercard CMYK Color Code
Mastercard CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Red | 0%, 100%, 89%, 8% |
| Yellow | 0%, 36%, 89%, 3% |
| Overlap Orange | 0%, 63%, 100%, 0% |
Mastercard Pantone Color Codes
Mastercard Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Red | PMS 1788 C |
| Yellow | PMS 1375 C |
| Overlap Orange | PMS 1655 C |
Logo
Mastercard Logo Colors
Mastercard logo colors are red and yellow, with the overlap reading as orange.
Mastercard Logo Colors Palette
What the Mastercard Logo Colors Mean?
The Mastercard logo colors were borrowed, then kept. The red-and-yellow pairing came from a Japanese member bank's own identity and was adopted across the network in 1968. Red is meant to read as energy and confidence, yellow as warmth and reach, and the orange where the circles cross stands for the meeting of shopper and merchant.
Mastercard Logo Color History
Mastercard logo color history holds the two colors steady for more than fifty years. The 2016 redesign by Pentagram pulled out the interlocking horizontal lines and made the overlap a clean transparent orange. In 2019 the name was dropped from most uses, leaving the circles to carry the brand alone.
Mastercard Logo Fonts
Mastercard logo fonts changed with the 2016 work to FF Mark, a geometric sans, used lowercase. Before that the name sat in a heavier custom face inside the circles.
Mastercard Logo JPG
Mastercard logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Mastercard Logo PNG
Mastercard logo in PNG, with a transparent background. Use it over a colored surface.
Mastercard Logo WebP
Mastercard logo in WebP. Same transparency as the PNG at about a third of the file size.
Mastercard Color Code Shades
Mastercard color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Mastercard paint or trim names.
In code
Using the Mastercard palette
CSS custom properties
:root {
--mastercard-red: #EB001B;
--mastercard-yellow: #F79E1B;
--mastercard-overlap-orange: #FF5F00;
}Contrast against white
| Red | 4.62:1AA ✓ |
|---|---|
| Yellow | 2.13:1AA × |
| Overlap Orange | 3.05:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.