Shopify colors
The Shopify color palette has 4 colors: Shopify green #95BF47, Shopify dark green #5E8E3E, Shopify UI green #008060 and Text dark #18181B. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from official guidelines checked on 16 October 2026.
Shopify color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Shopify green | Primary | #95BF47 | rgb(149, 191, 71) | hsl(81, 48%, 51%) | oklch(75% 0.155 126.3) |
| Shopify dark green | Secondary | #5E8E3E | rgb(94, 142, 62) | hsl(96, 39%, 40%) | oklch(59.4% 0.123 134.5) |
| Shopify UI green | Accent | #008060 | rgb(0, 128, 96) | hsl(165, 100%, 25%) | oklch(53.3% 0.108 167.7) |
| Text dark | Text | #18181B | rgb(24, 24, 27) | hsl(240, 6%, 10%) | oklch(21% 0.006 285.9) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Shopify colors come from
These hex values are published by Shopify in its own brand guidelines. We fetched the page on 16 October 2026 and copied the values exactly; nothing here is estimated from a logo image.
- Source: https://www.shopify.com/brand-assets checked 2026-10-16
- Also: https://cdn.shopify.com/shopifycloud/brochure/assets/brand-assets/shopify-logo-shopping-bag-full-color-66166b2e55d67988b56b4bd28b63c271e2b9713358cb723070a92bde17ad7d63.svg checked 2026-10-16
Shopify color contrast
Black text on Shopify green has a contrast ratio of 9.82:1 and passes WCAG AAA for any text size. Used as a text color, Shopify green reaches 2.13:1 on white and 9.82:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Shopify green | 2.13:1 | Fails | Lc -46.5 | Large or bold text, headings |
| Black on Shopify green | 9.82:1 | AAA | Lc 62.1 | Content text, not long reading |
| White on Shopify dark green | 3.87:1 | AA large text | Lc -71.6 | Content text, not long reading |
| Black on Shopify dark green | 5.41:1 | AA | Lc 38.0 | Non-text elements, placeholder text |
| White on Shopify UI green | 4.93:1 | AA | Lc -79.0 | Fine for body text |
| Black on Shopify UI green | 4.25:1 | AA large text | Lc 30.5 | Non-text elements, placeholder text |
| White on Text dark | 17.71:1 | AAA | Lc -106.7 | Preferred for body text |
| Black on Text dark | 1.18:1 | Fails | Lc 0.0 | Not readable |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Text dark on Shopify green | 8.28:1 | AAA | Lc 60.6 | Content text, not long reading |
| Text dark on Shopify dark green | 4.56:1 | AA | Lc 36.5 | Non-text elements, placeholder text |
| Text dark on Shopify UI green | 3.59:1 | AA large text | Lc 29.0 | Dividers and decoration only |
| Shopify UI green on Shopify green | 2.30:1 | Fails | Lc 29.6 | Dividers and decoration only |
Shopify colors in CSS and Tailwind
Copy the Shopify palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Shopify green, for hover states, borders and tinted backgrounds.
:root {
--shopify-green: #95BF47;
--shopify-dark-green: #5E8E3E;
--shopify-ui-green: #008060;
--shopify-text-dark: #18181B;
}@import "tailwindcss";
@theme {
--color-shopify-green: #95BF47;
--color-shopify-dark-green: #5E8E3E;
--color-shopify-ui-green: #008060;
--color-shopify-text-dark: #18181B;
}@theme {
--color-shopify-50: #F3F7EE;
--color-shopify-100: #E5EEDA;
--color-shopify-200: #D0E0BA;
--color-shopify-300: #B1CC87;
--color-shopify-400: #95BF47;
--color-shopify-500: #709A00;
--color-shopify-600: #5E8100;
--color-shopify-700: #4E6C00;
--color-shopify-800: #405900;
--color-shopify-900: #344A00;
--color-shopify-950: #1E2C00;
}Named colors closest to the Shopify palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Shopify green | #95BF47 | Pea | #A4BF20 | 0.026 |
| Shopify dark green | #5E8E3E | Moss Green | #658B38 | 0.011 |
| Shopify UI green | #008060 | Jungle Green | #048243 | 0.043 |
| Text dark | #18181B | Rich Black | #0D1B2A | 0.032 |
Palettes like Shopify
Curated palettes that include a color close to Shopify green #95BF47.
How to use a Shopify-style palette
- Lead with Shopify green #95BF47 for buttons, links and key highlights, with black text on it.
- Give most of the layout to Text dark #18181B, about 60% of the screen, so Shopify green stands out.
- Keep Shopify dark green and Shopify UI green for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Shopify green reaches 2.13:1: it fails WCAG 2 for text there, so keep it for icons, fills and borders.
To see how www.shopify.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Shopify green into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Google colors#4285F4 #EA4335 #FBBC05 #34A853
- Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
- T-Mobile colors#E20074 #A7005A #770141 #000000
- Microsoft colors#F25022 #7FBA00 #00A4EF #FFB900
- Figma colors#FF3737 #FF7237 #874FFF #00B6FF
- Trello colors#0052CC #2684FF #253858
- Duolingo colors#58CC02 #1CB0F6 #FF4B4B #FFC800
- Dropbox colors#0061FE #1E1919 #F7F5F2 #14C8EB
- GitHub colors#0FBF3E #101411 #F2F5F3 #909692
- Slack colors#4A154B #E01E5A #36C5F0 #2EB67D
- Notion colors#000000 #0075DE #191918 #FFB110
- Linear colors#5E6AD2 #7170FF #F4F5F8 #222326
Trademarks
Frequently asked questions
What is the Shopify hex color?
The main Shopify color is Shopify green #95BF47, which is rgb(149, 191, 71) in RGB. It comes from Shopify's own brand guidelines, checked on 16 October 2026.
What colors does Shopify use?
Shopify uses 4 core colors: Shopify green #95BF47, Shopify dark green #5E8E3E, Shopify UI green #008060 and Text dark #18181B.
What is Shopify green in RGB, HSL and OKLCH?
Shopify green #95BF47 is rgb(149, 191, 71), hsl(81, 48%, 51%) and oklch(75% 0.155 126.3). The closest named color is Pea #A4BF20.
Should text on Shopify green be white or black?
Black text reads better on Shopify green: it has a contrast ratio of 9.82:1, which passes WCAG AAA for any text size.
Where do these Shopify colors come from?
The hex values were read from Shopify's official brand guidelines at https://www.shopify.com/brand-assets on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Shopify colors in my own design?
Colors on their own are not owned, but Shopify's name, logo and the way it combines its colors are trademarks. Use these values to match Shopify when you refer to it, follow its official guidelines, and do not imply a link to Shopify in your own brand.
Use the Shopify colors
Check www.shopify.com live, build a color system from Shopify green, or remix the palette.