Nutella color palette
Food & DrinkNutella's color identity centers on a distinctive deep red paired with rich browns and neutral whites, reflecting its iconic packaging and chocolate-hazelnut spread. The palette is minimal and consistent, emphasizing warmth and approachability.
nutella.comNutella colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nutella RedPrimary226, 33, 25
- Nutella BrownSecondary79, 44, 29
- Nutella WhiteAccent247, 246, 242
Surfaces
Page, cards and dividers.- Pure WhiteBackground255, 255, 255
- Nutella WhiteSurface247, 246, 242
- Nutella Light GrayBorder209, 207, 203
Text
Three tiers of copy.- Nutella BlackText35, 31, 32
- Nutella BrownSecondary text79, 44, 29
- Nutella GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Nutella GreenSuccess124, 179, 66
- Nutella YellowWarning249, 168, 37
- Nutella RedError226, 33, 25
- Nutella BlueInfo2, 136, 209
Use Nutella's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nutella-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E22119;
--accent: #F7F6F2;
--border: #D1CFCB;
--primary: #E22119;
--success: #7CB342;
--surface: #F7F6F2;
--warning: #F9A825;
--secondary: #4F2C1D;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #4F2C1D;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
12.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
11.4:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Nutella background, border and text colors
The quiet part of the Nutella palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pure WhiteBackground
- HEX
- RGB
- HSL
- Nutella WhiteSurface
- HEX
- RGB
- HSL
- Nutella Light GrayBorder
- HEX
- RGB
- HSL
- Nutella BlackText
- HEX
- RGB
- HSL
- Nutella BrownSecondary text
- HEX
- RGB
- HSL
- Nutella GrayMuted text
- HEX
- RGB
- HSL
About Nutella's colors
Nutella's palette is rooted in its product: deep red and brown evoke chocolate and hazelnuts, while white provides clarity and contrast. The colors are used sparingly for strong brand recognition.
Red and brown are complementary and reinforce the product's flavor profile.
White and gray neutrals provide balance and readability.
Accent colors are minimal, supporting the primary palette.
Psychology
Red conveys appetite, energy, and passion, while brown suggests warmth and indulgence. White and gray neutrals create a sense of cleanliness and simplicity.
Evolution
Nutella's core palette has remained stable since its inception, with the red and brown combination consistently used on packaging and branding. Minor adjustments have been made to the neutral tones for digital clarity.
Where Nutella uses each color
- Primary
Nutella Red is used in the logo, call-to-action buttons, and key highlights on packaging.
- Secondary
Nutella Brown appears in the logo, product imagery, and backgrounds for warmth.
- Accent
Nutella White is used for backgrounds, negative space, and logo contrast.
- Backgrounds
Pure White is the main background color on the website and packaging.
- Text
Nutella Black is used for primary text, while Nutella Brown and Nutella Gray are used for secondary and muted text.
- Semantic
Nutella Green, Yellow, Red, and Blue are used for status indicators and notifications in digital interfaces.
Nutella color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nutella brand color is Nutella Red, with the hex code #E22119.
Nutella Red (#E22119) is RGB(226, 33, 25) and CMYK(0, 85, 89, 11).
Nutella uses Nutella Light Gray (#D1CFCB) and Nutella Gray (#757575) for borders and muted text, providing subtle contrast in UI elements.
Use Nutella Red for primary actions and branding, Nutella Brown for secondary emphasis, and neutrals for backgrounds and text. Always maintain high contrast and avoid introducing unapproved colors.
The secondary color is Nutella Brown, #4F2C1D, and the accent is Nutella White, #F7F6F2. Together with the primary they make up the three brand colors at the top of this page.
6 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 Nutella's colors consistently when it generates UI.
Make something in the spirit of Nutella
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.