industryColor Scheme

Ecommerce Luxury

A luxurious ecommerce palette featuring deep backgrounds and gold accents. Designed for premium brands and high-end product showcases.

#18181b
#fafafa
#fcd34d
#94a3b8
#f43f5e

Color Breakdown

Role

background

Name

Zinc 900

Hex

#18181b

Tailwind

bg-zinc-900

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Amber 300

Hex

#fcd34d

Tailwind

text-amber-300

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Rose 500

Hex

#f43f5e

Tailwind

bg-rose-500

Live Preview

Welcome Back

This is a live preview of the Ecommerce Luxury color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Dark backgrounds with gold tones create an unmistakable luxury feel. Rose accents add sophistication for featured items and call-to-action elements.

Use Cases

Luxury fashion storesJewelry brandsPremium product pages

CSS Variables

CSS
:root {
  --background: #18181b;
  --surface: #fafafa;
  --primary: #fcd34d;
  --secondary: #94a3b8;
  --accent: #f43f5e;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ecommerce-luxury': {
  'background': '#18181b',  // bg-zinc-900
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#fcd34d',  // text-amber-300
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#f43f5e',  // bg-rose-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How do dark backgrounds enhance luxury perception?
Dark backgrounds create contrast that makes products stand out and evoke exclusivity, similar to high-end retail displays.