industryColor Scheme

Music Creative

A creative music palette with deep purples and vibrant pink accents. Designed for music streaming, artist pages, and event platforms.

#020617
#0f172a
#d946ef
#94a3b8
#ec4899

Color Breakdown

Role

background

Name

Slate 950

Hex

#020617

Tailwind

bg-slate-950

Role

surface

Name

Slate 900

Hex

#0f172a

Tailwind

bg-slate-900

Role

primary

Name

Fuchsia 500

Hex

#d946ef

Tailwind

text-fuchsia-500

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Pink 500

Hex

#ec4899

Tailwind

bg-pink-500

Live Preview

Welcome Back

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

Design Rationale

Fuchsia on dark backgrounds creates a vibrant, nightlife-inspired atmosphere. Pink accents maintain the creative energy for interactive elements.

Use Cases

Music streaming appsArtist portfolio pagesConcert event sites

CSS Variables

CSS
:root {
  --background: #020617;
  --surface: #0f172a;
  --primary: #d946ef;
  --secondary: #94a3b8;
  --accent: #ec4899;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'music-creative': {
  'background': '#020617',  // bg-slate-950
  'surface': '#0f172a',  // bg-slate-900
  'primary': '#d946ef',  // text-fuchsia-500
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#ec4899',  // bg-pink-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

Why do music platforms use dark themes?
Dark themes reduce eye strain during extended listening sessions and create an immersive, concert-like visual experience.