M&M's color palette
Food & DrinkM&M's brand color system is centered around its iconic yellow, brown, and vibrant candy colors, reflecting its playful and recognizable identity. The palette is rooted in the signature 'M&M's Yellow' and 'M&M's Brown', used consistently across packaging and digital assets.
mms.comM&M's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- M&M's YellowPrimary255, 210, 0
- M&M's BrownSecondary108, 67, 37
- M&M's RedAccent228, 26, 28
Surfaces
Page, cards and dividers.- M&M's CreamBackground255, 248, 225
- M&M's WhiteSurface255, 255, 255
- M&M's Gold BorderBorder214, 183, 0
Text
Three tiers of copy.- M&M's Text BrownText58, 37, 18
- M&M's BrownSecondary text108, 67, 37
- M&M's TanMuted text166, 139, 106
Semantic
Feedback and state colors.- M&M's GreenSuccess67, 176, 71
- M&M's YellowWarning255, 210, 0
- M&M's RedError228, 26, 28
- M&M's BlueInfo0, 159, 218
Use M&M's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mandms-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #E41A1C;
--accent: #E41A1C;
--border: #D6B700;
--primary: #FFD200;
--success: #43B047;
--surface: #FFFFFF;
--warning: #FFD200;
--secondary: #6C4325;
--text-muted: #A68B6A;
--background: #FFF8E1;
--text-primary: #3A2512;
--text-secondary: #6C4325;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.6:1
Pass
Text on surface
Needs 4.5:1 for body text
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
M&M's background, border and text colors
The quiet part of the M&M's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- M&M's CreamBackground
- HEX
- RGB
- HSL
- M&M's WhiteSurface
- HEX
- RGB
- HSL
- M&M's Gold BorderBorder
- HEX
- RGB
- HSL
- M&M's Text BrownText
- HEX
- RGB
- HSL
- M&M's BrownSecondary text
- HEX
- RGB
- HSL
- M&M's TanMuted text
- HEX
- RGB
- HSL
About M&M's's colors
M&M's color palette is built around bright, playful hues that mirror the candy shell colors and the iconic yellow and brown brand identity. The colors are bold, high-contrast, and instantly recognizable.
Primary yellow and brown are used for brand recognition.
Accent colors reflect actual candy colors.
Neutral tones balance the vibrant palette in digital and print.
Psychology
Yellow evokes happiness and fun, reinforcing the playful nature of the brand. Brown conveys reliability and is associated with chocolate, the core product.
Evolution
The core yellow and brown colors have remained stable for decades, ensuring strong brand recognition. Accent colors have expanded to reflect the full spectrum of M&M's candy varieties.
Where M&M's uses each color
- Primary
M&M's Yellow is used for packaging backgrounds, navigation bars, and key brand elements.
- Secondary
M&M's Brown appears in logos, text, and as a background for product information.
- Accent
M&M's Red is used for call-to-action buttons and highlights.
- Backgrounds
M&M's Cream and White are used for website backgrounds and product display areas.
- Text
Text primarily uses M&M's Text Brown for readability against light backgrounds.
- Semantic
Green, yellow, red, and blue are used for status indicators, aligning with the candy colors.
M&M's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official M&M's primary brand color is yellow, with the hex code #FFD200.
M&M's Yellow is #FFD200, which is RGB(255, 210, 0). In CMYK, it is approximately 0, 8, 100, 0.
M&M's uses 'M&M's Brown' (#6C4325) and 'M&M's Text Brown' (#3A2512) as its primary dark and neutral tones for text and backgrounds.
Use M&M's Yellow (#FFD200) for primary branding, Brown (#6C4325) for secondary elements and text, and accent colors like Red (#E41A1C) and Blue (#009FDA) for highlights and calls to action.
The secondary color is M&M's Brown, #6C4325, and the accent is M&M's Red, #E41A1C. 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 M&M's's colors consistently when it generates UI.
Make something in the spirit of M&M's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.