Back to palettes

Palette

Morning Fog Bloom

Reflects the tranquil beauty of a garden emerging from a soft, early morning mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#D3D3D3#B0C4DE#A2AE9D#C8A2C8

Palette guide

How to use Morning Fog Bloom

Overview

The "Morning Fog Bloom" palette beautifully reflects the tranquil beauty of a garden emerging from a soft, early morning mist. Featuring #E0FFFF (Light Cyan), #D3D3D3 (Light Grey), #B0C4DE (Light Steel Blue), #A2AE9D (Sage Green), and #C8A2C8 (Thistle), this collection offers a muted yet enchanting visual experience. Designers can leverage these soft, cool tones and gentle pastels to create serene interfaces, romantic branding, or any project that aims for an elegant, dreamy, and slightly melancholic aesthetic. It's ideal for conveying quiet beauty and understated charm.

Best used for

  • Romantic or vintage-inspired websites
  • Florist or garden center branding
  • Art and photography portfolios
  • Wellness and meditation content
  • Feminine fashion or lifestyle blogs
  • Wedding planning resources

Suggested color roles

primary

#E0FFFF - A very light, almost-white cyan, serving as an expansive, airy main background.

secondary

#D3D3D3 - A soft, neutral light grey, excellent for secondary backgrounds, card elements, or subtle dividers.

accent

#C8A2C8 - A muted thistle purple, perfect for gentle highlights, interactive elements, or a touch of romantic flair.

background

#B0C4DE - A calm light steel blue, offering a serene backdrop for content sections or hero areas.

text

#A2AE9D - A muted sage green, suitable for headings or secondary text. For body text, use a dark grey or black for optimal contrast on lighter backgrounds.

Accessibility notes

  • Many color pairings will have low contrast; always use a contrast checker for text and interactive elements.
  • #A2AE9D might have insufficient contrast on #D3D3D3 or #B0C4DE for small text.
  • Ensure interactive elements have clear non-color visual cues due to the palette's overall softness.
  • For critical information, use a dark, high-contrast text color (e.g., black) on the lightest backgrounds like #E0FFFF.

Recommended combinations

Misty Base

#E0FFFF as main background, #D3D3D3 for content cards, and #B0C4DE for headers or subtle sections.

#E0FFFF · #D3D3D3 · #B0C4DE

Blooming Accent

#E0FFFF as a clean canvas, #C8A2C8 for romantic highlights, and #A2AE9D for supporting details.

#E0FFFF · #C8A2C8 · #A2AE9D

Serene Layers

#B0C4DE for a main content background, #A2AE9D for sub-elements, and #D3D3D3 for borders or dividers.

#B0C4DE · #A2AE9D · #D3D3D3

CSS variables

:root {
  --morning-fog-bloom-1: #E0FFFF;
  --morning-fog-bloom-2: #D3D3D3;
  --morning-fog-bloom-3: #B0C4DE;
  --morning-fog-bloom-4: #A2AE9D;
  --morning-fog-bloom-5: #C8A2C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-bloom": {
        1: "#E0FFFF",
        2: "#D3D3D3",
        3: "#B0C4DE",
        4: "#A2AE9D",
        5: "#C8A2C8",
      }
    }
  }
}

Related searches

muted pastel color schemegarden fog UI colorsromantic serene web palettesoft cool brand designdreamy elegant hex codes

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#D3D3D3
·
Color 3#B0C4DE
·
Color 4#A2AE9D
·
Color 5#C8A2C8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
2.2:1Fail
2.1:1Fail
2
1.4:1Fail
1.2:1Fail
1.5:1Fail
1.5:1Fail
3
1.7:1Fail
1.2:1Fail
1.3:1Fail
1.2:1Fail
4
2.2:1Fail
1.5:1Fail
1.3:1Fail
1:1Fail
5
2.1:1Fail
1.5:1Fail
1.2:1Fail
1:1Fail

Similar palettes

More like Morning Fog Bloom

View all cool