Whole Foods color palette
Food & DrinkWhole Foods' color identity is defined by its signature deep green, reflecting its focus on organic and natural foods. The palette uses rich greens and neutral grays for a clean, earthy look across digital and physical touchpoints.
wholefoodsmarket.comWhole Foods colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Whole Foods GreenPrimary33, 87, 50
- Whole Foods OliveSecondary89, 132, 56
- Whole Foods LimeAccent163, 198, 68
Surfaces
Page, cards and dividers.- Whole Foods WhiteBackground255, 255, 255
- Whole Foods Off-WhiteSurface246, 246, 242
- Whole Foods Light GrayBorder225, 225, 222
Text
Three tiers of copy.- Whole Foods CharcoalText46, 46, 46
- Whole Foods Medium GraySecondary text107, 107, 107
- Whole Foods Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Whole Foods OliveSuccess89, 132, 56
- Whole Foods GoldWarning247, 201, 72
- Whole Foods RedError214, 69, 69
- Whole Foods BlueInfo58, 142, 186
Use Whole Foods's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
whole-foods-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8EBA;
--error: #D64545;
--accent: #A3C644;
--border: #E1E1DE;
--primary: #215732;
--success: #598438;
--surface: #F6F6F2;
--warning: #F7C948;
--secondary: #598438;
--text-muted: #A0A0A0;
--background: #FFFFFF;
--text-primary: #2E2E2E;
--text-secondary: #6B6B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9: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.4:1
Fail
Whole Foods background, border and text colors
The quiet part of the Whole Foods palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Whole Foods WhiteBackground
- HEX
- RGB
- HSL
- Whole Foods Off-WhiteSurface
- HEX
- RGB
- HSL
- Whole Foods Light GrayBorder
- HEX
- RGB
- HSL
- Whole Foods CharcoalText
- HEX
- RGB
- HSL
- Whole Foods Medium GraySecondary text
- HEX
- RGB
- HSL
- Whole Foods Muted GrayMuted text
- HEX
- RGB
- HSL
About Whole Foods's colors
Whole Foods' palette centers on natural greens with supporting neutrals, evoking freshness and health. The colors are harmonious and reinforce the brand's organic positioning.
Primary green is complemented by lighter olive and lime tones.
Neutrals provide balance and legibility.
Accent colors are used sparingly for calls to action.
Psychology
Green conveys health, growth, and sustainability, aligning with Whole Foods' values. Neutral grays and whites create a clean, trustworthy environment.
Evolution
The core green has remained consistent since the brand's founding, with minor adjustments to supporting tones for digital clarity. The palette has expanded slightly to include more nuanced grays and accent colors for modern UI needs.
Where Whole Foods uses each color
- Primary
Used in the logo, navigation bar, and key buttons.
- Secondary
Appears in secondary buttons, highlights, and some packaging elements.
- Accent
Used for promotional tags, icons, and subtle highlights.
- Backgrounds
White and off-white backgrounds are used for main content areas and product pages.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site and signage.
- Semantic
Olive indicates success, gold for warnings, red for errors, and blue for informational messages in digital interfaces.
Whole Foods color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Whole Foods primary brand color is #215732, known as Whole Foods Green.
Whole Foods Green (#215732) is RGB(33, 87, 50) and CMYK(62, 0, 43, 66).
Whole Foods uses #E1E1DE (Light Gray), #2E2E2E (Charcoal), and #A0A0A0 (Muted Gray) for backgrounds, borders, and text.
Primary green (#215732) should dominate navigation and branding, while supporting colors like olive and lime are reserved for accents and highlights. Neutrals ensure readability and a clean layout.
The secondary color is Whole Foods Olive, #598438, and the accent is Whole Foods Lime, #A3C644. 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 Whole Foods's colors consistently when it generates UI.
Make something in the spirit of Whole Foods
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.