Palette

Nocturne Orchid

A deep, enchanting array inspired by rare orchids blooming under a moonlit, mystical night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C0D3E#4E1A61#7A2E9B#AB4AD4#D08EE9

Palette guide

How to use Nocturne Orchid

Overview

The Nocturne Orchid palette is a deep, enchanting array inspired by rare orchids blooming under a moonlit, mystical night sky. This captivating collection features a spectrum of purples, starting with the profound #2C0D3E, progressing through the rich #4E1A61 and the vibrant #7A2E9B. A luminous #AB4AD4 provides a striking, almost electric accent, beautifully softened by the ethereal #D08EE9. Designers can leverage this palette to create luxurious, magical, or deeply feminine interfaces, ideal for high-end fashion, fantasy gaming, or any project aiming for a blend of dramatic depth and whimsical allure.

Best used for

Luxury fashion and beauty brands
Fantasy gaming interfaces and art
Mystical or spiritual content
Creative portfolios with a dramatic flair
Elegant event branding
Dark mode UIs with a vibrant purple theme

Suggested color roles

primary

Use #2C0D3E as the deepest, most mysterious shade, ideal for dominant backgrounds, headers, or elements requiring significant depth.

secondary

Apply #4E1A61 as a rich, mid-tone purple perfect for navigation, card backgrounds, or secondary content areas.

accent

Utilize #AB4AD4, a bright, electric purple that demands attention, excellent for call-to-action buttons, interactive states, or key highlights.

background

Employ #D08EE9 as a soft, ethereal lavender that can serve as a clean main background, especially for content-heavy sections, or for subtle highlights.

text

Choose #7A2E9B as a vibrant purple, suitable for darker text on lighter backgrounds or as a contrasting secondary text color. For light text on dark colors, a near-white is recommended.

Accessibility notes

Ensure #D08EE9 text on #2C0D3E or #4E1A61 backgrounds meets contrast standards for readability.
#AB4AD4 as text on #D08EE9 might lack sufficient contrast for small font sizes; check carefully.
Avoid using #7A2E9B for small text on backgrounds like #D08EE9 without checking contrast.
Prioritize strong contrast for critical information and interactive elements to ensure readability for all users.

Recommended combinations

Mystical Bloom

Dramatic dark base with a vibrant accent and a soft highlight for luxurious, captivating designs.

#2C0D3E · #AB4AD4 · #D08EE9

Enchanted Petal

Harmonious blend of purples with a light accent, suitable for content areas and subtle branding.

#4E1A61 · #7A2E9B · #D08EE9

Orchid Glow

Strong base with a luminous background and a powerful accent, ideal for striking visual hierarchy.

#2C0D3E · #D08EE9 · #AB4AD4

CSS variables

:root {
  --nocturne-orchid-1: #2C0D3E;
  --nocturne-orchid-2: #4E1A61;
  --nocturne-orchid-3: #7A2E9B;
  --nocturne-orchid-4: #AB4AD4;
  --nocturne-orchid-5: #D08EE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturne-orchid": {
        1: "#2C0D3E",
        2: "#4E1A61",
        3: "#7A2E9B",
        4: "#AB4AD4",
        5: "#D08EE9",
      }
    }
  }
}

Hex values

Color 1#2C0D3E

Color 2#4E1A61

Color 3#7A2E9B

Color 4#AB4AD4

Color 5#D08EE9

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

3.8:1AA18

7.1:1AAA

1.3:1Fail

1.6:1Fail

2.8:1Fail

5.3:1AA

2.2:1Fail

1.6:1Fail

1.7:1Fail

3.2:1AA18

3.8:1AA18

2.8:1Fail

1.7:1Fail

1.9:1Fail

7.1:1AAA

5.3:1AA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Nocturne Orchid

View all dark

Midnight Bloom Shadow