Pantene color palette
ConsumerPantene's brand color system centers around a distinctive gold, paired with clean whites and sophisticated dark neutrals, reflecting its premium, science-driven haircare positioning. The palette is minimal and elegant, emphasizing clarity and luxury.
pantene.comPantene colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pantene GoldPrimary255, 215, 0
- Pantene WhiteSecondary255, 255, 255
- Pantene BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Pantene Light GrayBackground248, 248, 248
- Pantene Surface GraySurface242, 242, 242
- Pantene Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Pantene CharcoalText34, 34, 34
- Pantene Medium GraySecondary text102, 102, 102
- Pantene Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Pantene Success GreenSuccess139, 195, 74
- Pantene Warning AmberWarning255, 179, 0
- Pantene Error RedError211, 47, 47
- Pantene Info BlueInfo2, 136, 209
Use Pantene's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pantene-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #D32F2F;
--accent: #000000;
--border: #E5E5E5;
--primary: #FFD700;
--success: #8BC34A;
--surface: #F2F2F2;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #A0A0A0;
--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.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Pantene gray and neutral colors
The quiet part of the Pantene palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pantene Light GrayBackground
- HEX
- RGB
- HSL
- Pantene Surface GraySurface
- HEX
- RGB
- HSL
- Pantene Border GrayBorder
- HEX
- RGB
- HSL
- Pantene CharcoalText
- HEX
- RGB
- HSL
- Pantene Medium GraySecondary text
- HEX
- RGB
- HSL
- Pantene Muted GrayMuted text
- HEX
- RGB
- HSL
About Pantene's colors
Pantene's palette is built around gold, white, and dark neutrals, conveying luxury, purity, and scientific credibility. The restrained use of color supports a clean, premium brand image.
Gold contrasts with white for visual hierarchy.
Black and charcoal provide strong text legibility.
Subtle grays unify backgrounds and surfaces.
Psychology
Gold evokes luxury, quality, and confidence, aligning with Pantene's positioning as a premium haircare brand. White and gray tones reinforce purity and trust.
Evolution
Pantene's gold-and-white palette has remained consistent for decades, with minor adjustments to the gold's vibrancy and the introduction of more nuanced grays for digital use. The core identity has been stable, supporting strong brand recognition.
Where Pantene uses each color
- Primary
Pantene Gold is used for logos, key highlights, and packaging accents.
- Secondary
Pantene White dominates backgrounds, packaging, and web UI.
- Accent
Pantene Black is used for typography, navigation, and strong contrast elements.
- Backgrounds
Pantene Light Gray and Surface Gray appear in web backgrounds and secondary UI panels.
- Text
Pantene Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success Green, Warning Amber, Error Red, and Info Blue are used for alerts, notifications, and status indicators in digital applications.
Pantene color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pantene brand color is Pantene Gold, with the hex code #FFD700.
Pantene Gold (#FFD700) is RGB(255, 215, 0) and CMYK(0, 0.16, 1, 0).
Pantene uses several grays for UI and backgrounds: Pantene Light Gray (#F8F8F8), Surface Gray (#F2F2F2), Border Gray (#E5E5E5), and text grays like Pantene Charcoal (#222222).
Pantene Gold (#FFD700) should be reserved for key brand elements, while white and grays form the main UI and packaging backgrounds. Accent and semantic colors are used sparingly for clarity and accessibility.
The secondary color is Pantene White, #FFFFFF, and the accent is Pantene Black, #000000. 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 Pantene's colors consistently when it generates UI.
Make something in the spirit of Pantene
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.