Neutrogena color palette
ConsumerNeutrogena's color identity is built around a clean, clinical palette with a signature deep black and crisp white, conveying trust and clarity. The brand uses subtle blue accents and neutral grays to reinforce a sense of purity and dermatological expertise.
neutrogena.comNeutrogena colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Neutrogena BlackPrimary35, 31, 32
- Neutrogena WhiteSecondary255, 255, 255
- Neutrogena BlueAccent0, 149, 200
Surfaces
Page, cards and dividers.- Neutrogena Light GrayBackground247, 247, 247
- Neutrogena Surface GraySurface229, 229, 229
- Neutrogena Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Neutrogena BlackText35, 31, 32
- Neutrogena Medium GraySecondary text109, 110, 113
- Neutrogena Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Neutrogena Success GreenSuccess107, 190, 146
- Neutrogena Warning YellowWarning255, 210, 71
- Neutrogena Error RedError233, 79, 55
- Neutrogena BlueInfo0, 149, 200
Use Neutrogena's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
neutrogena-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0095C8;
--error: #E94F37;
--accent: #0095C8;
--border: #D1D3D4;
--primary: #231F20;
--success: #6BBE92;
--surface: #E5E5E5;
--warning: #FFD247;
--secondary: #FFFFFF;
--text-muted: #A7A9AC;
--background: #F7F7F7;
--text-primary: #231F20;
--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
15.2:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Neutrogena gray and neutral colors
The quiet part of the Neutrogena palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Neutrogena Light GrayBackground
- HEX
- RGB
- HSL
- Neutrogena Surface GraySurface
- HEX
- RGB
- HSL
- Neutrogena Border GrayBorder
- HEX
- RGB
- HSL
- Neutrogena BlackText
- HEX
- RGB
- HSL
- Neutrogena Medium GraySecondary text
- HEX
- RGB
- HSL
- Neutrogena Muted GrayMuted text
- HEX
- RGB
- HSL
About Neutrogena's colors
Neutrogena's palette is minimal and clinical, emphasizing trust, cleanliness, and dermatological expertise. The restrained use of blue adds a sense of calm and reliability to the otherwise neutral scheme.
Strong contrast between black and white for clarity.
Blue accent used for highlights and calls to action.
Neutral grays unify backgrounds and surfaces.
Psychology
The dominant black and white convey professionalism and purity, while blue suggests trust and calmness. Subtle grays support a modern, approachable feel.
Evolution
Neutrogena's color palette has remained largely stable, with black and white as core elements since its inception. The blue accent has been refined over time to align with digital and packaging needs.
Where Neutrogena uses each color
- Primary
Neutrogena Black is used for the logo, navigation bar, and primary text.
- Secondary
Neutrogena White is the main background color for web and packaging.
- Accent
Neutrogena Blue highlights links, buttons, and key interactive elements.
- Backgrounds
Neutrogena Light Gray is used for page backgrounds and product cards.
- Text
Primary and secondary grays are used for body text, captions, and muted UI elements.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Neutrogena color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Neutrogena brand color is Neutrogena Black, hex code #231F20.
Neutrogena Black (#231F20) is RGB(35, 31, 32) and CMYK(0, 11, 9, 86).
Neutrogena uses a range of grays including Neutrogena Light Gray (#F7F7F7), Surface Gray (#E5E5E5), and Border Gray (#D1D3D4) for backgrounds and borders.
Use Neutrogena Black (#231F20) for logos and text, white (#FFFFFF) for backgrounds, and blue (#0095C8) for accents and calls to action. Grays should support UI surfaces and secondary text.
The secondary color is Neutrogena White, #FFFFFF, and the accent is Neutrogena Blue, #0095C8. Together with the primary they make up the three brand colors at the top of this page.
3 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 Neutrogena's colors consistently when it generates UI.
Make something in the spirit of Neutrogena
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.