Mattel color palette
ConsumerMattel's brand identity centers on a bold, energetic red paired with clean white and neutral grays, reflecting its playful and iconic presence in the toy industry. The palette is simple, direct, and highly recognizable across packaging and digital touchpoints.
mattel.comMattel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mattel RedPrimary226, 35, 26
- Mattel WhiteSecondary255, 255, 255
- Mattel BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Mattel Light GrayBackground247, 247, 247
- Mattel White SurfaceSurface255, 255, 255
- Mattel Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Mattel CharcoalText34, 34, 34
- Mattel Medium GraySecondary text102, 102, 102
- Mattel Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Mattel Success GreenSuccess67, 176, 42
- Mattel Warning YellowWarning255, 184, 28
- Mattel Error RedError226, 35, 26
- Mattel Info BlueInfo0, 114, 206
Use Mattel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mattel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E2231A;
--accent: #000000;
--border: #D9D9D9;
--primary: #E2231A;
--success: #43B02A;
--surface: #FFFFFF;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #222222;
--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
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Mattel gray and neutral colors
The quiet part of the Mattel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mattel Light GrayBackground
- HEX
- RGB
- HSL
- Mattel White SurfaceSurface
- HEX
- RGB
- HSL
- Mattel Border GrayBorder
- HEX
- RGB
- HSL
- Mattel CharcoalText
- HEX
- RGB
- HSL
- Mattel Medium GraySecondary text
- HEX
- RGB
- HSL
- Mattel Muted GrayMuted text
- HEX
- RGB
- HSL
About Mattel's colors
Mattel's color palette is built around a vivid red, symbolizing excitement and energy, balanced by white and neutral grays for clarity and legibility. The supporting colors provide functional cues for digital interfaces.
Primary red is contrasted with white for maximum visibility.
Neutral grays support content hierarchy and accessibility.
Accent black is used sparingly for emphasis and text.
Psychology
Red evokes passion, playfulness, and attention—qualities central to Mattel's brand. The use of white and gray conveys trust, simplicity, and approachability.
Evolution
Mattel's palette has remained consistent for decades, with red as its signature color. Minor adjustments to gray tones have been made for digital clarity, but the core identity is stable.
Where Mattel uses each color
- Primary
Mattel Red is used in the logo, primary buttons, and key calls-to-action across digital and packaging.
- Secondary
Mattel White appears as the main background and in logo lockups.
- Accent
Mattel Black is used for text, icons, and select UI elements.
- Backgrounds
Mattel Light Gray is used for page backgrounds and section dividers.
- Text
Mattel Charcoal and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Mattel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mattel red is #E2231A. This color is used in the logo and as the primary brand identifier.
Mattel Red (#E2231A) is RGB(226, 35, 26) and CMYK(0, 85, 88, 11). These values are specified in the brand guidelines.
Mattel uses several grays: Mattel Light Gray (#F7F7F7), Border Gray (#D9D9D9), Medium Gray (#666666), and Muted Gray (#999999). These are used for backgrounds, borders, and secondary text.
Mattel Red (#E2231A) should be reserved for key branding and actions, while grays and white provide structure and readability. Accent and semantic colors are used for functional UI elements and alerts.
The secondary color is Mattel White, #FFFFFF, and the accent is Mattel Black, #000000. 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 Mattel's colors consistently when it generates UI.
Make something in the spirit of Mattel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.