Head & Shoulders color palette
ConsumerHead & Shoulders uses a distinctive blue and white color palette, emphasizing cleanliness and trust. The brand's visual identity is anchored by its signature deep blue, supported by light blue accents and neutral grays.
headandshoulders.comHead & Shoulders colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Head & Shoulders BluePrimary0, 87, 164
- Head & Shoulders Light BlueSecondary0, 174, 239
- Head & Shoulders Accent BlueAccent127, 187, 227
Surfaces
Page, cards and dividers.- Head & Shoulders WhiteBackground255, 255, 255
- Head & Shoulders Surface GraySurface244, 247, 250
- Head & Shoulders Border GrayBorder217, 226, 236
Text
Three tiers of copy.- Head & Shoulders BlackText26, 26, 26
- Head & Shoulders CharcoalSecondary text79, 91, 110
- Head & Shoulders Muted BlueMuted text143, 163, 191
Semantic
Feedback and state colors.- Head & Shoulders Success GreenSuccess60, 179, 113
- Head & Shoulders Warning YellowWarning255, 194, 14
- Head & Shoulders Error RedError233, 79, 79
- Head & Shoulders Info BlueInfo0, 174, 239
Use Head & Shoulders's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
head-and-shoulders-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #E94F4F;
--accent: #7FBBE3;
--border: #D9E2EC;
--primary: #0057A4;
--success: #3CB371;
--surface: #F4F7FA;
--warning: #FFC20E;
--secondary: #00AEEF;
--text-muted: #8FA3BF;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4F5B6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Head & Shoulders background, border and text colors
The quiet part of the Head & Shoulders palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Head & Shoulders WhiteBackground
- HEX
- RGB
- HSL
- Head & Shoulders Surface GraySurface
- HEX
- RGB
- HSL
- Head & Shoulders Border GrayBorder
- HEX
- RGB
- HSL
- Head & Shoulders BlackText
- HEX
- RGB
- HSL
- Head & Shoulders CharcoalSecondary text
- HEX
- RGB
- HSL
- Head & Shoulders Muted BlueMuted text
- HEX
- RGB
- HSL
About Head & Shoulders's colors
Head & Shoulders' palette is built around blue, a color associated with trust, hygiene, and freshness. The supporting whites and grays reinforce a sense of purity and approachability.
Primary blue is complemented by lighter blue accents.
Neutral grays and white provide balance and clarity.
Accent colors are used sparingly for emphasis and messaging.
Psychology
Blue conveys reliability and cleanliness, which aligns with the brand's anti-dandruff positioning. The use of white and light blue enhances the perception of freshness and health.
Evolution
The palette has remained consistent for decades, with minor updates to the blue shades for digital clarity. The brand has increasingly emphasized clean backgrounds and subtle gradients in recent years.
Where Head & Shoulders uses each color
- Primary
Used in the logo, navigation bars, and primary call-to-action buttons.
- Secondary
Appears in highlights, sub-navigation, and product accents.
- Accent
Used for subtle gradients, icons, and hover states.
- Backgrounds
White is the default background for web and packaging.
- Text
Primary text is nearly black for readability, with secondary and muted blues for less prominent information.
- Semantic
Success, warning, and error colors are used in forms, notifications, and status indicators.
Head & Shoulders color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Head & Shoulders brand blue is #0057A4. This color is used prominently in the logo and across digital assets.
Head & Shoulders Blue (#0057A4) is RGB(0, 87, 164). In CMYK, it is approximately 100, 47, 0, 36.
Head & Shoulders uses #F4F7FA for surfaces and #D9E2EC for borders, providing a clean and modern neutral backdrop.
Use #0057A4 for primary actions and branding, with #00AEEF and #7FBBE3 for accents. Neutrals and whites should dominate backgrounds and surfaces for clarity.
The secondary color is Head & Shoulders Light Blue, #00AEEF, and the accent is Head & Shoulders Accent Blue, #7FBBE3. 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 Head & Shoulders's colors consistently when it generates UI.
Make something in the spirit of Head & Shoulders
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.