Barbie colors

Barbie color codes

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the Barbie colors come from

Barbie does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors shop.mattel.com actually renders, which can differ slightly from print or logo colors.

• Source (live website CSS or SVG): https://shop.mattel.com/cdn/shop/t/327/assets/style.css?v=7689744659049133931790716376 checked 2026-10-16

Barbie color contrast

Black text on Barbie pink has a contrast ratio of 6.60:1 and passes WCAG AA for body text. Used as a text color, Barbie pink reaches 3.17:1 on white and 6.60:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

Barbie colors in CSS and Tailwind

Copy the Barbie palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Barbie pink, for hover states, borders and tinted backgrounds.

:root {
  --barbie-pink: #FF3EB5;
  --barbie-light-pink: #FFD8EF;
}

@import "tailwindcss";

@theme {
  --color-barbie-pink: #FF3EB5;
  --color-barbie-light-pink: #FFD8EF;
}

@theme {
  --color-barbie-50: #FFF1F7;
  --color-barbie-100: #FFE0EE;
  --color-barbie-200: #FFC6E2;
  --color-barbie-300: #FF9CD0;
  --color-barbie-400: #FF3EB5;
  --color-barbie-500: #EF00A5;
  --color-barbie-600: #CA008B;
  --color-barbie-700: #AB0075;
  --color-barbie-800: #8D0060;
  --color-barbie-900: #770050;
  --color-barbie-950: #4A0030;
}

Named colors closest to the Barbie palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

How to use a Barbie-style palette

• Lead with Barbie pink #FF3EB5 for buttons, links and key highlights, with black text on it.
• Give most of the layout to Light pink #FFD8EF, about 60% of the screen, so Barbie pink stands out.
• With a single brand color, use tints and shades of Barbie pink (the Tailwind scale above) instead of extra hues.
• As text on a white page, Barbie pink reaches 3.17:1: it passes WCAG AA only for large or bold text (18pt, or 14pt bold).

To see how shop.mattel.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Barbie pink into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

• Tiffany colors#81D8D0 #000000 #00A4B7
• John Deere colors#367C2B #FFDE00 #185F11 #1B1C1B
• Ferrari colors#DA291C #FFF200 #000000 #FFFFFF
• Nike colors#111111 #FFFFFF #FF5000 #1F1F21
• Airbnb colors#FF385C #222222 #6A6A6A #92174D
• Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
• YouTube colors#FF0033 #212121 #FFFFFF
• Google colors#4285F4 #EA4335 #FBBC05 #34A853
• Uber colors#000000 #FFFFFF #111111 #F6F6F6
• Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
• Lyft colors#FF00BF #1D0C17 #820076 #F1F0EC
• The Home Depot colors#F96302 #BC4B02 #333333 #FFFFFF

Trademarks

Frequently asked questions