moodColor Scheme

Luxurious Premium

A luxurious palette with rich dark backgrounds and gold accents. Every color choice reinforces exclusivity and premium positioning.

#18181b
#0f172a
#fcd34d
#94a3b8
#fb7185

Color Breakdown

Role

background

Name

Zinc 900

Hex

#18181b

Tailwind

bg-zinc-900

Role

surface

Name

Slate 900

Hex

#0f172a

Tailwind

bg-slate-900

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 400

Hex

#fb7185

Tailwind

bg-rose-400

Live Preview

Welcome Back

This is a live preview of the Luxurious Premium 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 text create unmistakable luxury and exclusivity. Rose accents add a jewel-like quality that reinforces the premium positioning.

Use Cases

Luxury brand sitesVIP membership portalsPremium subscription pages

CSS Variables

CSS
:root {
  --background: #18181b;
  --surface: #0f172a;
  --primary: #fcd34d;
  --secondary: #94a3b8;
  --accent: #fb7185;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'luxurious-premium': {
  'background': '#18181b',  // bg-zinc-900
  'surface': '#0f172a',  // bg-slate-900
  'primary': '#fcd34d',  // text-amber-300
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#fb7185',  // bg-rose-400
        },
      },
    },
  },
};

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 does color convey luxury?
Dark backgrounds with metallic gold accents mimic the look of premium packaging and high-end retail environments.