Retail Orange Color Palette
An energetic orange palette for e-commerce and retail brands. Conveys friendliness, value, and call-to-action urgency.
Deep Orange
HEX: #7c2d12
RGB: rgb(124, 45, 18)
HSL: hsl(15, 75%, 28%)
Retail Dark
HEX: #c2410c
RGB: rgb(194, 65, 12)
HSL: hsl(17, 88%, 40%)
Retail Orange
HEX: #f97316
RGB: rgb(249, 115, 22)
HSL: hsl(25, 95%, 53%)
Light Orange
HEX: #fdba74
RGB: rgb(253, 186, 116)
HSL: hsl(31, 97%, 72%)
Orange Surface
HEX: #fed7aa
RGB: rgb(254, 215, 170)
HSL: hsl(32, 98%, 83%)
CSS Variables
:root {
--retail-orange-1: #7c2d12;
--retail-orange-2: #c2410c;
--retail-orange-3: #f97316;
--retail-orange-4: #fdba74;
--retail-orange-5: #fed7aa;
}Tailwind CSS Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'retail-orange': {
'100': '#7c2d12',
'200': '#c2410c',
'300': '#f97316',
'400': '#fdba74',
'500': '#fed7aa',
},
},
},
},
}Use Cases
E-commerce sites
Retail brands
Flash sale pages
Coupon platforms
Related Palettes
Frequently Asked Questions
Why is orange effective for e-commerce?▾
Orange combines the urgency of red with the friendliness of yellow. Amazon, Shopify, and Etsy use orange for CTAs because it drives clicks without being aggressive.
Should I use orange as my primary brand color?▾
Orange works well as a primary color for energetic, consumer-facing brands. For more professional contexts, use it as an accent to highlight CTAs and promotional elements.