Back to palettes

Palette

Twilight Lily Pond

Deep, muted blues and gentle lighter tones, capturing the tranquil, shadowed beauty of a lily pond under moonlight.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Lily Pond 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 Twilight Lily Pond.

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

Data visualization

#0A1B2A#1E3A4D#3F5E7B#6D8EAE#9FBED8

Palette guide

How to use Twilight Lily Pond

Overview

The "Twilight Lily Pond" palette offers a sophisticated range of deep, muted blues, perfect for evoking serenity and depth. Starting with the profound #0A1B2A, a near-black navy, it transitions through tranquil #1E3A4D and the balanced #3F5E7B. Lighter tones like the soothing #6D8EAE and the ethereal #9FBED8 complete the spectrum, reminiscent of a moonlit pond. This palette is ideal for projects requiring a calm, elegant, and somewhat mysterious ambiance. Designers can leverage its cool undertones to create a sense of spaciousness and tranquility, making it versatile for both digital interfaces and print media where a subdued yet impactful presence is desired.

Best used for

  • Luxury brand websites
  • Spa and wellness marketing
  • Night-themed mobile apps
  • Elegant presentation backgrounds
  • Editorial design for nature themes
  • High-end product packaging

Suggested color roles

primary

Use #0A1B2A for dominant elements like navigation bars or main backgrounds to establish a deep, sophisticated foundation.

secondary

Apply #1E3A4D for section headers or prominent cards, offering a rich contrast while maintaining the palette's cool integrity.

accent

#6D8EAE or #9FBED8 can be used for interactive elements, icons, or subtle highlights, providing a gentle visual pop.

background

#0A1B2A or #1E3A4D for dark modes; #9FBED8 for light sections, ensuring a tranquil base.

text

#9FBED8 for light text on dark backgrounds like #0A1B2A, or dark charcoal/black text on #9FBED8 for readability.

Accessibility notes

  • Ensure #9FBED8 has sufficient contrast with darker blues like #0A1B2A for body text.
  • Use #6D8EAE or #9FBED8 for interactive elements to ensure visual clarity against mid-tones.
  • Avoid using similar mid-tones like #1E3A4D and #3F5E7B adjacent to each other for small text.
  • Consider a pure white or light grey for crucial text on the darkest colors for maximum readability.

Recommended combinations

Deep Serenity

Ideal for creating a sophisticated dark mode interface with clear hierarchy.

#0A1B2A · #3F5E7B · #9FBED8

Moonlit Calm

Excellent for tranquil backgrounds and highlighted content in editorial layouts.

#1E3A4D · #6D8EAE · #9FBED8

Subtle Gradient

Perfect for soft gradients in hero sections or background elements.

#3F5E7B · #6D8EAE · #9FBED8

CSS variables

:root {
  --twilight-lily-pond-1: #0A1B2A;
  --twilight-lily-pond-2: #1E3A4D;
  --twilight-lily-pond-3: #3F5E7B;
  --twilight-lily-pond-4: #6D8EAE;
  --twilight-lily-pond-5: #9FBED8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-lily-pond": {
        1: "#0A1B2A",
        2: "#1E3A4D",
        3: "#3F5E7B",
        4: "#6D8EAE",
        5: "#9FBED8",
      }
    }
  }
}

Related searches

dark blue color schemeserene blue palettemoonlit pond colorstranquil website designdeep navy blue palette

Palette colors

Hex values

Color 1#0A1B2A
·
Color 2#1E3A4D
·
Color 3#3F5E7B
·
Color 4#6D8EAE
·
Color 5#9FBED8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
5.1:1AA
9:1AAA
2
1.5:1Fail
1.8:1Fail
3.5:1AA18
6.1:1AA
3
2.6:1Fail
1.8:1Fail
2:1Fail
3.5:1AA18
4
5.1:1AA
3.5:1AA18
2:1Fail
1.8:1Fail
5
9:1AAA
6.1:1AA
3.5:1AA18
1.8:1Fail

Similar palettes

More like Twilight Lily Pond

View all dark
Celestial Twilight Garden
City After Hours
Deep Ocean Twilight
Indigo Ink Shallows
Oceanic Abyss Mystery
Suburban Night Lights