Perrier color palette
Food & DrinkPerrier's color identity is defined by its signature deep green, reflecting its natural mineral water origins and iconic glass bottles. The palette uses rich greens, gold accents, and crisp whites for a classic, refreshing look.
perrier.comPerrier colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Perrier GreenPrimary30, 70, 52
- Perrier YellowSecondary249, 229, 71
- Perrier WhiteAccent246, 246, 246
Surfaces
Page, cards and dividers.- Perrier Background WhiteBackground255, 255, 255
- Perrier MistSurface226, 231, 227
- Perrier Bottle RimBorder182, 197, 183
Text
Three tiers of copy.- Perrier Green TextText30, 70, 52
- Perrier Olive TextSecondary text66, 89, 76
- Perrier SageMuted text141, 165, 155
Semantic
Feedback and state colors.- Perrier FreshSuccess75, 170, 90
- Perrier YellowWarning249, 229, 71
- Perrier RedError196, 61, 44
- Perrier TealInfo60, 141, 122
Use Perrier's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
perrier-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3C8D7A;
--error: #C43D2C;
--accent: #F6F6F6;
--border: #B6C5B7;
--primary: #1E4634;
--success: #4BAA5A;
--surface: #E2E7E3;
--warning: #F9E547;
--secondary: #F9E547;
--text-muted: #8DA59B;
--background: #FFFFFF;
--text-primary: #1E4634;
--text-secondary: #42594C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
10.6:1
Pass
Text on surface
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Perrier background, border and text colors
The quiet part of the Perrier palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Perrier Background WhiteBackground
- HEX
- RGB
- HSL
- Perrier MistSurface
- HEX
- RGB
- HSL
- Perrier Bottle RimBorder
- HEX
- RGB
- HSL
- Perrier Green TextText
- HEX
- RGB
- HSL
- Perrier Olive TextSecondary text
- HEX
- RGB
- HSL
- Perrier SageMuted text
- HEX
- RGB
- HSL
About Perrier's colors
Perrier's palette centers on a deep, natural green, complemented by yellow and white for vibrancy and clarity. The colors evoke freshness, purity, and the brand's French heritage.
Primary green paired with yellow for contrast.
White and mist tones provide clean, neutral backgrounds.
Gold/yellow accents highlight premium and celebratory elements.
Psychology
The green signifies nature, health, and refreshment, while yellow adds energy and optimism. The palette aims to convey purity and sophistication.
Evolution
Perrier's palette has remained stable, with its signature green in use for decades. Minor adjustments have been made for digital clarity and accessibility.
Where Perrier uses each color
- Primary
Used for bottle labels, navigation bars, and key brand elements.
- Secondary
Appears in logo accents, call-to-action buttons, and highlights.
- Accent
Utilized for backgrounds, packaging details, and secondary UI elements.
- Backgrounds
White and mist tones are used for website and print backgrounds.
- Text
Green and olive tones are used for headings and body text.
- Semantic
Success, warning, and error colors are used in digital feedback and notifications.
Perrier color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Perrier brand color is #1E4634, known as Perrier Green.
Perrier Green (#1E4634) is RGB(30, 70, 52) and CMYK(57, 0, 26, 73).
Perrier uses #E2E7E3 (Perrier Mist) and #B6C5B7 (Perrier Bottle Rim) as its main neutral tones for backgrounds and borders.
Use Perrier Green (#1E4634) for primary branding and navigation, with yellow (#F9E547) for accents and calls to action. Neutrals like #E2E7E3 and #F6F6F6 provide balance in backgrounds and surfaces.
The secondary color is Perrier Yellow, #F9E547, and the accent is Perrier White, #F6F6F6. 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 Perrier's colors consistently when it generates UI.
Make something in the spirit of Perrier
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.