Shopify color palette
EcommerceShopify's signature green palette communicates growth, entrepreneurship, and success, creating an aspirational identity for the world's leading e-commerce platform.
shopify.comShopify colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shopify GreenPrimary150, 191, 72
- Shopify Dark GreenSecondary94, 142, 62
- Shopify TealAccent0, 128, 96
Surfaces
Page, cards and dividers.- Shopify WhiteBackground255, 255, 255
- Shopify SurfaceSurface246, 246, 247
- Shopify BorderBorder225, 227, 229
Text
Three tiers of copy.- Shopify TextText32, 34, 35
- Shopify SecondarySecondary text109, 113, 117
- Shopify MutedMuted text140, 145, 150
Semantic
Feedback and state colors.- Shopify SuccessSuccess0, 128, 96
- Shopify WarningWarning185, 137, 0
- Shopify ErrorError215, 44, 13
- Shopify BlueInfo44, 110, 203
Use Shopify's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shopify-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2C6ECB;
--error: #D72C0D;
--accent: #008060;
--border: #E1E3E5;
--primary: #96BF48;
--success: #008060;
--surface: #F6F6F7;
--warning: #B98900;
--secondary: #5E8E3E;
--text-muted: #8C9196;
--background: #FFFFFF;
--text-primary: #202223;
--text-secondary: #6D7175;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
Shopify gray and neutral colors
The quiet part of the Shopify palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shopify WhiteBackground
- HEX
- RGB
- HSL
- Shopify SurfaceSurface
- HEX
- RGB
- HSL
- Shopify BorderBorder
- HEX
- RGB
- HSL
- Shopify TextText
- HEX
- RGB
- HSL
- Shopify SecondarySecondary text
- HEX
- RGB
- HSL
- Shopify MutedMuted text
- HEX
- RGB
- HSL
About Shopify's colors
Shopify's green palette stands out in the e-commerce space, where most platforms default to blue. The green-centric system communicates growth, money, and entrepreneurial success — perfectly aligned with Shopify's merchant-empowerment mission.
Two greens (#96BF48 logo, #008060 Polaris) work together across marketing and product
The transition from yellow-green to teal-green adds depth without introducing new hues
Neutral grays in the Polaris design system keep the admin interface professional
Psychology
Green directly evokes growth, wealth, and fresh starts — the emotional core of entrepreneurship. The specific shade balances optimism (yellow-green) with trustworthiness (teal-green), saying 'your business will grow here.'
Evolution
Shopify's green has evolved significantly: from the bright yellow-green bag logo (#96BF48) to the more sophisticated teal (#008060) in the Polaris design system. This reflects Shopify's maturation from startup to enterprise platform.
Where Shopify uses each color
- Primary
The original Shopify Green (#96BF48) appears in the logo and brand marketing materials.
- Secondary
Dark green (#5E8E3E) provides depth in gradients and secondary brand contexts.
- Accent
Shopify Teal (#008060) powers the Polaris admin interface — buttons, links, and active states.
- Backgrounds
Clean white and light gray surfaces keep the merchant admin uncluttered and data-focused.
- Text
Near-black text (#202223) with cool gray secondaries maintains the professional, trustworthy tone.
- Semantic
The Polaris design system separates semantic colors from brand green, using distinct blue, yellow, and red for info, warning, and error states.
Shopify color questions
Hex codes, RGB values, neutrals and how to use the palette.
Shopify has two signature greens: the classic logo green (#96BF48) used in branding, and Polaris green (#008060) used in the admin interface. The teal-green has become increasingly prominent as the primary digital color.
Polaris is Shopify's open-source design system that provides components, tokens, and guidelines for building merchant experiences. It uses a refined color system centered on teal-green (#008060) with comprehensive semantic colors.
Green was chosen because it directly represents growth, money, and success — the core aspirations of Shopify's merchant audience. It also differentiates Shopify from the blue-heavy SaaS landscape (Stripe, PayPal, Square).
Shopify's primary color is Shopify Green, hex #96BF48 (RGB 150, 191, 72). It is the color used for the logo and the most prominent brand moments.
The secondary color is Shopify Dark Green, #5E8E3E, and the accent is Shopify Teal, #008060. Together with the primary they make up the three brand colors at the top of this page.
Shopify uses #FFFFFF for backgrounds, #F6F6F7 for surfaces and #E1E3E5 for borders. Text runs #202223, #6D7175 and #8C9196 from strongest to most muted.
5 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 Shopify's colors consistently when it generates UI.
Make something in the spirit of Shopify
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.