MAC Cosmetics color palette
FashionMAC Cosmetics is known for its bold, minimal color identity, centered on a signature black and white palette with subtle gray accents. The brand's visual system emphasizes sophistication and timelessness, using deep blacks and clean whites throughout its packaging and digital presence.
maccosmetics.comMAC Cosmetics colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- MAC BlackPrimary0, 0, 0
- MAC WhiteSecondary255, 255, 255
- MAC Light GrayAccent229, 229, 229
Surfaces
Page, cards and dividers.- MAC Deep CharcoalBackground17, 17, 17
- MAC Surface GraySurface26, 26, 26
- MAC Border GrayBorder51, 51, 51
Text
Three tiers of copy.- MAC Text WhiteText255, 255, 255
- MAC Text GraySecondary text179, 179, 179
- MAC Muted GrayMuted text128, 128, 128
Semantic
Feedback and state colors.- MAC Success GreenSuccess76, 175, 80
- MAC Warning AmberWarning255, 193, 7
- MAC Error RedError244, 67, 54
- MAC Info BlueInfo33, 150, 243
Use MAC Cosmetics's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mac-cosmetics-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #F44336;
--accent: #E5E5E5;
--border: #333333;
--primary: #000000;
--success: #4CAF50;
--surface: #1A1A1A;
--warning: #FFC107;
--secondary: #FFFFFF;
--text-muted: #808080;
--background: #111111;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.3: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.4:1
Pass
MAC Cosmetics gray, dark and neutral colors
MAC Cosmetics runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- MAC Deep CharcoalBackground
- HEX
- RGB
- HSL
- MAC Surface GraySurface
- HEX
- RGB
- HSL
- MAC Border GrayBorder
- HEX
- RGB
- HSL
- MAC Text WhiteText
- HEX
- RGB
- HSL
- MAC Text GraySecondary text
- HEX
- RGB
- HSL
- MAC Muted GrayMuted text
- HEX
- RGB
- HSL
About MAC Cosmetics's colors
MAC Cosmetics employs a monochromatic palette dominated by black, white, and gray, reinforcing a modern and luxurious brand image. The minimal use of color allows product shades to stand out visually.
Primary black contrasts with white for clarity.
Gray tones unify backgrounds and surfaces.
Accent colors are reserved for functional UI states.
Psychology
Black conveys sophistication, authority, and timelessness, while white adds clarity and cleanliness. The restrained palette suggests professionalism and lets the makeup products themselves take visual priority.
Evolution
MAC's palette has remained largely unchanged since its inception, consistently focusing on black and white. Minor adjustments have been made to gray tones for digital accessibility and UI clarity.
Where MAC Cosmetics uses each color
- Primary
MAC Black is used for navigation bars, logos, and primary backgrounds.
- Secondary
MAC White is used for text, highlights, and product photography backgrounds.
- Accent
MAC Light Gray is applied to UI elements, dividers, and subtle backgrounds.
- Backgrounds
MAC Deep Charcoal is used for website backgrounds and product detail areas.
- Text
MAC Text White and MAC Text Gray are used for primary and secondary text respectively.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators in digital interfaces.
MAC Cosmetics color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official MAC Cosmetics brand color is MAC Black, with the hex code #000000.
MAC Black (#000000) in RGB is (0, 0, 0), and in CMYK it is (0, 0, 0, 100).
MAC uses several grays, including MAC Light Gray (#E5E5E5), MAC Surface Gray (#1A1A1A), and MAC Border Gray (#333333) for UI and backgrounds.
Use MAC Black (#000000) for backgrounds and branding, MAC White (#FFFFFF) for text and highlights, and gray tones for UI surfaces and dividers. Accent and semantic colors are reserved for notifications and functional states.
The secondary color is MAC White, #FFFFFF, and the accent is MAC Light Gray, #E5E5E5. 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 MAC Cosmetics's colors consistently when it generates UI.
Make something in the spirit of MAC Cosmetics
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.