Back to palettes

Palette

Moonstone Bloom Gaze

A serene collection of cool, misty blues and soft lavenders, reflecting the gentle glow of a moonstone.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6D7A#7EA8B8#C3D9E0#F0F5F6#E8E1F3

Palette guide

How to use Moonstone Bloom Gaze

Overview

The Moonstone Bloom Gaze palette is a serene collection of cool, misty blues and soft lavenders, reflecting the gentle glow of a moonstone. With shades ranging from the deeper #4F6D7A and #7EA8B8 to the lighter, ethereal #C3D9E0, #F0F5F6, and #E8E1F3, this palette is ideal for designers seeking an ethereal, calming, and soft aesthetic. It perfectly evokes a sense of lunar mystique and delicate floral beauty, making it versatile for projects that require a light, airy, and sophisticated touch. Developers will find these harmonious colors excellent for creating tranquil user experiences and elegant branding.

Best used for

  • Wellness and meditation application interfaces
  • Spa and beauty product branding
  • Bridal and wedding-related marketing
  • Ethereal photography and art portfolios
  • Calming interior design concepts
  • Soft, feminine fashion brands

Suggested color roles

primary

Utilize #7EA8B8 as a calming primary color for main content areas or prominent UI elements, offering a serene blue-grey base.

secondary

Apply #C3D9E0 for supporting sections, subheadings, or subtle background textures, maintaining an airy, light feel.

accent

The soft lavender #E8E1F3 serves as a delicate accent for interactive elements, decorative touches, or to add a hint of mystique.

background

For a clean, expansive background, #F0F5F6 is ideal, providing an almost white, ethereal canvas. #C3D9E0 can be used for slightly deeper sections.

text

Dark blue-grey like #4F6D7A or a charcoal black offers excellent readability on #F0F5F6 and #C3D9E0. White text can work on #4F6D7A for contrast.

Accessibility notes

  • Ensure sufficient contrast for all text, especially when using lighter shades like #C3D9E0 and #F0F5F6 as backgrounds. Dark text is crucial.
  • Interactive elements should have distinct hover states or sufficient visual cues, as the subtle color differences can reduce clarity.
  • Avoid using light-colored text on #E8E1F3 or #F0F5F6, as this will result in poor readability.
  • Test color combinations under various lighting conditions to ensure legibility and visual comfort for all users.

Recommended combinations

Misty Bloom

Ideal for creating striking headers, clean UI elements, or hero sections where the light almost-white provides a fresh contrast to the deep blue.

#4F6D7A · #7EA8B8 · #F0F5F6

Ethereal Glow

Perfect for subtle gradients, layered UI elements, or illustrations that require depth and an ethereal, calming light effect.

#7EA8B8 · #C3D9E0 · #E8E1F3

Moonstone Depth

Use for robust navigation, footers, or branding elements that need a sophisticated, clear contrast between deep blue and soft, ethereal accents.

#4F6D7A · #C3D9E0 · #E8E1F3

CSS variables

:root {
  --moonstone-bloom-gaze-1: #4F6D7A;
  --moonstone-bloom-gaze-2: #7EA8B8;
  --moonstone-bloom-gaze-3: #C3D9E0;
  --moonstone-bloom-gaze-4: #F0F5F6;
  --moonstone-bloom-gaze-5: #E8E1F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonstone-bloom-gaze": {
        1: "#4F6D7A",
        2: "#7EA8B8",
        3: "#C3D9E0",
        4: "#F0F5F6",
        5: "#E8E1F3",
      }
    }
  }
}

Related searches

ethereal blue lavendermoonstone inspired palettecalming cool colorssoft spa brandingmisty blue grey

Palette colors

Hex values

Color 1#4F6D7A
·
Color 2#7EA8B8
·
Color 3#C3D9E0
·
Color 4#F0F5F6
·
Color 5#E8E1F3
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
5:1AA
4.3:1AA18
2
2.2:1Fail
1.8:1Fail
2.3:1Fail
2:1Fail
3
3.8:1AA18
1.8:1Fail
1.3:1Fail
1.2:1Fail
4
5:1AA
2.3:1Fail
1.3:1Fail
1.2:1Fail
5
4.3:1AA18
2:1Fail
1.2:1Fail
1.2:1Fail

Similar palettes

More like Moonstone Bloom Gaze

View all cool
Ethereal Mist Veil
Eucalyptus Haze
Arctic Sky Aurora
Astral Ocean Mist
Celestial Aurora Dream
Celestial Aurora Whisper