Evian color palette
Food & DrinkEvian's color identity is defined by its iconic soft pink and clean white, reflecting purity and freshness. The palette is minimal, with gentle blue and gray tones supporting the primary pink.
evian.comEvian colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Evian PinkPrimary255, 108, 181
- Evian BlueSecondary0, 158, 226
- Evian Light BlueAccent167, 216, 245
Surfaces
Page, cards and dividers.- Evian WhiteBackground255, 255, 255
- Evian Mist GraySurface246, 246, 246
- Evian Pale GrayBorder226, 226, 226
Text
Three tiers of copy.- Evian CharcoalText34, 34, 34
- Evian SlateSecondary text109, 110, 113
- Evian Soft GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Evian Fresh GreenSuccess107, 203, 119
- Evian Caution YellowWarning255, 209, 102
- Evian Alert RedError255, 90, 95
- Evian Info BlueInfo79, 195, 247
Use Evian's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
evian-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4FC3F7;
--error: #FF5A5F;
--accent: #A7D8F5;
--border: #E2E2E2;
--primary: #FF6CB5;
--success: #6BCB77;
--surface: #F6F6F6;
--warning: #FFD166;
--secondary: #009EE2;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #222222;
--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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Evian gray and neutral colors
The quiet part of the Evian palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Evian WhiteBackground
- HEX
- RGB
- HSL
- Evian Mist GraySurface
- HEX
- RGB
- HSL
- Evian Pale GrayBorder
- HEX
- RGB
- HSL
- Evian CharcoalText
- HEX
- RGB
- HSL
- Evian SlateSecondary text
- HEX
- RGB
- HSL
- Evian Soft GrayMuted text
- HEX
- RGB
- HSL
About Evian's colors
Evian's palette is built around a soft pink, complemented by blue and neutral tones to evoke purity and freshness. The restrained use of color supports a clean, premium brand image.
Primary pink contrasts with blue for visual clarity.
Neutrals balance the vibrancy of pink and blue.
Accent blue is used for highlights and water cues.
Psychology
The pink signals softness, care, and approachability, while blue reinforces trust and hydration. White and gray tones emphasize cleanliness and simplicity.
Evolution
Evian's palette has remained consistent, with pink and blue as core elements since the 1990s. Minor updates have refined the pink and blue hues for digital clarity.
Where Evian uses each color
- Primary
Evian Pink is used in the logo, key headlines, and major call-to-action buttons.
- Secondary
Evian Blue appears in navigation highlights, links, and water imagery.
- Accent
Evian Light Blue is used for subtle backgrounds and UI highlights.
- Backgrounds
Evian White is the main background color for web and packaging.
- Text
Evian Charcoal and Slate are used for primary and secondary text across digital and print.
- Semantic
Success, warning, and error colors are used in forms, notifications, and status indicators.
Evian color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Evian brand color is Evian Pink, hex code #FF6CB5.
Evian Pink (#FF6CB5) has an RGB value of 255, 108, 181 and a CMYK value of 0, 58, 29, 0.
Evian uses Mist Gray (#F6F6F6), Pale Gray (#E2E2E2), and Soft Gray (#A3A3A3) for backgrounds, borders, and muted text.
Use Evian Pink (#FF6CB5) for primary branding and calls to action, with Evian Blue (#009EE2) and Light Blue (#A7D8F5) as supporting and accent colors. Neutrals and grays provide structure and clarity in layouts.
The secondary color is Evian Blue, #009EE2, and the accent is Evian Light Blue, #A7D8F5. 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 Evian's colors consistently when it generates UI.
Make something in the spirit of Evian
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.