Palette

Nocturnal Garden Bloom

Dark, enchanting blues and purples of flowers blooming under the moonlit sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nocturnal Garden 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 Nocturnal Garden Bloom.

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

Data visualization

#1A1A2E#2F2F4F#5D5D8E#9A9ACB#EAEAEA

Palette guide

How to use Nocturnal Garden Bloom

Overview

The Nocturnal Garden Bloom palette offers a sophisticated and mysterious aesthetic, drawing inspiration from flowers under a moonlit sky. This dark yet elegant collection features deep purples and blues, starting with the almost black #1A1A2E, transitioning through the rich #2F2F4F and #5D5D8E. A softer, muted lavender #9A9ACB provides a gentle contrast, culminating in the near-white #EAEAEA for highlights and clean backgrounds. Designers can leverage this palette to create interfaces that feel luxurious, calm, and deeply engaging, perfect for upscale brands or contemplative digital experiences. Its versatility allows for dramatic depth or subtle elegance, making it a valuable tool for various design projects.

Best used for

High-end brand websites (e.g., luxury fashion, jewelry)
Meditation or mindfulness apps
Elegant event invitations and branding
Dark mode UI themes
Art gallery or museum digital presence
Mystical or fantasy-themed content

Suggested color roles

primary

Use #1A1A2E for dominant backgrounds, headers, or large blocks requiring deep visual weight and a sense of luxury.

secondary

Apply #2F2F4F for sub-headers, navigation elements, or panels that need to stand out subtly from the primary background.

accent

Utilize #5D5D8E for interactive elements, call-to-action buttons, or subtle highlights that draw attention without being overly bright.

background

Employ #EAEAEA as a clean, light background for content areas, offering excellent contrast and a refined canvas.

text

Use #9A9ACB for lighter text on dark backgrounds or as a subtle accent text color. For dark text on light backgrounds, consider a deep charcoal or black.

Accessibility notes

Ensure #EAEAEA text on #1A1A2E or #2F2F4F backgrounds has sufficient contrast for readability.
#9A9ACB may require careful pairing; avoid using it as primary body text on light backgrounds like #EAEAEA without checking contrast ratios.
Reserve brighter colors like #9A9ACB for larger text or interactive elements to enhance readability.
Prioritize strong contrast for critical information, especially for users with visual impairments, adhering to WCAG guidelines.

Recommended combinations

Deep Bloom

High-contrast combination for elegant headers and content blocks, providing depth with a luminous highlight.

#1A1A2E · #5D5D8E · #EAEAEA

Muted Twilight

Soft, sophisticated pairing for secondary content areas or subtle branding, creating a gentle gradient.

#2F2F4F · #9A9ACB · #EAEAEA

Garden Glow

Dramatic background with a luminous accent, ideal for hero sections or key messages that need to stand out.

#1A1A2E · #9A9ACB · #EAEAEA

CSS variables

:root {
  --nocturnal-garden-bloom-1: #1A1A2E;
  --nocturnal-garden-bloom-2: #2F2F4F;
  --nocturnal-garden-bloom-3: #5D5D8E;
  --nocturnal-garden-bloom-4: #9A9ACB;
  --nocturnal-garden-bloom-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-garden-bloom": {
        1: "#1A1A2E",
        2: "#2F2F4F",
        3: "#5D5D8E",
        4: "#9A9ACB",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#2F2F4F

Color 3#5D5D8E

Color 4#9A9ACB

Color 5#EAEAEA

Accessibility

Contrast checker

1.3:1Fail

2.8:1Fail

6.4:1AA

14.2:1AAA

1.3:1Fail

2.1:1Fail

4.8:1AA

10.6:1AAA

2.8:1Fail

2.1:1Fail

2.3:1Fail

5.1:1AA

6.4:1AA

4.8:1AA

2.3:1Fail

2.2:1Fail

14.2:1AAA

10.6:1AAA

5.1:1AA

2.2:1Fail

Similar palettes

More like Nocturnal Garden Bloom

View all dark

Deep Plum Twilight

Enigmatic Shadow Tale

Midnight Velvet Cloak

Black Rose Bloom

Celestial Deep Blue

Dark Orchid Mystery