Back to palettes

Palette

Nocturne Flora Bloom

Cool blues and grays capture the ethereal glow and subtle mysteries of a garden bathed in moonlight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B263B#415A77#778DA9#A6A9B6#C7CAD1

Palette guide

How to use Nocturne Flora Bloom

Overview

The Nocturne Flora Bloom palette captures the ethereal glow and subtle mysteries of a garden bathed in moonlight, offering a calming array of cool blues and grays. This serene collection moves from the deep, anchoring #1B263B through the sophisticated mid-tones of #415A77 and #778DA9. Lighter, almost silvery grays like #A6A9B6 and the luminous #C7CAD1 complete the spectrum, providing a gentle, airy contrast. Designers can utilize this palette to craft tranquil, elegant, and modern interfaces, perfect for wellness applications, serene corporate environments, or any project seeking a sophisticated, calming, and clean aesthetic with a touch of mystery.

Best used for

  • Wellness and mindfulness apps
  • Corporate and professional websites
  • Elegant interior design concepts
  • Minimalist UI/UX designs
  • Cloud computing or data visualization
  • Serene digital art or photography showcases

Suggested color roles

primary

Use #1B263B as the deepest, most grounding color, ideal for dominant backgrounds, footers, or foundational elements.

secondary

Apply #415A77 as a rich, mid-tone blue-gray perfect for navigation, card backgrounds, or secondary content areas.

accent

Utilize #778DA9 as a softer, yet distinct blue-gray that can be used for subtle interactive elements, borders, or highlights.

background

Employ #C7CAD1 as the lightest shade, ideal for clean content backgrounds, providing excellent readability and an airy feel.

text

Choose #A6A9B6 as a light gray, suitable for secondary text on darker backgrounds or as a subtle accent text color. For primary text on light backgrounds, consider a dark charcoal or black.

Accessibility notes

  • Ensure #C7CAD1 text on #1B263B or #415A77 backgrounds meets contrast standards for readability.
  • #A6A9B6 as text on #C7CAD1 will likely have insufficient contrast; use for decorative elements or larger headings.
  • Avoid using #778DA9 for small text on #A6A9B6 without checking contrast carefully to maintain legibility.
  • Prioritize high contrast for critical information and interactive elements to ensure readability for all users.

Recommended combinations

Moonlight Depths

Deep base with a soft blue-gray accent and a luminous background for elegant, calming designs.

#1B263B · #778DA9 · #C7CAD1

Serene Horizon

Harmonious blend of mid-tones and light grays for content areas, offering clarity and tranquility.

#415A77 · #A6A9B6 · #C7CAD1

Flora Shadow

Strong primary with a bright background and a deep secondary for clear hierarchy and visual appeal.

#1B263B · #C7CAD1 · #415A77

CSS variables

:root {
  --nocturne-flora-bloom-1: #1B263B;
  --nocturne-flora-bloom-2: #415A77;
  --nocturne-flora-bloom-3: #778DA9;
  --nocturne-flora-bloom-4: #A6A9B6;
  --nocturne-flora-bloom-5: #C7CAD1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturne-flora-bloom": {
        1: "#1B263B",
        2: "#415A77",
        3: "#778DA9",
        4: "#A6A9B6",
        5: "#C7CAD1",
      }
    }
  }
}

Related searches

cool blue gray palettemoonlight garden colorsserene dark mode themeelegant minimalist bluecalm corporate color scheme

Palette colors

Hex values

Color 1#1B263B
·
Color 2#415A77
·
Color 3#778DA9
·
Color 4#A6A9B6
·
Color 5#C7CAD1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
6.5:1AA
9.2:1AAA
2
2.1:1Fail
2.1:1Fail
3:1AA18
4.3:1AA18
3
4.4:1AA18
2.1:1Fail
1.5:1Fail
2.1:1Fail
4
6.5:1AA
3:1AA18
1.5:1Fail
1.4:1Fail
5
9.2:1AAA
4.3:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Nocturne Flora Bloom

View all cool
Moonlit Cove
Moonlit Garden Path
Moonlit Garden Path
Agate Grotto
Alpine Mist
Celestial Ocean Dream