Back to palettes

Palette

Nocturnal Bloom

A dark and intriguing palette inspired by flora that awakens only under the enigmatic glow of moonlight.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1128#001F54#034078#017BA0#0A86B4

Palette guide

How to use Nocturnal Bloom

Overview

The Nocturnal Bloom palette is a dark and intriguing collection inspired by flora that awakens only under the enigmatic glow of moonlight. Featuring profound blues from #0A1128 and #001F54 to the subtly brighter #034078, #017BA0, and #0A86B4, this palette offers an elegant, mysterious, and deep aesthetic. It's perfect for designers and developers crafting experiences for luxury brands, cinematic productions, or high-tech interfaces that require a sophisticated, dark mode appearance. The gradual lightening of the blues provides a dynamic range while maintaining a cohesive, immersive, and refined visual identity.

Best used for

  • Luxury automotive and high-tech branding
  • Cinematic and film production websites
  • Mysterious brand identity and storytelling
  • Sophisticated dark mode applications
  • Digital art and immersive experiences
  • High-end product showcases

Suggested color roles

primary

Use #0A1128 as the deepest, foundational blue for main backgrounds or large sections, providing an elegant, dark base.

secondary

Employ #001F54 for supporting elements, sidebars, or card backgrounds to add subtle depth and variation.

accent

The brighter #0A86B4 serves as an enigmatic accent for interactive elements, calls to action, or key information.

background

The profound #0A1128 or #001F54 provides an excellent, immersive canvas for dark mode designs, enhancing content focus.

text

Pair with white or a very light grey (e.g., #E0E0E0) for optimal readability and a luminous contrast on all dark blues.

Accessibility notes

  • Excellent for dark mode: ensure white or very light grey text is used on all shades for optimal readability.
  • Avoid using mid-tone blues for small text against similar backgrounds to prevent readability issues for users.
  • Utilize #0A86B4 for interactive elements to ensure they stand out and meet WCAG contrast guidelines against darker backgrounds.
  • For large blocks of body text, always use a high-contrast color like white against the darker palette colors.

Recommended combinations

Deep Transition

Creates a smooth, elegant transition for backgrounds, headers, or layered visual effects.

#0A1128 · #001F54 · #034078

Moonlight Glimmer

Highlights key information or interactive elements with a luminous pop against a deep base.

#0A1128 · #0A86B4 · #017BA0

Elegant Contrast

Provides a sophisticated balance of depth and lightness, suitable for feature sections or distinct content blocks.

#001F54 · #0A86B4 · #034078

CSS variables

:root {
  --nocturnal-bloom-1: #0A1128;
  --nocturnal-bloom-2: #001F54;
  --nocturnal-bloom-3: #034078;
  --nocturnal-bloom-4: #017BA0;
  --nocturnal-bloom-5: #0A86B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-bloom": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#017BA0",
        5: "#0A86B4",
      }
    }
  }
}

Related searches

dark blue color palettemysterious UI colorsnocturnal design schemedeep sea blueselegant dark mode

Palette colors

Hex values

Color 1#0A1128
·
Color 2#001F54
·
Color 3#034078
·
Color 4#017BA0
·
Color 5#0A86B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
3.9:1AA18
4.5:1AA
2
1.2:1Fail
1.5:1Fail
3.3:1AA18
3.8:1AA18
3
1.8:1Fail
1.5:1Fail
2.2:1Fail
2.5:1Fail
4
3.9:1AA18
3.3:1AA18
2.2:1Fail
1.2:1Fail
5
4.5:1AA
3.8:1AA18
2.5:1Fail
1.2:1Fail

Similar palettes

More like Nocturnal Bloom

View all dark
Galactic Star Dust
Midnight Celestial Bloom
Midnight Indigo Depths
Midnight Ink Spill
Moonlit Lakeside Veil
Void Walker's Gaze