Barbie color palette
ConsumerBarbie's color identity is defined by its iconic bright pink, which is instantly recognizable and central to the brand's visual language. The palette is playful, bold, and feminine, supporting Barbie's aspirational and imaginative world.
barbie.mattel.comBarbie colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Barbie PinkPrimary224, 33, 138
- Barbie WhiteSecondary255, 255, 255
- Barbie BlueAccent0, 174, 239
Surfaces
Page, cards and dividers.- Barbie Light PinkBackground247, 228, 248
- Barbie Pale GraySurface242, 242, 242
- Barbie Soft GrayBorder229, 229, 229
Text
Three tiers of copy.- Barbie CharcoalText34, 34, 34
- Barbie Medium GraySecondary text102, 102, 102
- Barbie Light GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Barbie GreenSuccess57, 181, 74
- Barbie YellowWarning255, 179, 0
- Barbie RedError229, 28, 35
- Barbie BlueInfo0, 174, 239
Use Barbie's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
barbie-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #E51C23;
--accent: #00AEEF;
--border: #E5E5E5;
--primary: #E0218A;
--success: #39B54A;
--surface: #F2F2F2;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #B3B3B3;
--background: #F7E4F8;
--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
13.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
1.7:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Barbie background, border and text colors
The quiet part of the Barbie palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Barbie Light PinkBackground
- HEX
- RGB
- HSL
- Barbie Pale GraySurface
- HEX
- RGB
- HSL
- Barbie Soft GrayBorder
- HEX
- RGB
- HSL
- Barbie CharcoalText
- HEX
- RGB
- HSL
- Barbie Medium GraySecondary text
- HEX
- RGB
- HSL
- Barbie Light GrayMuted text
- HEX
- RGB
- HSL
About Barbie's colors
Barbie's palette is anchored by its signature pink, complemented by bright accent colors and clean neutrals for clarity and contrast. The use of high-saturation colors conveys energy and fun, while neutrals balance the overall look.
Primary pink dominates, with blue as a contrasting accent.
White and grays provide neutral backgrounds for content.
Accent colors are used sparingly to highlight key actions or information.
Psychology
Barbie Pink evokes playfulness, creativity, and confidence, appealing to a youthful and imaginative audience. The palette's vibrancy reinforces the brand's positive and aspirational tone.
Evolution
Barbie's color palette has remained consistent, with the signature pink unchanged since the 1970s. Minor updates have introduced more modern neutrals and accent colors for digital applications.
Where Barbie uses each color
- Primary
Barbie Pink is used for logos, primary buttons, and major callouts across packaging and digital interfaces.
- Secondary
Barbie White is used for backgrounds, text, and to provide contrast with the primary pink.
- Accent
Barbie Blue appears in secondary buttons, links, and highlights within the website and promotional materials.
- Backgrounds
Barbie Light Pink and Pale Gray are used as background colors on web pages and app screens.
- Text
Barbie Charcoal and Medium Gray are used for primary and secondary text, ensuring readability against light backgrounds.
- Semantic
Barbie Green, Yellow, and Red are used for success, warning, and error states in UI components.
Barbie color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Barbie brand color is Barbie Pink, with the hex code #E0218A.
Barbie Pink (#E0218A) in RGB is (224, 33, 138) and in CMYK is (0, 85, 38, 12).
Barbie uses Barbie Pale Gray (#F2F2F2), Soft Gray (#E5E5E5), and Charcoal (#222222) as its primary neutral tones for backgrounds, borders, and text.
Use Barbie Pink (#E0218A) for primary branding elements, with white and neutrals for backgrounds and text, and accent colors like Barbie Blue (#00AEEF) for highlights or secondary actions.
The secondary color is Barbie White, #FFFFFF, and the accent is Barbie Blue, #00AEEF. 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 Barbie's colors consistently when it generates UI.
Make something in the spirit of Barbie
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.