Mango color palette
FashionMango's brand color identity is defined by a minimalist, monochrome palette centered on black and white, reflecting its modern and timeless fashion ethos. The use of neutral grays and subtle accents supports a clean, editorial look across all touchpoints.
shop.mango.comMango colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mango BlackPrimary0, 0, 0
- Mango WhiteSecondary255, 255, 255
- Mango Light GrayAccent229, 229, 229
Surfaces
Page, cards and dividers.- Mango Off WhiteBackground250, 250, 250
- Mango Pale GraySurface245, 245, 245
- Mango Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Mango BlackText0, 0, 0
- Mango Medium GraySecondary text102, 102, 102
- Mango Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Mango Success GreenSuccess46, 125, 50
- Mango Warning YellowWarning249, 168, 37
- Mango Error RedError198, 40, 40
- Mango Info BlueInfo25, 118, 210
Use Mango's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mango-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #C62828;
--accent: #E5E5E5;
--border: #D9D9D9;
--primary: #000000;
--success: #2E7D32;
--surface: #F5F5F5;
--warning: #F9A825;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #FAFAFA;
--text-primary: #000000;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
20.1:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Mango gray and neutral colors
The quiet part of the Mango palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mango Off WhiteBackground
- HEX
- RGB
- HSL
- Mango Pale GraySurface
- HEX
- RGB
- HSL
- Mango Border GrayBorder
- HEX
- RGB
- HSL
- Mango BlackText
- HEX
- RGB
- HSL
- Mango Medium GraySecondary text
- HEX
- RGB
- HSL
- Mango Muted GrayMuted text
- HEX
- RGB
- HSL
About Mango's colors
Mango's palette uses a high-contrast black and white base, accented by subtle grays for depth and clarity. This supports a minimalist, editorial aesthetic that foregrounds product imagery.
Primary black contrasts with white for maximum legibility.
Grays provide hierarchy and separation in UI elements.
Accent colors are reserved for functional feedback (success, error, info).
Psychology
The monochrome palette conveys sophistication, timelessness, and clarity, aligning with Mango's modern fashion positioning. Subtle accent colors reinforce trust and usability without distracting from the core brand experience.
Evolution
Mango's color palette has remained stable, consistently using black and white as its foundation. Minor adjustments to gray tones have been made to improve digital accessibility and visual hierarchy.
Where Mango uses each color
- Primary
Mango Black is used for the logo, main navigation text, and primary calls to action.
- Secondary
Mango White serves as the background for most pages and product photography.
- Accent
Mango Light Gray is used for UI backgrounds, dividers, and subtle highlights.
- Backgrounds
Mango Off White and Pale Gray appear as page backgrounds and card surfaces.
- Text
Black and Medium Gray are used for primary and secondary text, while Muted Gray is used for placeholders and disabled states.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for system messages, alerts, and feedback states.
Mango color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mango brand color is black, with the hex code #000000.
Mango Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Mango uses several neutral tones including Light Gray (#E5E5E5), Pale Gray (#F5F5F5), Medium Gray (#666666), and Muted Gray (#A3A3A3) for backgrounds, borders, and text.
Use Mango Black and White for primary branding and navigation, with grays for UI structure and accent colors only for semantic feedback. Always maintain high contrast for readability and a clean, minimalist look.
The secondary color is Mango White, #FFFFFF, and the accent is Mango Light Gray, #E5E5E5. 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 Mango's colors consistently when it generates UI.
Make something in the spirit of Mango
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.