E-commerce Color Palette

Neutral storefront chrome with a high-visibility orange CTA and a green trust badge — checkout-friendly contrast throughout. Anchors: #111827, #F97316, #FFFFFF, #059669.

ecommerceretailcta
#111827
#F97316
#FFFFFF
#059669
#8B8D96
#111827 #f97316 #ffffff #059669 #8b8d96
#111827 #F97316 #FFFFFF #059669 #8B8D96

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#FFFFFF
surface#F97316
text#111827
text-muted#059669
primary#059669
secondary#F97316
accent#8B8D96

CSS variables 

:root {
  --background: #ffffff;
  --surface: #f97316;
  --text: #111827;
  --text-muted: #059669;
  --primary: #059669;
  --secondary: #f97316;
  --accent: #8b8d96;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#111827#F97316#FFFFFF#059669#8B8D96
#111827
1.0
6.3
17.7
4.7
5.4
#F97316
6.3
1.0
2.8
1.3
1.2
#FFFFFF
17.7
2.8
1.0
3.8
3.3
#059669
4.7
1.3
3.8
1.0
1.1
#8B8D96
5.4
1.2
3.3
1.1
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#111827
rgb(17, 24, 39)
#F97316
rgb(249, 115, 22)
#FFFFFF
White
#059669
rgb(5, 150, 105)
#8B8D96
rgb(139, 141, 150)

Similar palettes

Minimal Color Palette
White Color Palette
Website Color Palette

FAQ

How do I use the e-commerce color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #111827, #F97316, #FFFFFF, #059669, #8B8D96.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.