Ecommerce Website Color Palettes
Color palettes for ecommerce stores, product pages, and online shops. Conversion-focused palettes with Tailwind and CSS exports.
Ecommerce color design is conversion science. Every color decision from your add-to-cart button to your sale badge to your trust signals affects your conversion rate. The right palette does not just look good, it actively guides users toward purchase decisions.
The most successful ecommerce palettes share a single characteristic: clarity. Product pages work best when the product is the visual hero and the UI chrome steps back. This means clean, neutral backgrounds (white, light grey, warm off-white), high-contrast text hierarchy, and a single strong accent color reserved exclusively for conversion actions, add to cart, buy now, save, so users always know where to click next.
The choice of accent color for your primary CTA is the most consequential color decision in ecommerce. Research consistently shows that button color alone can move conversion rates 5–20%, with the biggest gains coming from colors that are highly visible (high contrast against surrounding white space), unexpected (not camouflaged by your brand color), and associated with action (orange, green, and coral have the strongest generic conversion performance, but the best color is always the one that contrasts most strongly in your specific design).
Your brand color palette still matters enormously for building the emotional context in which purchase decisions are made. A luxury fashion ecommerce site needs its palette to communicate exclusivity. A kids' clothing store needs warmth and joy. A sports equipment store needs energy and confidence. These emotional palettes create the purchase context; the CTA colors close the deal.
Curated collection
Best Ecommerce Website Color Palettes
Product Page Color Hierarchy
On a product page, color hierarchy serves the following priority order: product image (must be the visual dominant), price and availability (must be highly legible), primary CTA (must be the highest-contrast action element), secondary actions (add to wishlist, compare), and supporting information (reviews, specifications, shipping).
Product photography considerations: most ecommerce product photos are shot on white, grey, or transparent backgrounds. Your page background must be compatible. White product photos on white backgrounds look seamless and professional. If your brand palette uses a warm cream or light color as the page background, ensure your product photo backgrounds match, grey-tinted product photo on a warm cream page looks jarring.
Price color is underrated in ecommerce. Default black or dark grey for the current price is standard and trusted. Sale prices shown in red or a bright accent color create urgency and draw the eye. "Was" prices in muted grey provide context without competing for attention. This three-color price hierarchy (current/sale/original) should be consistent across every product page in your store.
Trust signals, security badges, review counts, payment icons, return policy icons, benefit from subtle green tones that communicate safety and reliability without overwhelming the product. Avoid using your primary accent color for trust signals if it is also your CTA color; they will compete visually.
Sale and Promotional Color Usage
Sale events, promotions, and scarcity signals (limited stock, time-limited offers) use color as an urgency and attention mechanism. Getting these colors right dramatically improves click-through on sale items and time-sensitive offers.
Red for sale is a near-universal convention, and for good reason, red creates urgency and attention even in peripheral vision. But the specific red matters: a bright, fully saturated red (#FF0000) looks cheap and generic; a deeper, desaturated red (#CC0000 to #C0392B) reads as more credible and intentional.
For creating urgency, bright amber and warm orange (#F97316 to #EF6C00) are effective alternatives to red for sale badges, particularly for brands that already use red in their primary palette and need to differentiate sale elements.
Limited stock indicators ("Only 3 left!") are most effective in a distinct color from your regular price and CTA colors, amber or orange, which communicates caution and urgency without the same alarm level as red. This creates a clear visual hierarchy: normal price (dark), sale price (red), stock alert (amber), CTA button (brand accent).
Never use your primary brand color for sale badges or urgency indicators. These elements need to stand out from the brand environment rather than blend into it. Their job is to interrupt the browsing flow and create action, to reinforce brand identity.
CSS & Tailwind Usage
CSS Variables
:root {
--bg-page: '#FFFFFF';
--bg-surface: '#F9FAFB';
--text-primary: '#111827';
--text-secondary: '#6B7280';
--price-current: '#111827';
--price-sale: '#DC2626';
--price-original: '#9CA3AF';
--cta-primary: '#F97316';
--cta-primary-hover: '#EA580C';
--badge-sale: '#DC2626';
--badge-new: '#2563EB';
--badge-stock: '#D97706';
--trust-signal: '#16A34A';
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
store: {
cta: '#F97316',
sale: '#DC2626',
new: '#2563EB',
stock: '#D97706',
trust: '#16A34A',
},
},
},
},
}Free Tools for This Use Case
Frequently Asked Questions
What color should the Add to Cart button be?
A color that contrasts maximally against your product page background and is not used for any other element. Orange, green, and coral are the highest-performing generic CTA colors, but the best color is always the one with the highest contrast in your specific design. Test with the Contrast Checker for 4.5:1 minimum ratio.
Should ecommerce sale prices be shown in red?
Red for sale prices is the strongest convention and performs best because of its deep psychological association with urgency and value. If your brand already uses red prominently, use a deeper or differently saturated red for sale prices so they remain distinct. Amber and orange are effective alternatives.
How do I choose a color palette for an online store?
Start with a neutral white or light grey system that showcases product photography without competing. Choose one strong accent color for all primary CTAs (add to cart, checkout, buy now). Then define your brand palette for structural identity elements (header, footer, brand moments). These can overlap, the accent CTA color can be your brand primary, but only if that color has no other heavy use on the page.
What colors build trust in ecommerce?
Blue is the strongest trust color in ecommerce, which is why most payment icons (Visa, PayPal, secure checkout badges) use it. Green signals safety and positive confirmation (order confirmed, in stock, secure). White and light grey backgrounds signal cleanliness and transparency. Avoid cluttering trust-signal areas with bright or saturated colors, restraint communicates confidence.
Related Use Cases
Looking for more? Browse all color palettes or check our free color tools.