Garnier color palette
ConsumerGarnier's color identity centers around its signature green, reflecting its focus on natural ingredients and freshness. The palette uses a range of greens, complemented by neutral grays and white for clarity and approachability.
garnier.comGarnier colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Garnier GreenPrimary109, 190, 69
- Deep Leaf GreenSecondary60, 110, 63
- Sunshine YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Pure WhiteBackground255, 255, 255
- Soft Mist GraySurface245, 245, 245
- Light Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Charcoal TextText34, 34, 34
- Slate Gray TextSecondary text77, 77, 77
- Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Garnier GreenSuccess109, 190, 69
- Sunshine YellowWarning255, 214, 0
- Alert RedError229, 57, 53
- Teal InfoInfo0, 150, 136
Use Garnier's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
garnier-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009688;
--error: #E53935;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #6DBE45;
--success: #6DBE45;
--surface: #F5F5F5;
--warning: #FFD600;
--secondary: #3C6E3F;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4D4D4D;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.8:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Garnier gray and neutral colors
The quiet part of the Garnier 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
- Soft Mist GraySurface
- HEX
- RGB
- HSL
- Light Border GrayBorder
- HEX
- RGB
- HSL
- Charcoal TextText
- HEX
- RGB
- HSL
- Slate Gray TextSecondary text
- HEX
- RGB
- HSL
- Muted GrayMuted text
- HEX
- RGB
- HSL
About Garnier's colors
Garnier's palette is rooted in natural greens, evoking freshness, vitality, and eco-friendliness. Neutral grays and white provide a clean, modern backdrop for the brand's messaging.
Primary green is complemented by deep green and yellow accents.
Neutrals balance vibrant colors for legibility.
Accent yellow highlights calls to action.
Psychology
Green is associated with nature, health, and renewal, reinforcing Garnier's positioning as a natural beauty brand. The yellow accent adds warmth and optimism.
Evolution
The core green has remained consistent, strengthening brand recognition. Over time, the palette has added more sophisticated neutrals and a brighter yellow accent for modern appeal.
Where Garnier uses each color
- Primary
Used for logos, main navigation highlights, and key buttons.
- Secondary
Appears in headers, footers, and supporting graphics.
- Accent
Applied to call-to-action buttons and promotional banners.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Charcoal and slate gray are used for primary and secondary text respectively.
- Semantic
Green indicates success, yellow for warnings, red for errors, and teal for informational messages.
Garnier color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Garnier brand color is #6DBE45, known as Garnier Green.
Garnier Green (#6DBE45) is RGB(109, 190, 69) and CMYK(43, 0, 64, 25).
Garnier uses Soft Mist Gray (#F5F5F5) for surfaces and Light Border Gray (#E0E0E0) for borders, providing a clean and modern UI foundation.
Use Garnier Green (#6DBE45) for primary branding elements, Deep Leaf Green (#3C6E3F) for support, and Sunshine Yellow (#FFD600) for accents. Neutrals and text colors ensure readability and balance.
The secondary color is Deep Leaf Green, #3C6E3F, and the accent is Sunshine Yellow, #FFD600. 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 Garnier's colors consistently when it generates UI.
Make something in the spirit of Garnier
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.