Pampers color palette
ConsumerPampers uses a bright, friendly palette led by its signature teal, reflecting trust and care for babies. The color system is consistent across packaging, digital, and advertising, emphasizing cleanliness and comfort.
pampers.comPampers colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pampers TealPrimary0, 182, 179
- Pampers YellowSecondary255, 214, 0
- Pampers OrangeAccent249, 168, 0
Surfaces
Page, cards and dividers.- Pampers Soft WhiteBackground247, 252, 252
- Pampers Pure WhiteSurface255, 255, 255
- Pampers Light TealBorder214, 234, 234
Text
Three tiers of copy.- Pampers CharcoalText51, 51, 51
- Pampers GraySecondary text109, 110, 113
- Pampers Muted GrayMuted text167, 177, 177
Semantic
Feedback and state colors.- Pampers GreenSuccess122, 193, 67
- Pampers OrangeWarning249, 168, 0
- Pampers RedError233, 79, 55
- Pampers TealInfo0, 182, 179
Use Pampers's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pampers-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B6B3;
--error: #E94F37;
--accent: #F9A800;
--border: #D6EAEA;
--primary: #00B6B3;
--success: #7AC143;
--surface: #FFFFFF;
--warning: #F9A800;
--secondary: #FFD600;
--text-muted: #A7B1B1;
--background: #F7FCFC;
--text-primary: #333333;
--text-secondary: #6D6E71;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.2:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9: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
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Pampers background, border and text colors
The quiet part of the Pampers palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pampers Soft WhiteBackground
- HEX
- RGB
- HSL
- Pampers Pure WhiteSurface
- HEX
- RGB
- HSL
- Pampers Light TealBorder
- HEX
- RGB
- HSL
- Pampers CharcoalText
- HEX
- RGB
- HSL
- Pampers GraySecondary text
- HEX
- RGB
- HSL
- Pampers Muted GrayMuted text
- HEX
- RGB
- HSL
About Pampers's colors
Pampers' palette is built around a calming teal, complemented by cheerful yellow and soft neutrals to evoke trust, cleanliness, and warmth. The supporting colors reinforce a sense of safety and optimism.
Primary teal contrasts with yellow for high visibility.
Soft neutrals provide a clean, gentle background.
Accent orange and green add energy and signal actions.
Psychology
The teal primary conveys calmness, trust, and hygiene, essential for a baby care brand. Yellow and orange accents add friendliness and approachability.
Evolution
Pampers' color palette has remained stable, with teal as its core since the early 2000s. Minor adjustments have been made to accent and neutral tones for digital clarity.
Where Pampers uses each color
- Primary
Pampers Teal is used for the logo, key buttons, and major navigation elements.
- Secondary
Pampers Yellow appears in highlights, icons, and packaging details.
- Accent
Pampers Orange is used for call-to-action buttons and important notifications.
- Backgrounds
Pampers Soft White serves as the main background for web and app screens.
- Text
Pampers Charcoal and Pampers Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Pampers Green, Orange, and Red are used for success, warning, and error states in UI and communications.
Pampers color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pampers brand color is Pampers Teal, with hex code #00B6B3.
Pampers Teal (#00B6B3) in RGB is (0, 182, 179) and in CMYK is (100, 0, 2, 29).
Pampers uses Pampers Charcoal (#333333), Pampers Gray (#6D6E71), and Pampers Muted Gray (#A7B1B1) for text and UI backgrounds.
Use Pampers Teal (#00B6B3) for primary branding and actions, with yellow and orange for highlights and calls to action, and neutrals for backgrounds and text.
The secondary color is Pampers Yellow, #FFD600, and the accent is Pampers Orange, #F9A800. 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 Pampers's colors consistently when it generates UI.
Make something in the spirit of Pampers
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.