Nestlé color palette
Food & DrinkNestlé's brand color identity centers on a distinctive deep blue, conveying trust, reliability, and heritage. The palette is complemented by neutral grays and white, reflecting the brand's longstanding reputation in the food industry.
nestle.comNestlé colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nestlé BluePrimary0, 51, 102
- Nestlé GraySecondary124, 135, 142
- Nestlé Light BlueAccent161, 194, 215
Surfaces
Page, cards and dividers.- Nestlé WhiteBackground255, 255, 255
- Nestlé Surface GraySurface244, 244, 244
- Nestlé Border GrayBorder209, 213, 218
Text
Three tiers of copy.- Nestlé Blue TextText0, 51, 102
- Nestlé Secondary TextSecondary text75, 92, 107
- Nestlé Muted TextMuted text124, 135, 142
Semantic
Feedback and state colors.- Nestlé GreenSuccess108, 179, 63
- Nestlé YellowWarning247, 181, 0
- Nestlé RedError215, 38, 61
- Nestlé Info BlueInfo0, 118, 168
Use Nestlé's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nestle-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076A8;
--error: #D7263D;
--accent: #A1C2D7;
--border: #D1D5DA;
--primary: #003366;
--success: #6CB33F;
--surface: #F4F4F4;
--warning: #F7B500;
--secondary: #7C878E;
--text-muted: #7C878E;
--background: #FFFFFF;
--text-primary: #003366;
--text-secondary: #4B5C6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.6:1
Pass
Text on surface
Needs 4.5:1 for body text
11.5: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.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Nestlé background, border and text colors
The quiet part of the Nestlé palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nestlé WhiteBackground
- HEX
- RGB
- HSL
- Nestlé Surface GraySurface
- HEX
- RGB
- HSL
- Nestlé Border GrayBorder
- HEX
- RGB
- HSL
- Nestlé Blue TextText
- HEX
- RGB
- HSL
- Nestlé Secondary TextSecondary text
- HEX
- RGB
- HSL
- Nestlé Muted TextMuted text
- HEX
- RGB
- HSL
About Nestlé's colors
Nestlé’s palette is built around a deep blue, supported by cool grays and subtle accent hues. This combination projects professionalism, trust, and a sense of heritage.
Primary blue is complemented by neutral grays for clarity.
Accent light blue provides visual highlights.
Green, yellow, and red are reserved for semantic and functional cues.
Psychology
Blue evokes trust, dependability, and stability—key values for a global food brand. The use of gray and white reinforces a clean, modern, and approachable image.
Evolution
Nestlé’s core blue has remained consistent for decades, reinforcing brand recognition. Minor adjustments to supporting grays and accent colors have modernized the palette for digital use.
Where Nestlé uses each color
- Primary
Nestlé Blue is used in the logo, main navigation, and key call-to-action buttons.
- Secondary
Nestlé Gray appears in UI elements, secondary navigation, and backgrounds.
- Accent
Nestlé Light Blue is used for highlights, links, and subtle UI accents.
- Backgrounds
Nestlé White and Surface Gray are used for page backgrounds and content areas.
- Text
Text uses Nestlé Blue for headings, Secondary Text for subheadings, and Muted Text for captions or less prominent information.
- Semantic
Green, Yellow, and Red are used for success, warning, and error states in digital interfaces.
Nestlé color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Nestlé brand color is Nestlé Blue, with the hex code #003366. This color is used prominently in the Nestlé logo and digital interfaces.
Nestlé Blue (#003366) has an RGB value of 0, 51, 102 and a CMYK value of 100, 50, 0, 60. These values ensure consistent reproduction across print and digital media.
Nestlé uses several grays including Nestlé Gray (#7C878E) for secondary elements and Surface Gray (#F4F4F4) for backgrounds. These neutrals provide balance and readability in the brand's UI.
Use Nestlé Blue (#003366) for primary actions, branding, and navigation. Supporting colors like grays and accent blue should be used for backgrounds, secondary elements, and highlights to maintain brand consistency.
The secondary color is Nestlé Gray, #7C878E, and the accent is Nestlé Light Blue, #A1C2D7. 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 Nestlé's colors consistently when it generates UI.
Make something in the spirit of Nestlé
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.