Nivea color palette
FashionNivea's brand color identity is defined by its signature deep blue, paired with crisp whites and subtle greys for a clean, trustworthy appearance. The palette reflects the brand's heritage in skincare and its emphasis on purity and reliability.
nivea.comNivea colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nivea BluePrimary0, 51, 153
- Nivea WhiteSecondary255, 255, 255
- Nivea GoldAccent255, 215, 0
Surfaces
Page, cards and dividers.- Nivea Light GreyBackground245, 247, 250
- Nivea Surface GreySurface230, 233, 239
- Nivea Border GreyBorder209, 213, 219
Text
Three tiers of copy.- Nivea CharcoalText26, 26, 26
- Nivea SlateSecondary text75, 85, 99
- Nivea Muted GreyMuted text138, 153, 166
Semantic
Feedback and state colors.- Nivea Success GreenSuccess60, 179, 113
- Nivea Warning AmberWarning255, 179, 0
- Nivea Error RedError215, 38, 61
- Nivea Info BlueInfo25, 118, 210
Use Nivea's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nivea-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D7263D;
--accent: #FFD700;
--border: #D1D5DB;
--primary: #003399;
--success: #3CB371;
--surface: #E6E9EF;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #8A99A6;
--background: #F5F7FA;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Nivea background, border and text colors
The quiet part of the Nivea palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nivea Light GreyBackground
- HEX
- RGB
- HSL
- Nivea Surface GreySurface
- HEX
- RGB
- HSL
- Nivea Border GreyBorder
- HEX
- RGB
- HSL
- Nivea CharcoalText
- HEX
- RGB
- HSL
- Nivea SlateSecondary text
- HEX
- RGB
- HSL
- Nivea Muted GreyMuted text
- HEX
- RGB
- HSL
About Nivea's colors
Nivea's palette centers on a strong, trustworthy blue complemented by white and neutral greys for clarity and approachability. The use of accent gold and functional colors supports a modern, clean UI.
Primary blue and white create high contrast for legibility.
Greys are used for subtle backgrounds and UI elements.
Accent gold highlights premium or special features.
Psychology
Blue conveys trust, reliability, and calmness, aligning with Nivea's skincare promise. White and light greys reinforce a sense of purity and cleanliness.
Evolution
Nivea's color palette has remained stable for decades, with deep blue and white as its core. Recent digital updates introduced more nuanced greys and accent colors for UI clarity.
Where Nivea uses each color
- Primary
Nivea Blue is used for the logo, navigation bars, and primary buttons.
- Secondary
Nivea White appears as the main background and in product packaging.
- Accent
Nivea Gold is used sparingly for premium product lines and callouts.
- Backgrounds
Light and surface greys are used for backgrounds, cards, and UI surfaces.
- Text
Charcoal and slate greys are used for primary and secondary text throughout the site.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators.
Nivea color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nivea brand color is Nivea Blue, with the hex code #003399.
Nivea Blue (#003399) is RGB(0, 51, 153) and CMYK(100, 67, 0, 40).
Nivea uses several greys such as Nivea Light Grey (#F5F7FA), Surface Grey (#E6E9EF), and Border Grey (#D1D5DB) for backgrounds and interface elements.
Use Nivea Blue (#003399) for primary actions and branding, with white and greys for backgrounds and text. Accent and semantic colors should be reserved for highlights, alerts, and special states.
The secondary color is Nivea White, #FFFFFF, and the accent is Nivea Gold, #FFD700. 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 Nivea's colors consistently when it generates UI.
Make something in the spirit of Nivea
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.