John Lewis color palette
EcommerceJohn Lewis uses a refined, modern palette centered on its signature green, complemented by neutral greys and crisp white for a clean, trustworthy ecommerce experience.
johnlewis.comJohn Lewis colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- John Lewis GreenPrimary0, 117, 73
- John Lewis CharcoalSecondary51, 51, 51
- John Lewis SageAccent181, 201, 184
Surfaces
Page, cards and dividers.- John Lewis WhiteBackground255, 255, 255
- John Lewis Light GreySurface245, 245, 245
- John Lewis Border GreyBorder216, 216, 216
Text
Three tiers of copy.- John Lewis Text BlackText34, 34, 34
- John Lewis Text GreySecondary text102, 102, 102
- John Lewis Muted GreyMuted text153, 153, 153
Semantic
Feedback and state colors.- John Lewis GreenSuccess0, 117, 73
- John Lewis AmberWarning230, 167, 0
- John Lewis RedError208, 2, 27
- John Lewis BlueInfo0, 91, 140
Use John Lewis's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
john-lewis-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005B8C;
--error: #D0021B;
--accent: #B5C9B8;
--border: #D8D8D8;
--primary: #007549;
--success: #007549;
--surface: #F5F5F5;
--warning: #E6A700;
--secondary: #333333;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}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
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
John Lewis gray and neutral colors
The quiet part of the John Lewis palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- John Lewis WhiteBackground
- HEX
- RGB
- HSL
- John Lewis Light GreySurface
- HEX
- RGB
- HSL
- John Lewis Border GreyBorder
- HEX
- RGB
- HSL
- John Lewis Text BlackText
- HEX
- RGB
- HSL
- John Lewis Text GreySecondary text
- HEX
- RGB
- HSL
- John Lewis Muted GreyMuted text
- HEX
- RGB
- HSL
About John Lewis's colors
John Lewis’s palette is built around a deep green, conveying trust, quality, and heritage, balanced by neutral greys and white for clarity and modernity. The accent sage and supporting tones create a calm, approachable interface.
Primary green is paired with white for maximum contrast.
Greys are used for hierarchy and subtle separation.
Accent sage provides gentle highlights without overpowering the main green.
Psychology
Green is associated with reliability, calm, and sustainability, aligning with John Lewis’s brand values. The neutral tones reinforce a sense of simplicity and professionalism.
Evolution
The green has been a core part of the John Lewis identity for decades, with only subtle refinements to its exact shade. The supporting palette has shifted towards lighter, cleaner neutrals in recent years to modernize the brand’s digital presence.
Where John Lewis uses each color
- Primary
Used for main navigation bars, primary buttons, and key brand elements.
- Secondary
Applied to headings, footer backgrounds, and strong UI elements.
- Accent
Highlights secondary actions, badges, and subtle UI details.
- Backgrounds
White and light grey are used for page backgrounds and content areas.
- Text
Primary and secondary text colors are used for body copy, headings, and muted text for less prominent information.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
John Lewis color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official John Lewis brand green is #007549. This color is used across their logo and primary brand elements.
The primary green (#007549) is RGB(0, 117, 73) and CMYK(100, 0, 38, 54). Use these values for print and digital consistency.
John Lewis uses #333333 (Charcoal), #F5F5F5 (Light Grey), #D8D8D8 (Border Grey), #666666 (Text Grey), and #999999 (Muted Grey) for UI backgrounds, borders, and text hierarchy.
Use #007549 for primary actions and branding, with greys and white for backgrounds and text. Accent and semantic colors should be reserved for highlights, alerts, and status messages to maintain clarity.
The secondary color is John Lewis Charcoal, #333333, and the accent is John Lewis Sage, #B5C9B8. 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 John Lewis's colors consistently when it generates UI.
Make something in the spirit of John Lewis
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.