Why your color palette matters for e-commerce
Color drives roughly 85% of purchase decisions according to a widely cited Loyola University study, and almost no other brand asset compounds the way a palette does. Customers may not be able to recall your tagline or your founder's name. They'll recognize your color from across a coffee shop. In e-commerce, palette is the visual equivalent of a logo for the already-converted and a billboard for the not-yet-converted.
Three forces make this especially true online:
- Recognition: palette is the fastest brand cue a customer encounters on a feed, a search results page, or a product roundup. Customers scroll past names; they stop on colors.
- Quality tier: palette telegraphs price. Saturated neons read budget; dialed-back earth tones read premium; near-monochrome reads luxury. Pick the tier you want to compete in and let your palette do half the work.
- Conversion: button contrast directly affects click-through rates. Inaccessible palettes don't just hurt customers with low vision — they hurt every customer in bright sunlight or on a dim airplane screen. WCAG AA is the floor.
And palette doesn't live in isolation. Pair your colors with a name that matches the vibe, a brand voice that sounds the way the colors look, and an origin story that explains why the brand exists — and your visual system stops feeling assembled and starts feeling inevitable.
5 e-commerce color palettes that actually work
Five brands whose palettes have done the hardest work in branding: become recognizable from a single swatch. Hex codes below are illustrative of each brand's public visual system.
Glossier
DTC beauty for the millennial best-friend energy.
Glossier built a near-monochromatic system around a single signature pink. The constraint is the design — almost no other accent color is allowed to compete with it.
Aesop
Australian skincare with a literature degree.
Aesop refuses bright. The whole system is dialed-back amber, brown, and cream — a deliberate rejection of skincare's neon arms race.
Liquid Death
Canned mountain water dressed like a punk band.
Black, silver, and an aggressive red. Liquid Death's palette would feel out of place on any other water brand — and that misalignment is exactly the point.
Bombas
Comfort socks that donate one for every pair sold.
Honeycomb yellow, black, and warm cream — the bee motif baked into the palette. The yellow does so much heavy lifting that they barely need a secondary accent.
Allbirds
Wool sneakers from New Zealand.
Earth-led naturals: oat, sage, and a soft denim blue. The palette telegraphs the materials before a single sentence of copy explains them.
Notice the pattern. Each palette commits — to a single color, to a single mood, to a single tier. Strong palettes are made of concessions: every other color the brand could have used and chose not to.
How to choose your brand color palette in 5 steps
The framework is more useful than any template. If you have an hour and the tool above, you can finish all five steps before dinner.
Start with a vibe, not a color
Most teams start by picking a favorite color, then trying to build a palette around it. That's backwards. Start by writing 2-3 words describing the feeling — 'coastal slow', 'brutalist bakery', 'wabi-sabi quiet'. The vibe constrains every color choice that follows. Vibe-first palettes are coherent. Color-first palettes are accidents.
Pick a primary that feels ownable
Look at your category. If every competitor uses muted earth tones, your primary should NOT be a muted earth tone — even if it's the safest choice. Ownability comes from being the brand a customer can describe in one color word. 'The pink one'. 'The yellow one'. 'The all-black one'. Become a color word.
Build supporting roles with contrast in mind
Once you have a primary, fill the four supporting roles — secondary, accent, background, text. Don't pick them by intuition. Pick them by relationship to primary: warmer, cooler, lighter, darker. The five colors should look like a family, not a focus group.
Test at WCAG AA minimum, AAA where possible
Body text on background must hit 4.5:1 contrast — the WCAG AA threshold. Aim for 7:1 (AAA) on critical reading surfaces. Failing contrast hurts customers with low vision and erodes conversion (yes, accessibility and conversion correlate). The Color Palette Generator above shows you the contrast badges automatically.
See your palette in context before committing
Colors lie in a swatch. They tell the truth on a page. Before locking a palette, view it on a button, a product card, a hero, and a piece of long body copy. The Live Store Preview above does this in real time — every change updates the mockup. If the palette stops feeling right in context, change it before you ship anything.
Or skip the work and use the free tool above — three palettes, WCAG-checked, with a live store preview, in 30 seconds.
Color palette mistakes to avoid
Five mistakes that quietly turn a good palette into a forgettable one — in roughly the order founders make them.
Picking colors you 'love' without testing on UI
The color that looks beautiful in a moodboard often looks wrong on a button. Always test palettes against actual interface elements — hero, button, product card, body text — before committing. Beauty in isolation is not the same as beauty in context.
Ignoring contrast
Low-contrast text isn't just an accessibility issue — it's a conversion issue. Customers who have to squint don't convert. WCAG AA is not a high bar; it's a basic requirement. Hit it everywhere body text appears.
Too many colors
More than five colors and the brand stops being recognizable. The instinct to add 'just one more' tone is almost always wrong. Constraint is what makes a palette feel like a system instead of a watercolor set.
Following category convention
Every skincare brand uses earth tones. Every wellness brand uses sage and terracotta. Every coffee brand uses warm browns. If your palette could be lifted onto any competitor without anyone noticing, it isn't yours. Be the exception.
Choosing trendy over timeless
The brat-summer green will fade. The Y2K chrome will fade. The lowercase-everything pink will fade. Trends are seasonal; brand systems run for years. Pick colors that won't make you cringe when you look at them in 2030.
Color palette FAQ
How many colors should a brand palette have?
Five is the sweet spot, organized by role: primary, secondary, accent, background, and text. Smaller systems feel underbuilt. Larger systems get messy and lose recognition. The palettes generated above always commit to five.
What's the difference between primary and accent colors?
The primary is the color customers will associate with the brand. It dominates buttons, navigation, and key surfaces. The accent is a high-energy supporting color used sparingly — for highlights, badges, and the moments you want a customer's eye to land. If everything is the accent, nothing is.
How do I make my color palette accessible?
Hit WCAG AA contrast (4.5:1) for body text on background, and ideally AAA (7:1) for critical reading surfaces. Avoid relying on color alone to convey state — pair red error states with an icon, for instance. The contrast badges in the tool above flag any combo that fails.
Do I need different palettes for light and dark mode?
If you support dark mode, yes. The simplest approach is to invert the background and text roles, then re-tune the primary and accent for the new background. The five role assignments stay the same — only the values shift. Most starter brands ship light-mode-only and add dark mode later.
Can I use AI-generated colors for my real brand?
Absolutely. The Color Palette Generator outputs production-ready hex codes. Use them in your store, your logo, your packaging — wherever. Treat the AI output as a confident first draft you can ship as-is or refine. Many founders adopt the generated palette directly.
How do I export my palette to Figma, Canva, or my store?
Use the 'Export CSS' button — it downloads a .css file with custom properties for each role (--color-primary, --color-secondary, etc.). Most design tools (Figma, Canva, Webflow, Shopify) accept hex codes directly; just copy the values from the swatches. The Copy button copies all five hex codes at once.
Should my logo color be in my palette?
Almost always yes — your logo color is usually the primary. If you've already designed the logo, plug its hex into the locked-color slot above and let the tool generate the other four roles around it. That keeps the logo as the anchor of the system.
What's a good starter palette for a minimalist brand?
Black or deep ink as text, near-white or warm cream as background, one muted color as primary, one slightly warmer or cooler tone as secondary, and one small pop of accent for buttons and highlights. Restraint is the design. Generate a few minimalist vibes above to see what this looks like.