Ecommerce Color Palette
An ecommerce palette has to step back so the product photos can sell, then step forward at exactly two moments: the add-to-cart button and the sale price.
By Mohamed Farhan · Updated Oct 19, 2026
Ecommerce overview
Revenue grew 12% this week. Three invoices are waiting for approval.
White and soft grey let products shine; a confident orange owns every buy button.
Why these colors work for ecommerce
Neutral surfaces keep photos true to color. A single high-contrast action color trains shoppers where to click. Warm accents (orange, red) create urgency for sales; dark, desaturated palettes signal premium.
Who you are designing for
Online shoppers move fast: they scan grids of products, compare prices and decide in seconds. The palette has to stay out of the way of product photography, guide attention to the add-to-cart button and make prices, discounts and delivery information instantly readable on a small phone screen.
The four ecommerce palettes in detail
Clean Storefront. White and soft grey let products shine; a confident orange owns every buy button. The primary #111111 (close to gunmetal) carries white button labels at 18.9:1, the accent #FF6B1A (close to ochre) handles highlights and badges, and body text #1A1A1A on the #FFFFFF surface reaches 17.4:1, which is AAA for body copy.
Premium Boutique. Warm off-white and deep green for fashion, home and gifts. The primary #1F3B2D (close to gunmetal) carries white button labels at 12.2:1, the accent #C9A66B (close to sand) handles highlights and badges, and body text #1C1C1A on the #FAF8F4 surface reaches 16.1:1, which is AAA for body copy.
Everyday Market. Friendly blue and yellow for marketplaces and everyday essentials. The primary #1E5EFF (close to royal blue) carries white button labels at 5.1:1, the accent #FFC43D (close to mustard yellow) handles highlights and badges, and body text #14171F on the #FFFFFF surface reaches 17.9:1, which is AAA for body copy.
Beauty Counter. Blush and plum for cosmetics and skincare stores. The primary #6B2D5C (close to eggplant) carries white button labels at 9.7:1, the accent #F2A6B3 (close to dusty rose) handles highlights and badges, and body text #2B1B26 on the #FFF8F7 surface reaches 15.6:1, which is AAA for body copy.
What each primary color signals
Each palette leads with a different primary, and each one sends a slightly different message to ecommerce customers. Choosing between them is less about which looks best in isolation and more about which promise you want to make first.
Clean Storefront (#111111). Greys and charcoals feel professional, technical and serious. Blue-tinted greys feel cool and modern; warm greys feel softer. Most interfaces are built mostly from greys. Choosing a tinted grey (slate, charcoal) instead of a flat one gives the whole product a consistent temperature.
Premium Boutique (#1F3B2D). Green reads as growth, health, money and calm. Muted greens feel natural and organic; saturated greens feel fresh and energetic. In interfaces green is already wired to mean success and confirmation, so if you use it as a brand color, pick a different hue (or a much darker shade) for success states so the two never get confused.
Everyday Market (#1E5EFF). Blue is the most trusted color in digital products. It signals stability, competence and calm, which is why banks, SaaS tools and health platforms default to it. Because so many products already use blue, the shade matters more than the hue. Pair it with an unexpected neutral or accent so the interface does not look like every other dashboard.
Beauty Counter (#6B2D5C). Pink ranges from tender and nostalgic (blush, dusty rose) to loud and confident (hot pink). It reads as warm, playful and approachable. Soft pinks work as surface tints and highlights; bold pinks work as a single accent. Avoid pink for error states unless it is clearly a red.
Contrast check
All four palettes at a glance
| Palette | Primary | Accent | Surface | Text | Text contrast |
|---|---|---|---|---|---|
| Clean Storefront | #111111 | #FF6B1A | #FFFFFF | #1A1A1A | 17.4:1 |
| Premium Boutique | #1F3B2D | #C9A66B | #FAF8F4 | #1C1C1A | 16.1:1 |
| Everyday Market | #1E5EFF | #FFC43D | #FFFFFF | #14171F | 17.9:1 |
| Beauty Counter | #6B2D5C | #F2A6B3 | #FFF8F7 | #2B1B26 | 15.6:1 |
Export the Clean Storefront palette
:root {
--color-primary: #111111;
--color-accent: #FF6B1A;
--color-surface: #FFFFFF;
--color-muted: #F2F2F0;
--color-text: #1A1A1A;
}// tailwind.config.js
theme: {
extend: {
colors: {
primary: "#111111",
accent: "#FF6B1A",
surface: "#FFFFFF",
muted: "#F2F2F0",
ink: "#1A1A1A",
},
},
}Using color in ecommerce interfaces
- Use one action color for all primary buttons across the store and nothing else.
- Keep product card backgrounds neutral so photos are not tinted by the UI.
- Show sale prices with both color and a struck-through original price.
- Test your action color on top of product imagery as well as on white.
Avoid using many brand colors on product listing pages. Every colored element competes with the product photos.
Common ecommerce color mistakes
- Tinted product cards. Colored card backgrounds change how product photos look and make color-sensitive products like clothing and cosmetics hard to judge.
- Too many button colors. When 'Add to cart', 'Wishlist', 'Compare' and 'Buy now' all have different bright colors, none of them stands out.
- Sale red everywhere. If red badges appear on every product, shoppers stop noticing real promotions. Reserve the sale color for genuine discounts.
How to build your own ecommerce palette
- Start with one primary. Pick the color that will carry buttons and key actions. For ecommerce, the schemes above use colors like #111111, #1F3B2D, #1E5EFF, #6B2D5C. Check that it reaches at least 4.5:1 with its button label.
- Add one accent. The accent is for highlights, badges and secondary emphasis. It should contrast in hue with the primary, the way #FF6B1A offsets #111111 in Clean Storefront.
- Choose a tinted surface. Instead of pure white, use a surface with a hint of your palette, like #FFFFFF. It reduces glare and makes the brand feel considered.
- Set a muted panel color. A slightly deeper neutral (for example #F2F2F0) separates cards, sidebars and table headers without borders.
- Pick a dark text color, not pure black. A deep, tinted neutral like #1A1A1A keeps text readable while matching the rest of the palette. Then test every pairing against the WCAG contrast guideline.
A dark mode version
To build a dark theme from the Clean Storefront palette, flip the surface and text roles: #1A1A1A becomes the background and #FFFFFF becomes the text, which keeps the same 17.4:1 contrast. Use #FF6B1A for buttons and links, since it reaches 6.1:1 against the dark surface, and lift panels one step lighter than the background instead of adding borders.
Avoid simply inverting every color. Saturated colors look more intense on dark backgrounds, so most dark themes slightly desaturate the accent and reserve the brightest version for small elements like focus rings and active states.
Color across your ecommerce brand
Marketing site. Campaign and landing pages are where brand color can be loud: full-bleed color blocks, seasonal accents and bold headlines. This is where the store's personality lives.
Product or app. Category and product pages should go neutral. Product photos sit on white or off-white, prices are in the text color, and the action color appears only on add-to-cart and checkout.
Emails and print. Order confirmations and shipping emails should mirror the checkout: neutral, readable and with one button in the action color, so customers recognize the brand and find tracking quickly.
Accessibility checklist for ecommerce interfaces
- Body text reaches at least 4.5:1 against its background. In the palettes above, 4 of 4 text and surface pairs meet this out of the box.
- Buttons, inputs and icons reach at least 3:1 against their surroundings, as required by WCAG non-text contrast.
- Status, errors and selections are shown with an icon or label as well as color, following WCAG use of color.
- Focus states are visible on every interactive element, in a color that contrasts with both the surface and the primary.
- Charts and data use colors that remain distinguishable in grayscale, or add patterns and direct labels.
Ecommerce color trends
Many modern stores use near-monochrome interfaces, black or deep green on warm off-white, with a single confident accent for actions. Premium and direct-to-consumer brands lean into brand-specific color for their marketing pages while keeping the shopping grid neutral.
Generate a ecommerce UI in this palette
Inspo AI turns the Clean Storefront palette into a complete, responsive screen grounded in real ecommerce products.
Sources and further reading
- WCAG 2.1: Contrast (Minimum) · The W3C rule behind the 4.5:1 and 3:1 thresholds used on this page.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Tailwind CSS: Customizing colors · How to add a custom color scale to your theme.
Palettes for other industries
Questions people ask
What color should an add to cart button be?
Any color that contrasts strongly with the rest of your palette and is used for nothing else. Orange, green and blue are common because most store palettes are neutral.
What colors increase sales on ecommerce sites?
No single color converts best everywhere. Contrast and consistency matter more: one clear action color, neutral surfaces, and a distinct sale color.
Should an online store use a dark theme?
Dark themes suit luxury, tech and streetwear brands. For most general stores a light, neutral palette keeps product colors accurate.
What background color is best for product photos?
Neutral white or warm off-white keeps product colors accurate. Light grey works for products shot on white backgrounds so they do not blend into the page.
Should sale prices be red?
Red is the most recognized sale color, but pair it with a struck-through original price so the discount is clear without relying on color.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.