Palette

Ethereal Night Bloom

A dreamy palette reflecting the quiet magic of a moonlit night, with subtle glows emerging from deep hues.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F3B#3B3B6D#6A5ACD#9370DB#B0C4DE

Palette guide

How to use Ethereal Night Bloom

Overview

The 'Ethereal Night Bloom' palette reflects the quiet magic of a moonlit night, with subtle glows emerging from deep hues. It features a very dark blue #1F1F3B, a deep blue-purple #3B3B6D, a vibrant medium purple #6A5ACD, a glowing lighter purple #9370DB, and a soft light blue-grey #B0C4DE. This palette is perfect for designers and developers aiming to create mysterious, elegant, and sophisticated visuals. Its rich, deep tones combined with luminous accents make it ideal for conveying luxury, fantasy, or futuristic themes, providing a striking contrast that is both immersive and captivating.

Best used for

Luxury brand identities and packaging
Night-themed app interfaces (dark mode)
Sci-fi or fantasy game aesthetics
Elegant event invitations
Mystical digital art and illustrations
Sophisticated website headers

Suggested color roles

primary

Use #3B3B6D (a deep blue-purple) as a foundational color for large sections or main backgrounds, providing immersive depth.

secondary

Employ #6A5ACD (a vibrant medium purple) for prominent elements, primary calls to action, or sections needing a magical pop.

accent

Apply #9370DB (a glowing lighter purple) for subtle highlights, interactive states, or decorative elements that require a luminous touch.

background

Utilize #1F1F3B (a very dark blue) as the primary background color to create an immersive, deep canvas that makes other colors glow.

text

For optimal readability on dark backgrounds, use #B0C4DE or pure white. #6A5ACD works well for headings or important text on #1F1F3B.

Accessibility notes

Ensure sufficient contrast for light text on dark backgrounds; #B0C4DE on #1F1F3B should be tested for WCAG AA compliance.
Avoid using dark text colors on other dark colors; this palette works best with light text on its darker hues.
Use a high-contrast color like #9370DB or #B0C4DE for interactive elements to ensure they are clearly discernible.
When using #6A5ACD or #9370DB for text, ensure the font size is adequate and contrast is sufficient against the background.

Recommended combinations

Deep Night

Ideal for dark mode UI, immersive backgrounds, or creating a sense of depth and mystery in digital designs.

#1F1F3B · #3B3B6D · #6A5ACD

Moonlit Glow

Excellent for highlights, interactive elements, or focal points that need to stand out with a luminous, ethereal effect.

#B0C4DE · #9370DB · #6A5ACD

Mystic Bloom

Effective for branding elements, feature accents, or illustrations that evoke a magical, blossoming night scene.

#1F1F3B · #6A5ACD · #9370DB

CSS variables

:root {
  --ethereal-night-bloom-1: #1F1F3B;
  --ethereal-night-bloom-2: #3B3B6D;
  --ethereal-night-bloom-3: #6A5ACD;
  --ethereal-night-bloom-4: #9370DB;
  --ethereal-night-bloom-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-night-bloom": {
        1: "#1F1F3B",
        2: "#3B3B6D",
        3: "#6A5ACD",
        4: "#9370DB",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#1F1F3B

Color 2#3B3B6D

Color 3#6A5ACD

Color 4#9370DB

Color 5#B0C4DE

Accessibility

Contrast checker

1.5:1Fail

3:1AA18

4.2:1AA18

9:1AAA

1.5:1Fail

1.9:1Fail

2.7:1Fail

5.8:1AA

3:1AA18

1.9:1Fail

1.4:1Fail

3:1Fail

4.2:1AA18

2.7:1Fail

1.4:1Fail

2.1:1Fail

9:1AAA

5.8:1AA

3:1Fail

2.1:1Fail

Similar palettes

More like Ethereal Night Bloom