Palette

Midnight Orchid Bloom

Captures the exotic beauty of orchids under a starlit sky, mysterious and captivating.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Orchid Bloom 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 Orchid Bloom.

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

Data visualization

#4B0082#2F4F4F#FF00FF#E0B0FF#36454F

Palette guide

How to use Midnight Orchid Bloom

Overview

The Midnight Orchid Bloom palette is a captivating blend of deep, mystical purples and grounding blue-greys, punctuated by a vibrant magenta. Featuring the rich #4B0082, the muted #2F4F4F and #36454F, and the striking #FF00FF and #E0B0FF, this palette offers designers and developers a truly unique and elegant spectrum. It's perfectly suited for projects that aim to combine sophistication with a touch of exotic flair, evoking the rare beauty of orchids under a starlit sky. The magenta provides a powerful focal point, while the dark purples and cool greys offer a balanced, luxurious foundation for any design.

Best used for

Artistic and creative portfolio websites
Boutique fashion and accessories branding
Unique event invitations and digital collateral
Luxury floral design and florists' websites
Digital art and illustration projects
Beauty and cosmetic product marketing

Suggested color roles

primary

Use #4B0082 as the dominant, rich purple for main content areas or a deep background.

secondary

Employ #2F4F4F and #36454F for grounding elements, secondary backgrounds, or subtle details to balance the vibrancy.

accent

Apply #FF00FF for high-impact calls to action, key graphics, or to draw immediate attention to specific elements.

background

Choose #36454F for a subtle, cool dark background that allows the purple and magenta to truly bloom.

text

For readability, use #E0B0FF for headings, and a clean white or light gray for body text against the darker shades.

Accessibility notes

Ensure #FF00FF has sufficient contrast against #2F4F4F and #36454F for text or interactive elements.
The dark purples and blue-greys require light text (e.g., #E0B0FF or white) for optimal readability.
Avoid using #2F4F4F on #36454F for small text due to their close proximity in lightness.
Test color pairings for contrast, especially when using #FF00FF, to avoid visual fatigue.

Recommended combinations

Vivid Contrast

For bold statements, with #FF00FF as a striking focal point against a dark, cool background.

#36454F · #FF00FF · #E0B0FF

Muted Harmony

Creates a sophisticated, blended background or layered content, balancing cool and warm darks.

#2F4F4F · #36454F · #4B0082

Orchid Drama

Ideal for a dramatic and elegant presentation, highlighting key visuals with vibrant magenta.

#4B0082 · #FF00FF · #E0B0FF

CSS variables

:root {
  --midnight-orchid-bloom-2-1: #4B0082;
  --midnight-orchid-bloom-2-2: #2F4F4F;
  --midnight-orchid-bloom-2-3: #FF00FF;
  --midnight-orchid-bloom-2-4: #E0B0FF;
  --midnight-orchid-bloom-2-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-orchid-bloom-2": {
        1: "#4B0082",
        2: "#2F4F4F",
        3: "#FF00FF",
        4: "#E0B0FF",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#2F4F4F

Color 3#FF00FF

Color 4#E0B0FF

Color 5#36454F

Accessibility

Contrast checker

1.5:1Fail

4.1:1AA18

7.3:1AAA

1.3:1Fail

1.5:1Fail

2.8:1Fail

5:1AA

1.1:1Fail

4.1:1AA18

2.8:1Fail

1.8:1Fail

3.2:1AA18

7.3:1AAA

5:1AA

1.8:1Fail

5.6:1AA

1.3:1Fail

1.1:1Fail

3.2:1AA18

5.6:1AA

Similar palettes

More like Midnight Orchid Bloom

View all Dark

Velvet Opera Night

Amethyst Star Cluster

Deep Space Orchid

Frosted Grape Arbor

Imperial Gemstone Array

Midnight Velvet Aura