Palette

Midnight Bazaar

Rich, enigmatic purples and indigos capture the allure and deep shadows of an exotic night market.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Bazaar reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Midnight Bazaar.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#1F0033#3A1A4C#5E3778#8C5DAE#BF95D6

Palette guide

How to use Midnight Bazaar

Overview

The Midnight Bazaar palette captures the deep allure and enigmatic shadows of an exotic night market. Anchored by the profound #1F0033, a nearly black indigo, it gradually lightens through rich purples like #3A1A4C and #5E3778. The palette culminates in softer, yet still mysterious, shades such as #8C5DAE and #BF95D6, which evoke distant lights or veiled details. This collection of deep purples and indigos is perfect for designers and developers seeking to create sophisticated, mysterious, and immersive digital environments, luxury branding, or atmospheric game interfaces. It offers a strong, elegant foundation for designs that require depth and a touch of the unknown.

Best used for

Luxury brand identity
High-end event invitations
Dark mode UI/UX designs
Themed gaming interfaces
Mystical or fantasy book covers
Art gallery or museum digital presence

Suggested color roles

primary

#1F0033 (A very deep indigo, serving as the core background or dominant color for a sophisticated, dark aesthetic.)

secondary

#3A1A4C (A rich, dark purple, suitable for major sections, panels, or prominent graphic elements, adding depth to the primary.)

accent

#BF95D6 (The lightest purple, ideal for subtle highlights, interactive states, or delicate illustrations that need to stand out gently.)

background

#1F0033 (Utilize this profound shade for an immersive, elegant backdrop, ensuring all lighter elements have excellent contrast.)

text

#BF95D6 or #8C5DAE (For body text, #BF95D6 provides good contrast. For headings, #8C5DAE can offer a softer, yet still readable, option on dark backgrounds.)

Accessibility notes

Ensure sufficient contrast between #BF95D6 text and darker backgrounds like #1F0033 or #3A1A4C.
Avoid using #5E3778 as body text on #3A1A4C due to low contrast.
Use the lighter shades (#8C5DAE, #BF95D6) for interactive elements to ensure they are perceivable.
Consider a slightly off-white text for critical information if the palette's lightest color doesn't meet WCAG AA standards.

Recommended combinations

Deep Mystery

Excellent for main layouts where a strong dark base is complemented by mid-tone sections and subtle bright accents.

#1F0033 · #5E3778 · #BF95D6

Shadow Play

Ideal for creating depth in UI elements or illustrations, with shadows and highlights from within the palette.

#3A1A4C · #8C5DAE · #1F0033

Elegant Veil

Suited for decorative patterns, borders, or secondary content areas that require a touch of refined elegance.

#5E3778 · #BF95D6 · #3A1A4C

CSS variables

:root {
  --midnight-bazaar-1: #1F0033;
  --midnight-bazaar-2: #3A1A4C;
  --midnight-bazaar-3: #5E3778;
  --midnight-bazaar-4: #8C5DAE;
  --midnight-bazaar-5: #BF95D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-bazaar": {
        1: "#1F0033",
        2: "#3A1A4C",
        3: "#5E3778",
        4: "#8C5DAE",
        5: "#BF95D6",
      }
    }
  }
}

Hex values

Color 1#1F0033

Color 2#3A1A4C

Color 3#5E3778

Color 4#8C5DAE

Color 5#BF95D6

Accessibility

Contrast checker

1.3:1Fail

2.1:1Fail

3.9:1AA18

7.7:1AAA

1.3:1Fail

1.6:1Fail

3:1Fail

5.9:1AA

2.1:1Fail

1.6:1Fail

1.9:1Fail

3.7:1AA18

3.9:1AA18

3:1Fail

1.9:1Fail

2:1Fail

7.7:1AAA

5.9:1AA

3.7:1AA18

2:1Fail

Similar palettes

More like Midnight Bazaar