Huggies color palette
ConsumerHuggies uses a bold, friendly red as its signature color, supported by clean whites and soft grays for a welcoming, trustworthy look. The palette is designed to evoke warmth, care, and reliability for parents and families.
huggies.comHuggies colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Huggies RedPrimary226, 28, 42
- Huggies WhiteSecondary255, 255, 255
- Huggies GoldAccent247, 182, 0
Surfaces
Page, cards and dividers.- Huggies Light GrayBackground248, 248, 248
- Huggies Panel GraySurface242, 242, 242
- Huggies Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Huggies CharcoalText34, 34, 34
- Huggies Medium GraySecondary text102, 102, 102
- Huggies Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Huggies Success GreenSuccess75, 181, 67
- Huggies GoldWarning247, 182, 0
- Huggies RedError226, 28, 42
- Huggies BlueInfo0, 159, 218
Use Huggies's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
huggies-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #E21C2A;
--accent: #F7B600;
--border: #D1D3D4;
--primary: #E21C2A;
--success: #4BB543;
--surface: #F2F2F2;
--warning: #F7B600;
--secondary: #FFFFFF;
--text-muted: #A7A9AC;
--background: #F8F8F8;
--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
15.0: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
5.4: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.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Huggies gray and neutral colors
The quiet part of the Huggies palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Huggies Light GrayBackground
- HEX
- RGB
- HSL
- Huggies Panel GraySurface
- HEX
- RGB
- HSL
- Huggies Border GrayBorder
- HEX
- RGB
- HSL
- Huggies CharcoalText
- HEX
- RGB
- HSL
- Huggies Medium GraySecondary text
- HEX
- RGB
- HSL
- Huggies Muted GrayMuted text
- HEX
- RGB
- HSL
About Huggies's colors
Huggies' color system centers on a vibrant red, balanced by neutral whites and grays, with gold and blue accents for clarity and emotion. The palette is approachable and trustworthy, aligning with its family-focused brand.
Primary red is contrasted with clean white backgrounds.
Gold accent highlights calls to action and packaging details.
Soft grays provide structure and readability in UI elements.
Psychology
Red evokes warmth, care, and urgency, reinforcing Huggies' commitment to families. The use of white and gray conveys cleanliness and reliability.
Evolution
Huggies' palette has remained consistent, with red as the anchor color for decades. Recent updates have refined the supporting neutrals for a more modern, digital-friendly appearance.
Where Huggies uses each color
- Primary
Huggies Red is used in the logo, primary buttons, and key packaging elements.
- Secondary
Huggies White is the main background for web pages and product packaging.
- Accent
Huggies Gold highlights special offers, badges, and call-to-action elements.
- Backgrounds
Huggies Light Gray and Panel Gray are used for content backgrounds and section dividers.
- Text
Charcoal and Medium Gray are used for primary and secondary text across digital and print materials.
- Semantic
Success Green, Gold, and Blue are used for status messages, alerts, and informational banners.
Huggies color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Huggies brand color is Huggies Red, hex code #E21C2A.
Huggies Red (#E21C2A) is RGB(226, 28, 42) and CMYK(0, 88, 81, 11).
Huggies uses Light Gray (#F8F8F8), Panel Gray (#F2F2F2), Border Gray (#D1D3D4), Medium Gray (#666666), and Muted Gray (#A7A9AC) for backgrounds, borders, and text.
Use Huggies Red (#E21C2A) for primary branding and calls to action, with white and grays for backgrounds and text. Accent colors like Gold (#F7B600) and Blue (#009FDA) are reserved for highlights and informational elements.
The secondary color is Huggies White, #FFFFFF, and the accent is Huggies Gold, #F7B600. 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 Huggies's colors consistently when it generates UI.
Make something in the spirit of Huggies
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.